更新特定选项卡弹出的内容脚本答案

【问题标题】：Content script to update specific tab popup更新特定选项卡弹出的内容脚本
【发布时间】：2015-10-13 23:38:41
【问题描述】：

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

contentscript.js:

var str = document.URL;
var n = str.lastIndexOf('/');
var result = str.substring(n + 1);
chrome.runtime.sendMessage({message: "result", url: result});

eventpage.js:

chrome.runtime.onMessage.addListener(
  function(request, sender, sendResponse) {
    if (request.message == "result") {
        chrome.browserAction.setBadgeText({tabId:sender.tab.id, "text" : "1"});      
      links = request.url;
        }

popup.js:

$(function () {
    var bg = chrome.extension.getBackgroundPage();
    $('#total').text(bg.links);
});

popup.html

<!DOCTYPE html>
<html>
    <head>
        <title>Plugin</title>
        <script type="text/javascript" src="jquery-1.11.3.js"></script>
        <script type="text/javascript" src="popup.js"></script>
    </head>
    <body>
        <div id='total'>Nothing</div>
    </body>
</html>

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

//我项目中的badge是counter，我写在这里只是为了得到一个想法

【问题讨论】：

1. {message: "result"} 应该是{message: "result", url: result} 2. 你在后台页面中只有一个全局links 变量，所以它当然只存储最后一个设置值。 3.内容脚本只在标签加载时执行一次，而不是在每个标签切换时执行
到 3。我知道它执行了一次，但我正在寻找一种方法如何使 popup.html 在每个选项卡上都不同

标签： javascript jquery google-chrome google-chrome-extension tabs

【解决方案1】：

如果您只需要获取选项卡 url，您可以在 popup.js 中使用 chrome.tabs.query 来完成，而无需内容脚本：

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

否则在 popup.js 中使用chrome.tabs.executeScript：

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

这两种方法都需要 manifest.json 中的 "activeTab" permission。

【讨论】：