自从Chrome引入以来
externally_connectable，这在Chrome中非常容易做到。首先，在
manifest.json文件中指定允许的域：
"externally_connectable": { "matches": ["*://*.example.com/*"]}用于
chrome.runtime.sendMessage从页面发送消息：
chrome.runtime.sendMessage(editorExtensionId, {openUrlInEditor: url}, function(response) { // ... });最后，在您的背景页面中收听
chrome.runtime.onMessageExternal：
chrome.runtime.onMessageExternal.addListener( function(request, sender, sendResponse) { // verify `sender.url`, read `request` object, reply with `sednResponse(...)`... });如果您无权获得
externally_connectable支持，则原始答案如下：
尽管这里描述的原理（网页脚本注入，长时间运行的后台脚本，消息传递）适用于几乎所有浏览器扩展框架，但我都将从以Chrome为中心的角度回答。
从高层次上讲，您想要做的是将内容脚本注入每个网页，从而添加一个可访问该网页的API。当站点调用API时，API会触发内容脚本执行某些操作，例如通过异步回调将消息发送到后台页面和/或将结果发送回内容脚本。
这里的主要困难在于，“注入”到网页中的内容脚本不能直接更改页面的Javascript执行环境。它们共享DOM，因此在内容脚本和网页之间共享 事件 和 DOM结构更改 ，但不共享函数和变量。例子：
DOM操作： 如果内容脚本将
<div>
元素添加到页面，则将按预期工作。内容脚本和页面都将看到新的<div>
。事件： 如果内容脚本设置了事件侦听器（例如，单击元素），则事件发生时侦听器将成功触发。如果页面为从内容脚本触发的自定义事件设置了侦听器，则在内容脚本触发这些事件时将成功接收它们。
函数： 如果内容脚本定义了新的全局函数
foo()
（如您在设置新的API时可能尝试的）。该页面 无法 查看或执行foo
，因为它foo
仅存在于内容脚本的执行环境中，而不存在于页面的环境中。
那么，如何设置适当的API？答案有很多步骤：
- 从低层次上讲，使您的API基于事件。网页使用触发自定义DOM事件
dispatchEvent
，内容脚本使用侦听它们addEventListener
，并在收到事件时采取措施。这是一个简单的基于事件的存储API，网页可以使用该API进行扩展以为其存储数据：
content_script.js （在您的扩展程序中）：
// an object used to store things passed in from the APIinternalStorage = {};// listen for myStoreEvent fired from the page with key/value pair datadocument.addEventListener('myStoreEvent', function(event) { var dataFromPage = event.detail; internalStorage[dataFromPage.key] = dataFromPage.value});非扩展网页，使用基于事件的API：
function sendDataToExtension(key, value) { var dataObj = {"key":key, "value":value}; var storeEvent = new CustomEvent('myStoreEvent', {"detail":dataObj}); document.dispatchEvent(storeEvent);}sendDataToExtension("hello", "world");如您所见，普通网页触发了内容脚本可以查看和响应的事件，因为它们共享DOM。事件具有附加的数据，并添加到
CustomEvent构造函数中。这里的示例非常简单-一旦内容脚本具有页面中的数据（很可能将其传递到后台页面以进行进一步处理），您显然可以在其内容中做更多的事情。
- 但是，这只是成功的一半。在上面的示例中，普通网页必须
sendDataToExtension
自行创建。创建和触发自定义事件非常冗长（我的代码占用3行，并且相对简短）。您不想强迫网站仅使用API编写奥秘的事件触发代码。该解决方案有点令人讨厌：将<script>
标签添加到共享DOM，这会将事件触发代码添加到主页的执行环境中。
内部 content_script.js：
// inject a script from the extension's files// into the execution environment of the main pagevar s = document.createElement('script');s.src = chrome.extension.getURL("myapi.js");document.documentElement.appendChild(s);在其中定义的任何功能都
myapi.js可以访问主页。（如果使用
"manifest_version":2，则需要
myapi.js在清单的中包含
web_accessible_resources）。
myapi.js：
function sendDataToExtension(key, value) { var dataObj = {"key":key, "value":value}; var storeEvent = new CustomEvent('myStoreEvent', {"detail":dataObj}); document.dispatchEvent(storeEvent);}现在 普通的网页 可以简单地执行以下操作：
sendDataToExtension("hello", "world");- 我们的API流程还有另外 一个缺点：该
myapi.js
脚本在加载时将无法完全使用。相反，它将在页面加载时间之后的一段时间加载。因此，纯网页需要知道何时可以安全地调用您的API。您可以通过myapi.js
触发页面监听的“ API就绪”事件来解决此问题。
myapi.js：
function sendDataToExtension(key, value) { // as above}// since this script is running, myapi.js has loaded, so let the page knowvar customAPILoaded = new CustomEvent('customAPILoaded');document.dispatchEvent(customAPILoaded);*使用API的 *纯网页 ：
document.addEventListener('customAPILoaded', function() { sendDataToExtension("hello", "world"); // all API interaction goes in here, now that the API is loaded...});- 加载时脚本可用性问题的另一种解决方案是
run_at
在清单中设置内容脚本的属性，"document_start"
如下所示：
manifest.json：
"content_scripts": [ { "matches": ["https://example.com/*"], "js": [ "myapi.js" ], "run_at": "document_start" } ],在“ document_start”的情况下，文件将在来自css的任何文件之后但在构造任何其他DOM或运行任何其他脚本之前注入。
对于某些内容脚本，与“ API加载”事件相比，它可能更合适且工作量更少。
- 为了将结果发送 回 页面，您需要提供一个异步回调函数。无法从API同步返回结果，因为事件触发/侦听本质上是异步的（即，您的站点端API函数在内容脚本通过API请求获得事件之前就终止了）。
myapi.js：
function getDataFromExtension(key, callback) { var reqId = Math.random().toString(); // unique ID for this request var dataObj = {"key":key, "reqId":reqId}; var fetchEvent = new CustomEvent('myFetchEvent', {"detail":dataObj}); document.dispatchEvent(fetchEvent); // get ready for a reply from the content script document.addEventListener('fetchResponse', function respListener(event) { var data = event.detail; // check if this response is for this request if(data.reqId == reqId) { callback(data.value); document.removeEventListener('fetchResponse', respListener); } }}content_script.js （在您的扩展程序中）：
// listen for myFetchEvent fired from the page with key// then fire a fetchResponse event with the replydocument.addEventListener('myStoreEvent', function(event) { var dataFromPage = event.detail; var responseData = {"value":internalStorage[dataFromPage.key], "reqId":data.reqId}; var fetchResponse = new CustomEvent('fetchResponse', {"detail":responseData}); document.dispatchEvent(fetchResponse);});普通网页：
document.addEventListener('customAPILoaded', function() { getDataFromExtension("hello", function(val) { alert("extension says " + val); });});reqId情况下，你必须出一次多个请求是必要的，使他们不读错的响应。
我认为这就是一切！因此，当您考虑其他扩展也可以将侦听器绑定到事件以窃听页面如何使用API时，这不是出于胆小或可能不值得的。我只知道所有这一切，因为我为学校项目制作了概念验证的加密API（并随后了解了与之相关的主要安全隐患）。
总而言之：
内容脚本可以侦听来自普通网页的自定义事件，并且脚本还可以注入具有使网页更容易触发这些事件的功能的脚本文件。内容脚本可以将消息传递到后台页面，然后由该页面存储，转换或传输消息中的数据。
