Google Chrome扩展程序 - 单击工具栏图标时打开新标签页

创建一个 Google Chrome 扩展程序，当用户单击工具栏图标时打开一个新标签页，这是一个常见的需求。以下是一个简单的示例，展示了如何实现这一功能。

1. 创建项目结构

首先，创建一个新的文件夹来存放你的扩展程序文件。假设文件夹名为 my_extension，其目录结构如下：

my_extension/
├── manifest.json
└── background.js

2. 创建 manifest.json

manifest.json 文件是 Chrome 扩展程序的配置文件。创建 manifest.json 文件，并添加以下内容：

{
  "manifest_version": 3,
  "name": "Open New Tab Example",
  "version": "1.0",
  "description": "An example extension that opens a new tab when the toolbar icon is clicked.",
  "permissions": [
    "tabs"
  ],
  "background": {
    "service_worker": "background.js"
  },
  "action": {
    "default_icon": {
      "16": "icon16.png",
      "48": "icon48.png",
      "128": "icon128.png"
    },
    "default_title": "Open New Tab"
  }
}

3. 创建 background.js

background.js 文件是扩展程序的后台脚本，用于处理图标点击事件。创建 background.js 文件，并添加以下内容：

chrome.action.onClicked.addListener((tab) => {
  chrome.tabs.create({ url: 'https://www.example.com' });
});

在这个示例中，当用户单击工具栏图标时，将打开一个新的标签页，并导航到 https://www.example.com。

4. 添加图标

你需要为扩展程序提供图标。将图标文件（例如 icon16.png、icon48.png 和 icon128.png）添加到 my_extension 文件夹中。你可以使用任意图标，只需确保文件名和 manifest.json 中的配置一致。

5. 加载扩展程序

1. 打开 Google Chrome 浏览器。
2. 进入 chrome://extensions/ 页面。
3. 打开右上角的“开发者模式”开关。
4. 点击“加载已解压的扩展程序”按钮。
5. 选择 my_extension 文件夹。

6. 测试扩展程序

加载扩展程序后，你应该会在工具栏中看到你的扩展程序图标。单击图标，应该会打开一个新的标签页，并导航到 https://www.example.com。

代码解释

• manifest.json：
  • manifest_version：指定清单文件的版本，Chrome 扩展程序目前使用版本 3。
  • name、version、description：扩展程序的基本信息。
  • permissions：请求的权限，这里请求了 tabs 权限以便创建新标签页。
  • background：指定后台脚本，这里使用了 background.js 作为服务工作者。
  • action：定义工具栏图标的默认属性，包括图标和标题。
• background.js：
  • chrome.action.onClicked.addListener：添加一个事件监听器，当用户单击工具栏图标时触发。
  • chrome.tabs.create：创建一个新的标签页，并导航到指定的 URL。

通过以上步骤，你可以创建一个简单的 Chrome 扩展程序，当用户单击工具栏图标时打开一个新标签页。你可以根据需要进一步扩展和自定义这个示例。