javascript - Popup.html 在所有选项卡中都是相同的(Chrome 扩展)

Question

我的扩展程序会检查网站上是否有损坏的图像。如果我一次打开一个 URL，则一切正常，但如果我从一个站点打开多个 URL，popup.html 中的摘要始终与事件选项卡相同(不会针对每个站点进行更新)。

我不知道如何引用分析的实际 URL 并避免“事件选项卡”。有什么想法吗？

Manifest.json

{
"name": "Test",
"permissions": ["activeTab", "declarativeContent", "storage","tabs"],
"version": "1.0.0",
"description": "Test",

"background": {
    "scripts": ["background.js"],
    "persistent": false
  },

"content_scripts": [
  {
    "matches": ["http://*/*", "https://*/*", "https://www.google.com/_/chrome/newtab*"],
    "exclude_globs": ["*#*"],
    "js": ["jquery-3.4.1.min.js", "content.js"]
  }
],

"web_accessible_resources": ["popup.html"],

 "browser_action": {
  "default_icon": {
    "16": "images/ico.png",
    "32": "images/ico.png",
    "48": "images/ico.png",
    "128": "images/ico.png"
  }
},
"manifest_version": 2

}

Content.js

  chrome.runtime.onMessage.addListener((msg, sender, response) => {
  if (msg.subject === 'DOMInfo') {      
    var domInfo = {
      images: number_images   
    };
    response(domInfo);
  }
});

Popup.js

window.addEventListener('DOMContentLoaded', () => {
  chrome.tabs.query({
    active: true,
    currentWindow: true
  }, tabs => {
    chrome.tabs.sendMessage(
        tabs[0].id,
        {subject: 'DOMInfo'},
        setDOMInfo);
  });
});

我很确定是 tabs[0].id 导致了问题，但我不确定如何引用运行 content.js 脚本的当前 URL 并进行确保 popup.html 从此 URL 获取分析。有什么想法吗？

在background.js中，我引用发件人选项卡没有问题:

chrome.runtime.onMessage.addListener(function(msg, sender, sendResponse) 
{   
    chrome.tabs.query({active:true, windowType:"normal", currentWindow: true},function(d){

        var tabId =  sender.tab.id;     
        ....

Answer 1

假设 popup.html 通过您的内容脚本加载到网页内的 iframe 中，您需要 chrome.tabs.getCurrent返回运行此代码的选项卡，因此每个 iframe 都会找到自己的选项卡:

chrome.tabs.getCurrent(tab => {
  chrome.tabs.sendMessage(tab.id, {subject: 'DOMInfo'}, callback);
});

附注使用 sender.tab.id 时，您不需要 chrome.tabs.query - 您已经拥有 ID。