Question

Chrome扩展程序在新选项卡中打开，并在加载时获取打开的窗口和选项卡的信息，但我必须刷新它才能打开任何新的选项卡或窗口。

以下是清单文件中的代码：

 "background": {
    "page": "background.html",
    "persistent": true
    },
"content_security_policy": "script-src 'self' 'unsafe-eval' https://code.jquery.com; object-src 'self'",

"permissions": [
  "contextMenus",
  "notifications",
  "tabs",
  "clipboardWrite",
  "unlimitedStorage"
],
"content_scripts": [{
        "matches": ["*://*/*"],
        "js": ["jan13.js", "background.js"],
        "css": ["jan13.css"]
        }

background.html页面调用两个脚本“jan13.js”和“background.js”。

<!DOCTYPE html>
<html>
<head></head>
<body>
<script src="jquery.min.js"></script>
<script src="background.js"></script>
<script src="jan13.js"></script>
</body>
</html>

“background.js”文件只是在自己的标签中打开扩展程序，如下所示：

chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.create({'url': chrome.extension.getURL('popup.html'), 'selected': true});
});

然后“jan13.js”完成所有实际工作：

$(document).ready(function() {

 chrome.windows.getAll({populate:true},function(windows){

    for (i=0; i < windows.length; i++) {
        a = (i+1);

        $('<div/>', {
            id: 'win'+a,
        }).attr('class', 'box1').html("<h3>Window"+a+"</h3>").appendTo('.container');

        windows[i].tabs.forEach(function(tab){

            var favic = tab.favIconUrl;

            var link = $('<a>', {
                text:tab.title,
                href:tab.url,
                }); 
           link.attr("target", "_blank");
           $('#win'+a).append(link); 

            $(link).prepend($('<img>', {id:'favic', src: favic}));
        });
    };

    $('<div/>').attr('class', 'button').text("Toggle").appendTo('.box1');

    $('.button').click(function() {
        var b = $(this).parent().closest('div');
        $(b[0]).toggleClass("box1a");
    });       
  });
});

我已经尝试将此代码放在“background.js”和/或“background.html”中：

chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
    $.getScript("jan13.js");
});
chrome.tabs.onCreated.addListener(function(tab) {     
    $.getScript("jan13.js");
});

但是我收到以下错误：

拒绝执行内联脚本，因为它违反了以下内容安全策略指令：“script-src'self''unsafe-eval'https://code.jquery.com”。

我也经常收到此错误：

未捕获的ReferenceError：$未定义

但它并没有阻止扩展运行。

当我尝试将“background.js”和/或“jan13.js”放入清单时：

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

扩展程序根本没有打开。我点击工具栏图标，没有任何反应。这就是我把它放在“background.html”中的原因。这对我来说似乎很复杂，但这是我使它发挥作用的唯一方式。

原来的问题是如何添加eventListener以便扩展程序自动获取任何新的标签页或窗口？如果我刷新页面，它就可以工作。

编辑：将清单文件更改为：

{ "manifest_version": 2, "name": "Session Sync", "version": "0.1.0", "description": "Sync browser sessions", "author": "Mischa Bertrand-Chetty", "browser_action": { "default_title": "Starting Session Sync..." }, "background": { "scripts": ["jquery.min.js","background.js", "jan13.js"], "persistent": true }, "content_security_policy": "script-src 'self' 'unsafe-eval' https://code.jquery.com; object-src 'self'", "permissions": [ "contextMenus", "notifications", "tabs", "clipboardWrite", "unlimitedStorage" ], "content_scripts": [{ "matches": ["*://*/*"], "css": ["jan13.css"] } ], "incognito": "spanning" }

好消息是我不再得到Reference错误了。然而，最初的问题是，它不会监听任何新标签或窗口仍然存在。我仍然需要刷新页面才能获得新的选项卡和窗口。

Answer 1

将注入DOM元素的代码移动到命名函数中，以便可以从选项卡onCreated和onUpdated处理程序调用它，而不是重新加载脚本。您可能也不想重新加载整个脚本并且每次都完全重新扫描窗口：您可能希望为每个更新/创建的选项卡执行一次。然后你不会需要CSP规则，因为你不会重新加载脚本。

在background.js中，放置你的函数和调用它的处理程序：

function scanTabs() {
  chrome.windows.getAll({populate: true}, function(windows) {
..etc..
}
$(document).ready(scanTabs);
chrome.tabs.onUpdated.addListener(scanTabs);
chrome.tabs.onCreated.addListener(scanTabs);

您根本不需要jan13.js。

希望这足以让你走上正轨。

向Chrome扩展程序添加事件监听器以获取新标签和窗口

1 个答案: