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

Javascript Chrome扩展,将消息从注入脚本发送到后台的最佳方式,javascript,google-chrome-extension,messaging,Javascript,Google Chrome Extension,Messaging,我正在尝试设计一个chrome扩展,它必须向网页中注入一个脚本,这个脚本截取json响应,并将它们发送到后台脚本 请记住,我不习惯js,我可能做错了,因此,在我的清单中,我有: "background": { "scripts": ["background.js"], "persistent": true }, "content_scripts": [ { "matches": ["*://url*"], "run_at": "document_start", "js

我正在尝试设计一个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;
            ...................
    var s = document.createElement('script');
s.src = chrome.extension.getURL('injected.js');
s.onload = function() {
    this.remove();
};
(document.head || document.documentElement).appendChild(s);
inject.js的目的是将injected.js注入网页,现在它还对从injected.js到background.js的消息进行中继,我这样注入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;
            ...................
    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发送到injected.js,然后在injecte.js中,我可以通过以下方式获取这些消息:

 window.addEventListener("message", function(event) {
然后,我终于可以将这些消息发送到我的后台脚本,这次使用:

chrome.runtime.sendMessage(
我找不到直接从injected.js向background.js发送消息的方法,chrome文档中提供的信息非常适合从injected.js向background.js发送消息,但在其他情况下无法工作,我尝试了几种在线解决方案,我使用的是唯一能够工作的解决方案

无论如何,这是可行的,我能够将json响应从injected.js发送到injected.js到background.js,并在我的后台脚本中解析它们

问题是,我讨厌这样做,json响应可能非常长,我已经在injected.js中过滤响应,以便只发送有用的响应,但有时我还必须发送591109个字符长的响应副本! 所以,必须发送两次如此长的回复有点难看,我希望这是高效和快速的


有人对此有想法吗?

您的injected.js运行在
脚本
DOM元素中,因此它只是一个未经授权的网页脚本。要直接从网页脚本中使用
chrome.runtime.sendMessage
,您必须在中声明允许的URL模式,但不能不加区分地允许所有URL,因此我将使用您的方法,尽管使用(最有可能是随机事件名称)与可被页面脚本或其他扩展截获的
消息
不同,我这里关注的不是安全性,而是可能破坏某些网站,这些网站假定消息数据采用特定格式(例如字符串),与您使用的格式(例如对象)不兼容

您还可以使用chrome.debugger API连接到选项卡并在后台脚本中截获JSON响应,但这将在选项卡上方显示一个关于正在调试的JSON响应的通知

无论如何,除非您看到扩展减慢了页面速度(在devtools profiler中,或者通过手动测量代码中花费的时间),否则没有必要担心


FWIW,在Firefox中,您可以通过。

直接读取响应,用于基于
CustomEvent
的通信示例:真棒!实际上,外部可连接中允许的URL可能是一个很好的解决方案。我知道使用调试器api的可能性,尽管我没有尝试,但我担心这会占用太多资源。