Javascript 更新特定选项卡弹出窗口的内容脚本

让我们有一个虚构的扩展，它从url中获取“/”之后的所有内容，这是在内容脚本中完成的。还更新popup.html中的徽章和更改文本，每个选项卡的内容都不同（不同的选项卡，不同的url）

contentscript.js：

eventpage.js：

popup.js：

chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
    $('#total').text(tabs[0].url.replace(/^.+?\/([^\/]*)$/, '$1'));
});

chrome.tabs.executeScript({
    code: "document.querySelector('p.something').textContent"
}, function(results) {
    $('#something').text(results[0]);
});

popup.html

插件
没有什么

这仅适用于新加载的选项卡，而不是在它们之间单击时。例如，当我加载第一页“webpage.com/first”时，我的弹出窗口会显示“first”。当我加载第二页（在不同的选项卡上）“webpage.com/second”弹出窗口是“second”。之后，我点击第一页（在第一个标签上），我的弹出窗口是“第二个”，我的意思是“第一个”

---

//我的项目中的徽章是计数器，我在这里写它只是为了得到一个想法

如果你只需要获得标签url，你可以不用内容脚本，只需在popup.js中使用：

chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
    $('#total').text(tabs[0].url.replace(/^.+?\/([^\/]*)$/, '$1'));
});

chrome.tabs.executeScript({
    code: "document.querySelector('p.something').textContent"
}, function(results) {
    $('#something').text(results[0]);
});

否则，请在popup.js中使用：

chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
    $('#total').text(tabs[0].url.replace(/^.+?\/([^\/]*)$/, '$1'));
});

chrome.tabs.executeScript({
    code: "document.querySelector('p.something').textContent"
}, function(results) {
    $('#something').text(results[0]);
});

---

这两种方法都需要在manifest.json中使用<代码>{message:“result”}应该是

{message:“result”，url:result}

2。后台页面中只有一个全局

链接
变量，因此它当然只存储最后一个设置值。3.内容脚本仅在加载选项卡时执行一次，而不是在每个选项卡上切换到3。我知道它只执行过一次，但我正在寻找一种方法，使popup.html在每个选项卡上都有所不同