chrome.tabs.sendMessage 在 chrome.webRequest.onHeadersReceived 之后不工作

Question

我正在尝试创建一个新的 chrome 扩展以将 responseHeaders 中收到的数据传输到当前选项卡，以便在网页上显示它们。

为此，我使用 chrome.webRequest.onHeadersReceived 侦听器来检索和解析数据。之后，我想通过 chrome.tabs.sendMessage 传输此信息，但它不起作用。

manifest.json

{
    "manifest_version": 2,
    [...]
    "background": { 
        "scripts": ["js/background.js"],
        "persistent": true
    },
    "content_scripts": [
        {
          "matches": ["<all_urls>"],
          "css": ["css/style.css"],
          "js": ["js/jquery.js", "js/content.js"]
        }
      ],
    "permissions": [
        "background", 
        "webRequest",
        "tabs",
        "activeTab",
        "<all_urls>"
    ]
}

background.js

chrome.tabs.query({active: true, currentWindow: true}, function(tabs){
    chrome.webRequest.onHeadersReceived.addListener(function(response){
        response.responseHeaders.forEach(element => {
            chrome.tabs.sendMessage(tabs[0].id, element);  
        });
     },{
       urls: [
         "<all_urls>"
       ]
     },["responseHeaders"]);
});

content.js

chrome.runtime.onMessage.addListener (function (request, sender, sendResponse) {
    alert("Message received");
});

通过执行此代码，永远不会触发警报。

感谢您的帮助:)

Answer 1

content.js文件中的提示消息，收到消息时会报警。要在后台文件中发送消息 chrome tabs.query 应该执行 onHeadersReceived 事件。但似乎 tabs.query 和 webRequest.onHeadersReceived 的位置发生了变化。命令是 background.js 从 url 获取请求并访问选项卡查询以发送消息。

background.js

chrome.webRequest.onHeadersReceived.addListener(function(response){
        chrome.tabs.query({active: true, currentWindow: true}, function(tabs){
            response.responseHeaders.forEach(element => {
                chrome.tabs.sendMessage(tabs[0].id, element);  
            });
        });
     },{
       urls: [
         "<all_urls>"
       ]
     },["responseHeaders"]);

chrome.tabs.sendMessage 在 chrome.webRequest.onHeadersReceived 之后不工作

chrome.tabs.sendMessage after chrome.webRequest.onHeadersReceived not working

javascript

google-chrome

google-chrome-extension