Chrome 扩展，将消息从注入的脚本发送到后台的最佳方式

Question

我正在尝试设计一个 chrome 扩展，它必须将脚本注入网页，该脚本拦截 json 响应，并将它们发送到后台脚本。

请记住，我不习惯 js 我可能做错了，所以，在我的清单中我有：

"background": {
    "scripts": ["background.js"],
    "persistent": true
},
"content_scripts": [
{
  "matches": ["*://url*"],
  "run_at": "document_start",
  "js": ["inject.js"]
}
],
"web_accessible_resources": ["injected.js"],

在我的后台脚本中，我以这种方式处理消息：

 chrome.runtime.onMessage.addListener(
  function(request, sender, sendResponse) {
    if (request.type) {
        switch(request.type) {
            case "THIS_REQUEST_TYPE":
            do_stuff(request.foo, request.bar);
            break;
            ...................

inject.js的目的是将injected.js注入网页，现在它也在做从injected.js到background.js的消息的中继，我注入injected.js 这样 :

    var s = document.createElement('script');
s.src = chrome.extension.getURL('injected.js');
s.onload = function() {
    this.remove();
};
(document.head || document.documentElement).appendChild(s);

现在，要从 injected.js 获取消息到我的后台脚本，我基本上使用：

  window.postMessage(msgdata, "*");

这会将消息从 injected.js 发送到 inject.js，然后在 inject.js 我可以通过 :

获取这些消息

 window.addEventListener("message", function(event) {

然后我终于可以将这些消息发送到我的后台脚本，这次使用：

chrome.runtime.sendMessage(

我发现无法直接将消息从 injected.js 发送到 background.js，chrome 文档中提供的信息非常适合从 [=39= 发送消息] 到 background.js，但无法正常工作，我尝试了几种在线解决方案，我使用的是唯一一种我能够开始工作的解决方案。

无论如何，这有效，我能够将 json 响应从 injected.js 发送到 inject.js 再到 background.js 并在我的后台脚本中解析它们。

问题是，我讨厌那样做，json 回复可能会很长，我已经在 injected.js 中过滤回复，这样只有那些有用的人才能得到已发送，但有时我仍然必须发送 591109 个字符长的回复副本！因此，不得不发送两次那么长的响应有点难看，我希望它高效且快速。

有人对此有想法吗？

Answer 1

您的 injected.js 是运行在 script DOM 元素中，因此它只是一个非特权网页脚本。要直接从网页脚本使用 chrome.runtime.sendMessage，您必须在 externally_connectable but you can't allow all URLs indiscriminately so I would use your approach, although with a CustomEvent 中声明允许的 URL 模式（最有可能是随机事件名称）而不是 message被页面脚本或其他扩展拦截——我在这里关心的不是安全性，而是破坏某些假定消息数据采用某种格式（例如字符串）的站点的可能性，与您的格式不兼容使用（例如对象）。

您也可以使用 chrome.debugger API 附加到选项卡并拦截后台脚本中的 JSON 响应，但这会在选项卡上方显示一条通知已调试。

无论如何，除非您看到您的扩展程序减慢了页面速度（在 devtools profiler 中或通过手动测量在代码中花费的时间），否则无需担心。

FWIW，在 Firefox 中，您可以通过 browser.webRequest.filterResponseData 直接读取响应。

Chrome 扩展，将消息从注入的脚本发送到后台的最佳方式

Chrome extension, best way to send messages from injected script to background

javascript

messaging

google-chrome-extension