-
在底层，将您的 API 设为event-based。网页使用dispatchEvent 触发自定义DOM 事件，内容脚本使用addEventListener 监听它们，并在收到它们时采取行动。这是一个简单的基于事件的存储 API，网页可以使用该 API 扩展来为其存储数据：
content_script.js（在您的扩展程序中）：
// an object used to store things passed in from the API
internalStorage = {};
// listen for myStoreEvent fired from the page with key/value pair data
document.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 constructor 中。我的示例非常简单——一旦内容脚本包含来自页面的数据（很可能是pass it 到background page 进行进一步处理），您显然可以在内容脚本中做更多的事情。
-
然而，这只是成功的一半。在我上面的例子中，普通网页必须自己创建sendDataToExtension。创建和触发自定义事件非常冗长（我的代码占用 3 行，并且相对简短）。您不想强迫网站编写神秘的事件触发代码只是为了使用您的 API。解决方案有点讨厌：将 <script> 标记附加到您的共享 DOM 中，这会将事件触发代码添加到主页的执行环境中。
content_script.js 内部：
// inject a script from the extension's files
// into the execution environment of the main page
var s = document.createElement('script');
s.src = chrome.extension.getURL("myapi.js");
document.documentElement.appendChild(s);
在myapi.js 中定义的任何功能都可以访问主页。 （如果您使用的是"manifest_version":2，则需要在清单的web_accessible_resources 列表中包含myapi.js）。
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 know
var 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"
}
],
摘自docs：
在“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 reply
document.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（并随后了解了与之相关的主要安全陷阱）。