Chrome 扩展：使我的扩展仅在单击弹出窗口时执行并在弹出窗口中显示结果

Question

正如它清楚地显示的那样，

我希望我的弹出窗口成为扩展程序启动的触发器。 我的扩展基本上可以完全在background.html中执行。 Background.html 需要来自网页的一些信息，因此使用消息传递将所需内容从 contentscript.js 传递到 background.html。在所有页面上运行这会占用大量资源，因此我希望此扩展仅在单击图标后启动，并在 popup.html 中显示信息，我可以直接从 中提取信息背景.html。

让我知道我是否不清楚。

Answer 1

检测弹出窗口何时打开非常容易，因为每次打开弹出窗口时都会执行其中的代码。因此，您所需要做的就是在弹出代码的开头向后台页面发出请求。

第二部分是按需注入内容脚本（据我所知，注入当前选项卡）。

所以整个扩展结构应该是这样的：

popup.html

//this will run each time popup opens
chrome.extension.sendRequest("start", function(data) {
    //display data received from background page through content script
});

background.html

chrome.extension.onRequest.addListener(function(request, sender, sendResponse) {
    if(request == "start") {
        chrome.tabs.getSelected(null, function(tab) {
            chrome.tabs.executeScript(tab.id, {file: "contentscript.js"}, function() {
                //content script is injected, send a request to it
                chrome.tabs.sendRequest(tab.id, "get_data", function(data){
                    //content script sent response back with data we need to display in popup
                    sendResponse(data);
                });
            });
        });
    }
}));

需要记住的是，弹出窗口在收到消息时可能已经关闭了数据，因此您可能需要添加一些错误处理。

第二个问题是避免将内容脚本两次注入同一页面。这可能具有挑战性，所以我建议如果您的内容脚本很小，那么只需将其注入所有页面（在清单中）。