从零开始玩转 Chrome 插件开发（中）

2024-01-07 17:35:44

开发 Chrome 插件需要熟悉几个核心概念：清单文件（manifest file）、内容脚本（content script）、选项页面（options page）以及事件侦听器（event listeners）。这些组件协同工作，构建出一个功能丰富的扩展应用。

清单文件 (Manifest File)

清单文件是每个 Chrome 扩展的核心配置文件。它定义了扩展的基本信息，包括名称、版本号和权限等。此外，它还指定了浏览器操作的详细规则，例如内容脚本如何运行以及何时触发这些脚本。

示例代码

{
  "manifest_version": 3,
  "name": "示例插件",
  "version": "1.0",
  "permissions": [
    "storage"
  ],
  "content_scripts": [
    {
      "matches": ["*://*.example.com/*"],
      "js": ["inject.js"]
    }
  ]
}

在这个例子中，插件被授予访问存储 API 的权限，并且在匹配的 URL 上运行内容脚本。

内容脚本 (Content Script)

内容脚本允许扩展与网页交互。这些脚本能读取和修改页面的内容，也可以向页面添加新的功能或样式。

示例代码

// inject.js
console.log('注入脚本已加载');
document.body.style.backgroundColor = 'lightblue';

上述代码展示了如何通过更改背景颜色来修改网页的外观。

选项页面 (Options Page)

用户可以通过选项页面配置插件的各种设置。这是与用户交互的一个重要接口，通常用于调整插件行为或个性化体验。

示例代码

在清单文件中定义选项页面：

"options_page": "options.html"

创建一个简单的 HTML 页面（options.html）和对应的脚本以处理用户的输入并存储设置。

<!-- options.html -->
<!DOCTYPE html>
<html>
<head><title>示例插件设置</title></head>
<body>
  <h1>示例插件选项</h1>
  <form id="settings-form">
    <label for="color">选择背景颜色:</label>
    <input type="text" name="color" id="color" value="#FFFFFF"/>
    <button type="submit">保存设置</button>
  </form>

  <script src="options.js"></script>
</body>
</html>

// options.js
document.getElementById('settings-form').addEventListener('submit', function(e) {
  e.preventDefault();
  chrome.storage.sync.set({
    backgroundColor: document.getElementById('color').value
  }, function() {
    console.log('设置已保存');
  });
});

事件侦听器 (Event Listeners)

事件监听机制允许扩展根据用户的交互或浏览器状态的变化执行特定操作。例如，可以监听导航事件以在用户访问特定网站时触发代码。

示例代码

chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
  if (changeInfo.status === 'complete' && /^https:\/\/example\.com/.test(tab.url)) {
    console.log('用户已进入 example.com');
  }
});

这个事件监听器会检测用户是否已经完全加载了特定的 URL。