javascript - Chrome 扩展,将消息从注入(inject)脚本发送到后台的最佳方式

标签 javascript google-chrome-extension messaging

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

请记住,我不习惯 js 我可能做错了,所以,在我的 list 中我有:

"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 注入(inject)到网页中,现在它还对从 injected.js 到 background.js 的消息进行中继,我以这种方式注入(inject) 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(

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

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

问题是,我讨厌必须那样做,json 响应可能很长,我已经在 injected.js 中过滤响应,以便只发送有用的响应,但有时我仍然必须发送长度为 591109 个字符的回复副本! 因此,必须发送两次那么长的响应有点难看,我希望它高效且快速。

有人对此有想法吗?

最佳答案

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

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

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

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

关于javascript - Chrome 扩展,将消息从注入(inject)脚本发送到后台的最佳方式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53289557/

相关文章:

jquery - "Uncaught TypeError: Cannot set property ' left ' of undefined"使用内容脚本 Chrome 扩展中的 jQuery

javascript - 在 Chrome 扩展程序中创建自定义事件的最惯用方法

java - JMS 消息传递性能 : Lots of Topics/Queues vs. 广泛过滤(消息选择器)

c# - 如何在 c# 中跨本地网络进行 UDP 多播?

jquery - Chrome 扩展程序 XHR 不起作用

rabbitmq - RabbitMQ 扇出交换问题

javascript - Jquery:迭代表。问题= "Cannot read property ' 0' of undefined"

javascript - 为什么我没有定义参数时会出现无限循环?

javascript - 验证动态添加的数组输入 - jQuery Validate

javascript - 如果该事件附加到不存在的元素,是否可以触发该事件