如何在Chrome扩展中启用和禁用事件侦听器？
如何在Chrome扩展中启用和禁用事件侦听器？
提问于 2021-02-27 00:23:42
My background.js检测到选项卡焦点的更改。下面是它的代码：
chrome.storage.sync.get("tab_focus_change",function(val){
if(val.tab_focus_change===false)return;
var activeTabId, lastUrl;
function getTabInfo(tabId) {
chrome.tabs.get(tabId, function(tab) {
if(lastUrl != tab.url)
lastUrl=tab.url;
log('The focused tab changed to: '+tab.url+'');
});
}
chrome.tabs.onActivated.addListener(function(activeInfo) {
getTabInfo(activeTabId = activeInfo.tabId);
});
chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
if(activeTabId == tabId) {
getTabInfo(tabId);
}
});
});如您所见，它首先检查
允许检测选项卡焦点的变化。仅在它允许的情况下(该值应为
或者
)，那么它将检测到。
我也有一个选项页面，允许您更改
是真还是假。选项页面工作得很好(我已经测试过了)。问题是，尽管它已经更新了值，但它继续跟踪选项卡的更改或不跟踪选项卡的更改-无论是更新之前的哪一个。
我注意到，尽管值发生了变化，但如果它跟踪或不跟踪，它就不会更新，因为
我正在使用事件处理程序
..。我只设置了一次，它就会一直工作(当然，直到扩展被刷新/删除)！因此，将其设置为false不会取消处理程序的设置，将其设置为true也不会启动处理程序。
我想知道我该如何(取消)设置处理程序，而它们应该被(取消)设置。
下面是我的扩展名中文件的目录列表：
manifest.json // Extension manifest
popup.html // Popup page
options.html // Options page
options.js // Script for options page
background.js // background script
content.js // content script
content.css // content styles
html2canvas.min.js // Just an external library, shouldn't matter too much我可以将代码添加到我的任何HTML或JS文件中(只要你说要放什么代码)。
那么，如果事件侦听器正在跟踪更改，我该如何更新呢？
另外，如果您需要更多详细信息，请在下面发表评论，我将尝试添加它们。
回答 1
Stack Overflow用户
回答已采纳
发布于 2021-02-27 14:16:47
使用a) removeListener方法，b) chrome.storage.onChanged事件，以及c)在addListener作用域或全局范围内声明的命名函数：
const KEY = 'tab_focus_change';
chrome.storage.sync.get(KEY, data => {
let activeTabId, lastUrl;
toggleListeners(data[KEY]);
chrome.storage.onChanged.addListener(changes => {
if (changes[KEY]) {
toggleListeners(changes[KEY].newValue);
}
});
function toggleListeners(enable = true) {
const method = enable ? 'addListener' : 'removeListener';
chrome.tabs.onActivated[method](onActivated);
chrome.tabs.onUpdated[method](onUpdated);
}
function onActivated(activeInfo) {
getTabInfo(activeTabId = activeInfo.tabId);
}
function onUpdated(tabId, changeInfo, tab) {
if (activeTabId == tabId) {
getTabInfo(tabId);
}
}
function getTabInfo(tabId) {
// console.log(tabId);
}
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/66389394
复制相关文章
相似问题
腾讯云开发者
