用externally_connectable实现WWW向Chrome扩展发送数据

基础概念

externally_connectable 是 Chrome 扩展的一种特性，允许网页与扩展进行双向通信。通过这种方式，网页可以调用扩展中的函数，扩展也可以向网页发送消息。这种通信机制是通过 chrome.runtime.sendMessage 和 chrome.runtime.onMessage API 实现的。

优势

双向通信：网页和扩展之间可以进行双向通信，使得网页可以利用扩展的功能，扩展也可以获取网页的数据。
灵活性：这种通信方式非常灵活，可以传递各种类型的数据，包括复杂对象和二进制数据。
安全性：通过配置 externally_connectable 的 matches 字段，可以限制哪些网页可以与扩展通信，从而提高安全性。

类型

externally_connectable 配置对象包含以下字段：

matches：一个 URL 模式数组，指定哪些网页可以与扩展通信。
extensions：一个扩展 ID 数组，指定哪些扩展可以与网页通信。

应用场景

网页与扩展的数据交换：例如，网页需要使用扩展中的某个功能，或者扩展需要获取网页中的某些数据。
增强网页功能：通过扩展为网页添加新的功能，如广告拦截、内容过滤等。
跨域通信：网页和扩展可以通过这种方式绕过同源策略的限制，进行跨域通信。

实现步骤

配置 externally_connectable

在扩展的 manifest.json 文件中配置 externally_connectable：

{
  "name": "My Extension",
  "version": "1.0",
  "manifest_version": 3,
  "externally_connectable": {
    "matches": ["<all_urls>"],
    "extensions": ["<extension_id>"]
  },
  "background": {
    "service_worker": "background.js"
  }
}

在扩展中监听消息

在 background.js 中监听来自网页的消息：

chrome.runtime.onMessageExternal.addListener((message, sender, sendResponse) => {
  console.log('Received message from web page:', message);
  // 处理消息并发送响应
  sendResponse({ data: 'Hello from extension!' });
});

在网页中发送消息

在网页中使用 chrome.runtime.sendMessage 发送消息给扩展：

chrome.runtime.sendMessage('<extension_id>', { data: 'Hello from web page!' }, (response) => {
  console.log('Received response from extension:', response);
});

可能遇到的问题及解决方法

权限问题：确保扩展的 manifest.json 文件中包含了 externally_connectable 配置，并且网页的 URL 符合 matches 字段的规则。
扩展 ID 错误：确保在 externally_connectable 配置和 chrome.runtime.sendMessage 中使用的扩展 ID 是正确的。
跨域问题：如果网页和扩展不在同一个域下，确保 matches 字段配置正确，并且扩展已经请求了相应的权限。