将变量从内容脚本传递到弹出窗口

Question

我正在弄乱（尝试学习）如何制作 chrome 扩展。现在我只是做一个超级简单的，它计算页面上某个单词的实例。我有这部分工作。

我想做的是将此信息发送给 pop，这样我就可以用它来做其他事情。

这是我目前的情况：

manifest.json

{
    "manifest_version": 2,
    "name": "WeedKiller",
    "description": "Totally serious 0% legit extension",
    "version": "0.1",

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

    "permissions":[
        "tabs",
        "storage"
    ],
    "browser_action": {
    "default_icon": "icon.png",
    "default_title": "WeedKiller",
    "default_popup": "popup.html"
    },
    "content_scripts": [
        {
            "matches": [
                "http://*/*",
                "https://*/*"
            ],
            "js": [
                "content.js"
            ],
            "run_at": "document_end"
        }
    ]
}

content.js

var elements = document.getElementsByTagName('*');
var count = 0;

function tokeCounter(){
    for (var i = 0; i < elements.length; i++) {
        var element = elements[i];

        for (var j = 0; j < element.childNodes.length; j++) {
            var node = element.childNodes[j];

            if (node.nodeType === 3) {
                var text = node.nodeValue;
                if(text == '420'){
                    count++; 
                }

                var replacedText = text.replace(/420/, '+1');

                if (replacedText !== text) {
                    element.replaceChild(document.createTextNode(replacedText), node);
                }
            }
        }    
    }
}

tokeCounter();

所以我想要发生的是将 count 变量发送到弹出窗口，以便我可以在那里使用它。

我环顾四周，发现我需要用 chrome.runtime.sendMessage 做点什么。

我有，所以我将这一行添加到 content.js 的末尾：

 chrome.runtime.sendMessage(count);

然后在 background.js:

chrome.runtime.onMessage.addListener(
    function(response, sender, sendResponse){      
       temp = response;
    }
);

我有点卡在这里，因为我不确定如何将此信息发送到弹出窗口并使用它。

Answer 1

正如您正确注意到的那样，当弹出窗口关闭时，您无法将数据直接发送到弹出窗口。所以，你正在向后台页面发送数据。

然后，当您打开弹出窗口时，您需要那里的数据。那么，有哪些选择呢？

请注意：此回答会先给出不好的建议，然后再改进。由于 OP 正在学习，因此展示思维过程和路障很重要。

想到的第一个解决方案如下：询问后台页面，再次使用Messaging。 预警：这将不起作用或效果不佳

首先，确定可以有不同类型的消息。修改您当前的消息代码：

// content.js
chrome.runtime.sendMessage({type: "setCount", count: count});

// background.js
chrome.runtime.onMessage.addListener(
    function(message, sender, sendResponse) {
        switch(message.type) {
            case "setCount":
                temp = message.count;
                break;
            default:
                console.error("Unrecognised message: ", message);
        }
    }
);

现在，理论上您可以在弹出窗口中询问：

// popup.js
chrome.runtime.sendMessage({type: "getCount"}, function(count) {
    if(typeof count == "undefined") {
        // That's kind of bad
    } else {
        // Use count
    }
});

// background.js
chrome.runtime.onMessage.addListener(
    function(message, sender, sendResponse) {
        switch(message.type) {
            case "setCount":
                temp = message.count;
                break;
            case "getCount":
                sendResponse(temp);
                break;
            default:
                console.error("Unrecognised message: ", message);
        }
    }
);

现在，这有什么问题？

temp的生命周期是多少？您已明确声明 "persistent": false in your manifest。结果后台页面随时可以卸载，擦除状态如temp.

您可以使用 "persistent": true 修复它，但请继续阅读。

您希望看到哪个选项卡的计数？ temp 将写入最后的数据，这很可能不是当前选项卡。

您可以通过保持标签来修复它 （看看我在那里做了什么？） 在哪个标签上发送了数据，例如通过使用：

// background.js
/* ... */
  case "setCount":
      temp[sender.tab.id] = message.count;
      break;
  case "getCount":
      sendResponse(temp[message.id]);
      break;

// popup.js
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
    // tabs is a single-element array after this filtering
    chrome.runtime.sendMessage({type: "getCount", id: tabs[0].id}, function(count) {
        /* ... */
    });
});

虽然工作量很大，不是吗？ 修复 1.

下一步要考虑的改进：我们是否需要后台页面为我们存储结果？毕竟，chrome.storage is a thing；它是所有扩展脚本（包括内容脚本）都可以访问的持久存储。

这会从图片中删除背景（和消息）：

// content.js
chrome.storage.local.set({count: count});

// popup.js
chrome.storage.local.get("count", function(data) {
    if(typeof data.count == "undefined") {
        // That's kind of bad
    } else {
        // Use data.count
    }
});

这看起来更简洁，并且完全绕过了上面的问题 1，但问题 2 变得更加棘手。类似 count[id] 的东西在存储中，你需要读出 count ，修改它并写回。它会变得缓慢而混乱。

此外，内容脚本并不真正知道它们的标签 ID；您需要向背景发送消息才能了解它。啊。不漂亮。 同样，对于非特定于选项卡的数据，这是一个很好的解决方案。

那么下一个问题要问：为什么我们甚至需要一个中心位置来存储（特定于选项卡的）结果？内容脚本的生命周期就是页面的生命周期。您可以随时直接询问内容脚本。包括来自弹出窗口。

等等等等，你不是在最上面说不能向弹出窗口发送数据吗？嗯，是的，有点：当你不知道它是否在听的时候。但是如果弹出窗口询问，那么它必须准备好得到响应，不是吗？

所以，让我们反转内容脚本逻辑。不是立即发送数据，而是等待并监听请求：

chrome.runtime.onMessage.addListener(
    function(message, sender, sendResponse) {
        switch(message.type) {
            case "getCount":
                sendResponse(count);
                break;
            default:
                console.error("Unrecognised message: ", message);
        }
    }
);

然后，在弹出窗口中，我们需要查询包含内容脚本的选项卡。这是一个不同的消息功能，我们必须指定选项卡 ID。

    chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
        chrome.tabs.sendMessage(tabs[0].id, {type: "getCount"}, function(count) {
            /* ... */
        });
    });

现在更清晰了。 问题 2 已解决：我们查询要收听的选项卡。问题1好像解决了：一个脚本只要统计一下我们需要的就可以回答

请注意，作为最后一个复杂因素，内容脚本并不总是在您期望的时候被注入：它们只会在导航扩展被（重新）加载。 an answer 对此进行了详细解释。如果您愿意，可以解决它，但现在只是一个代码路径：

function(count) {
    if(typeof count == "undefined") {
        // That's kind of bad
        if(chrome.runtime.lastError) {
            // We couldn't talk to the content script, probably it's not there
        }
    } else {
        // Use count
    }
}

将变量从内容脚本传递到弹出窗口

Pass a variable from content script to popup

javascript

google-chrome

google-chrome-extension