【问题标题】:Send message to content script after page load页面加载后向内容脚本发送消息
【发布时间】:2018-12-25 14:51:06
【问题描述】:

我正在尝试遍历background.js 中的 URL 数组。对于每个 URL,我希望它浏览当前选项卡,然后向 content_script.js 发送一条消息,告诉它执行一个操作。

问题在于它是立即发送,而不是在页面加载时发送(实际上它甚至在更新 URL 之前发送)

background.js:

  chrome.tabs.update(null, {
    url: 'https://www.example.com/' + path
  }, function(tab) {
    chrome.tabs.sendMessage(tab.id, {message: 'update_user'});
  });

content_script.js

chrome.runtime.onMessage.addListener(
  function(request, sender, sendResponse) {
    if (request.message === 'update_user') {
      console.log('loaded');
    }
  }
);

【问题讨论】:

  • 问题可能是导航到新 URL 是异步的。例如,如果您运行window.location.href = ...; console.log("hello");,则会打印 hello,然后页面会发生变化。您可以在发送消息之前通过记录tab.status 来检查发生的情况。它将是“加载”或“完成”。你正在“加载”吗?
  • 我目前无法检查,但我确定答案是肯定的。我可以通过不尝试来判断,因为如果我之前执行过 console.log('anything')它,我可以在窗口重定向之前 看到打印它的瞬间。然后,在清除控制台的重定向之后,这个词就消失了,证明它甚至在重定向之前就记录了。
  • 您可以在 devtools 中检查“保留日志”,以便重定向不会清除它。它甚至会在导航发生时记录一行。

标签: javascript google-chrome google-chrome-extension google-chrome-app


【解决方案1】:

如果异步页面加载是您的问题,这样的事情可能会有所帮助:

chrome.tabs.update(null, {
        url: url
    }, function (tab) {
        chrome.tabs.onUpdated.addListener(function listener (tabId, info) {
            if (info.status === 'complete' && tabId === tab.id) {
                chrome.tabs.onUpdated.removeListener(listener);
                chrome.tabs.sendMessage(tab.id, {message: 'update_user'});
            }
        });
    });
});

这会为每个错误的 URL 添加一个单独的侦听器到 onUpdated。每个侦听器仅适用于显式打开的单个选项卡,因此不会发生“意外”。

一旦标签被加载,监听器就会被移除并发送消息。

【讨论】:

  • 有趣...使用这种方法是否有可能导致内容脚本“意外触发”?我问这个是因为我正在执行的操作是一个非常危险的操作(它正在禁止用户),并且因为它会在每次页面加载时立即触发,我想确保如果我访问 GOOD 配置文件它不会自动启动运行代码以禁止某人。它唯一可以执行的时间是我在后台显式循环它
  • 我目前处理这个的方式非常贫民窟(因为我无法让消息传递方法工作)。我只需重定向到带有?key={{uuid}} 查询字符串的 URL,然后在内容脚本中确保查询字符串变量匹配,然后再执行危险操作。但是,我更喜欢它是通过消息传递明确的,因此不会意外添加查询字符串并禁止您不想要的用户
  • 嗯。我明白你的意思了。在此流程中,您何时知道配置文件是否“好”?我想你有一些解析逻辑来确定是否有必要禁止。它去哪儿了?
  • 基本上初始循环确定(它来自扩展弹出窗口中的输入框,并通过消息发送到后台)。用户粘贴的 URL 数组就是我循环的内容。我的示例中没有包含循环代码,我只是将其简化为单个 chrome.tabs.update 调用,但您可以将其简单地想象为为每个 URL 调用它,中间延迟 4 秒(使用一些 ES6 等待超时)(循环 - > 禁止 -> 等待 4 秒 -> 循环...)
  • 好的,你在哪里检查页面的好坏?在content_script?
猜你喜欢
  • 2013-07-27
  • 1970-01-01
  • 2020-10-12
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2018-04-29
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多