Chrome扩展程序,这是将消息从注入的脚本发送到后台的最佳方法

时间:2018-11-13 21:12:23

标签: javascript google-chrome-extension messaging

我正在尝试设计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的目的是将jected.js注入到网页中,现在它也正在中继从injected.js到background.js的消息,我就是这样注入

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

现在,要将消息从jected.js传递到我的后台脚本,我基本上使用:

  window.postMessage(msgdata, "*");

这会将消息从jected.js发送到inject.js,然后在inject.js中,我可以通过以下方式获取这些消息:

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

然后我终于可以使用以下命令将这些消息发送到我的后台脚本了:

chrome.runtime.sendMessage(

我发现无法将消息直接从jected.js发送到background.js,chrome的文档中提供的信息非常好,可以将消息从inject.js发送到background.js,但是无法正常工作,我尝试了几种在线解决方案,而我使用的是唯一能够使用的解决方案。

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

问题是,我讨厌那样做,json响应可能真的很长,我已经在Injection.js中过滤了响应,因此只有有用的人才能被发送,但有时我还是不得不发送长度为591109个字符的响应副本! 因此,不得不发送两次如此长时间的响应有点丑陋,我希望它既高效又快速。

有人对此有想法吗?

1 个答案:

答案 0 :(得分:2)

您的injection.js在script DOM元素中运行,因此它只是一个无特权的网页脚本。要直接从网页脚本中使用chrome.runtime.sendMessage,您必须在externally_connectable中声明允许的URL模式,但是您不能不加选择地允许所有URL,因此尽管使用{{3 }}(并且很可能是随机事件名称),而不是message,它可以被页面脚本或其他扩展名拦截-我在这里所关心的并不是安全性,而是有可能破坏一些假定消息数据采用某种格式(例如字符串),与您使用的格式(例如对象)不兼容。

您还可以使用chrome.debugger API附加到标签页,并在后台脚本中拦截JSON响应,但这将在标签页上方显示有关正在调试的通知。

无论如何,除非您看到扩展程序使页面变慢(在devtools分析器中或通过手动测量代码花费的时间),否则不必担心。

FWIW,在Firefox中,您可以直接通过CustomEvent阅读响应。