Chrome 扩展程序（Chrome Extension）是一种小型软件，可通过 JavaScript、HTML 和 CSS 扩展浏览器功能。在本教程中，我们将从零开始，开发一个 Chrome 扩展程序，用来自定义浏览器的默认“新标签页”（New Tab）。教程面向初学者，带你逐步完成开发，内容通俗易懂。
一、开发环境准备
安装 Google Chrome 浏览器
确保你的电脑上已经安装了 Google Chrome。如果没有，可以访问 Chrome 下载页面 安装。
安装 VS Code
我们使用 VS Code 作为代码编辑器。你可以从 VS Code 官方网站 下载并安装。
创建开发文件夹
在电脑上新建一个文件夹，命名为 custom-new-tab-extension，这是我们项目的根目录。
二、了解 Chrome 扩展的基本结构
Chrome 扩展程序通常包含以下文件：
manifest.json：扩展程序的配置文件，定义了功能、权限和入口文件等。HTML 文件：定义界面内容，比如自定义的新标签页内容。CSS 文件：用于美化页面的样式。JavaScript 文件：实现页面的交互逻辑。三、创建基础项目结构
在 custom-new-tab-extension 文件夹中，创建以下文件：
custom-new-tab-extension/│├── manifest.json # 配置文件├── newtab.html # 新标签页界面├── styles.css # 样式文件└── script.js # JavaScript 逻辑四、编写核心文件
1. 配置文件：manifest.json
这是 Chrome 扩展的核心文件。创建 manifest.json 并添加以下内容：
{ "manifest_version": 3, "name": "Custom New Tab", "version": "1.0", "description": "A Chrome extension to customize the new tab page.", "author": "XuanRan", "chrome_url_overrides": { "newtab": "newtab.html" }, "permissions": [], "icons": { "16": "icon16.png", "48": "icon48.png", "128": "icon128.png" }}解释：
manifest_version：固定为 3，表示使用最新的扩展规范。name：扩展程序的名称。version：版本号，格式为 主版本号.次版本号.修订号。description：对扩展功能的简短描述。chrome_url_overrides：指定要覆盖的新标签页文件。icons：指定扩展的图标，可以暂时省略。 2. HTML 文件：newtab.html
创建一个简单的新标签页界面，在 newtab.html 文件中添加以下代码：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Custom New Tab</title> <link rel="stylesheet" href="styles.css"></head><body> <div class="container"> <h1>Welcome to Your Custom New Tab</h1> <p>Customize this page with your favorite links or widgets.</p> <button id="change-color">Change Background Color</button> </div> <script src="script.js"></script></body></html>解释：
这段代码创建了一个简单的页面，包含标题、说明文字和一个按钮。引用了styles.css 和 script.js 文件以添加样式和功能。 3. 样式文件：styles.css
为页面添加美化效果，在 styles.css 文件中输入：
body { margin: 0; padding: 0; font-family: Arial, sans-serif; display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #f0f0f0;}.container { text-align: center;}button { padding: 10px 20px; font-size: 16px; background-color: #007bff; color: white; border: none; border-radius: 5px; cursor: pointer;}button:hover { background-color: #0056b3;}解释：
将页面居中显示，并设置背景颜色和字体样式。美化按钮的外观并添加悬停效果。4. 逻辑文件：script.js
为页面添加简单的交互功能，编辑 script.js：
document.getElementById('change-color').addEventListener('click', function () { document.body.style.backgroundColor = getRandomColor();});function getRandomColor() { const letters = '0123456789ABCDEF'; let color = '#'; for (let i = 0; i < 6; i++) { color += letters[Math.floor(Math.random() * 16)]; } return color;}功能：
点击按钮时，随机更改页面背景颜色。五、加载扩展程序到 Chrome
打开 Chrome 浏览器，在地址栏输入chrome://extensions，进入扩展管理页面。打开右上角的“开发者模式”开关。点击“加载已解压的扩展程序”，选择项目文件夹 custom-new-tab-extension。加载完成后，你会看到扩展程序出现在列表中。 六、测试新标签页
打开一个新的标签页，你会看到自定义的内容替代了默认页面。点击按钮，尝试更改页面背景颜色。七、进一步优化
添加个性化功能 显示实时天气或待办事项。加入常用网站快捷方式。 发布到 Chrome 网上应用店 完成开发后，可以将扩展打包并提交到 Chrome 网上应用店供其他用户下载。八、总结
自定义新标签页是 Chrome 扩展开发的经典入门案例，掌握之后，你可以尝试实现更多复杂功能，最后就给大家砍一下我修改后的成果吧
