Javascript 将事件侦听器添加到新选项卡和窗口的Chrome扩展中

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"]
        }

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

然后“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");
    });       
  });
});

但我得到了以下错误：

拒绝执行内联脚本，因为它违反了以下内容安全策略指令：“script src‘self’‘safe eval’”。启用内联执行需要'unsafe inline'关键字、哈希（'sha256-VCQyoq7QBv4UrBn0VODLZE8rJZdjIt7Kb3PziCSqIXM='）或nonce（'nonce-…'）

我也经常遇到这样的错误：

未捕获引用错误：$未定义

但它不会阻止扩展的运行

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

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

"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"
}

---

好消息是我不再得到引用错误。然而，最初的问题，即它不监听任何新的选项卡或窗口仍然存在。我仍然需要刷新页面以获得新的选项卡和窗口。

移动将DOM元素注入命名函数的代码，以便在创建和更新处理程序时从选项卡调用它，而不是重新加载脚本。您可能也不希望每次都重新加载整个脚本并完全重新扫描窗口：您可能希望为每个更新/创建的选项卡重新扫描一次。这样，您就不需要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

---

希望这足以让您走上正确的轨道。

移动将DOM元素注入命名函数的代码，这样您就可以在创建和更新处理程序时从选项卡调用它，而不是重新加载脚本。您可能也不希望每次都重新加载整个脚本并完全重新扫描窗口：您可能希望为每个更新/创建的选项卡重新扫描一次。这样，您就不需要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

---

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

下载jquery文件存储本地文件夹，并在扩展名中提供下载文件的引用。我这样做了…这就是为什么我在“background.html”和主html文件中引用“jquery.min.js”。您使用background.html而不仅仅是

“background”有什么原因吗：{“脚本”：[“jquery.min.js”、“background.js”、“jan13.js”]、“persistent”：true}

？您使用background.js和jan13.js作为背景脚本和内容脚本。这几乎总是一个坏主意™. 在这种情况下当然是这样，因为A）两个脚本都使用内容脚本无法使用的API，B）您尝试在jan13.js中使用jQuery，不要在

content\u脚本

条目中加载jQuery。只是意识到它以前不起作用，因为我没有添加“jQuery.min.js”“也可以添加到后台脚本。我已经按照你描述的方式做了。但我仍然需要在需要更新时刷新它。下载jquery文件存储本地文件夹，并在扩展名中提供下载文件的引用。我这样做了…这就是为什么我在“background.html”和主html文件中引用“jquery.min.js”。您使用background.html而不仅仅是

“background”有什么原因吗{“脚本”：[“jquery.min.js”、“background.js”、“jan13.js”]、“persistent”：true}

？您使用background.js和jan13.js作为背景脚本和内容脚本。这几乎总是一个坏主意™. 在这种情况下当然是这样，因为A）两个脚本都使用内容脚本无法使用的API，B）您尝试在jan13.js中使用jQuery，不要在

content\u脚本

条目中加载jQuery。只是意识到它以前不起作用，因为我没有添加“jQuery.min.js”“也可以添加到后台脚本。我已经按照你描述的方式做了。但我仍然需要在需要更新时刷新它，所以我会将“jan13.js”中“$document.ready（function）”之后的所有内容放入“function myFunction{….}；”？如何从“background.js”调用该函数？我尝试的是给我“未定义的函数”，只加载一个空白选项卡。谢谢@Tim Dierks，这帮了我很大的忙。现在我要做的就是不要把每件事重复4次。我想我必须替换我的forEach函数，因为显然没有好的方法来破坏它。我不认为在for循环中使用“if”语句是好的做法或有效的。目前，它在整个函数中运行了4次，我只是设法不让它重复创建一个新的“win+a div”，但它仍然在相同的选项卡中运行。因此，我会将“jan13.js”中“$document.ready（function）”之后的所有内容放在“function myFunction{……}；”中？如何从“background.js”调用该函数？我尝试的是给我“未定义的函数”，只加载一个空白选项卡。谢谢@Tim Dierks，这帮了我很大的忙。现在我要做的就是不要把每件事重复4次。我想我必须替换我的forEach函数，因为显然没有好的方法来破坏它。我不认为在for循环中使用“if”语句是好的做法或有效的。目前，它在整个函数中运行了4次，而我只管理了一次

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