chrome 扩展程序在新选项卡中打开，并在加载时获取打开的窗口和选项卡的信息，但我必须刷新它才能打开任何新选项卡或窗口。
这是 list 文件中的代码:
"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 ”。启用内联执行需要“unsafe-inline”关键字、哈希值(“sha256-VCQyoq7QBv4UrBn0VODLZE8rJZdjIt7Kb3PziCSqIXM=”)或随机数(“nonce-...”)。
我也经常收到此错误:
Uncaught ReferenceError :$未定义
但它不会阻止扩展程序运行。
当我尝试将“background.js”和/或“jan13.js”放入 list 中时，如下所示:
"background": {
"scripts": ["background.js", "jan13.js"],
"persistent": true
},
扩展程序根本打不开。我单击工具栏图标，但没有任何反应。这就是为什么我把它放在“background.html”中。这对我来说似乎很复杂，但这是我让它发挥作用的唯一方法。
最初的问题是如何添加 eventListener 以便扩展程序自动打开任何新选项卡或窗口？如果刷新页面就可以了。
编辑:将 list 文件更改为:
{
"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 元素注入(inject)到命名函数中的代码，以便您可以从选项卡 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。
希望这足以让您走上正轨。
关于javascript - 为新标签页和窗口的 Chrome 扩展程序添加事件监听器，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41907434/