Popup.html 在所有选项卡中都相同（Chrome 扩展名）

Question

我的扩展程序检查网站上是否有损坏的图像。如果我一次打开一个 URL，一切正常，但如果我从一个站点打开多个 URL，popup.html 中的摘要始终与活动选项卡相同（它不会更新每个站点）。

我不知道如何参考分析的实际URL并避免"active tab"。有什么想法吗？

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 导致了问题，但我不确定如何引用当前的 URL 即运行和 content.js 脚本并确保 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 returns 标签，其中此代码是运行 因此每个 iframe 都会找到自己的选项卡：

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

P.S。使用 sender.tab.id 时，您不需要 chrome.tabs.query - 您已经有了 ID。

Popup.html 在所有选项卡中都相同（Chrome 扩展名）

Popup.html is the same in all tabs (Chrome extension)

javascript

google-chrome

google-chrome-extension

google-developer-tools