Question

您好我正在构建Chrome扩展程序。这是我的背景脚本：

var toggle = true;
var config = {allPages: []};

chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
    if (changeInfo.status == 'complete') {
        chrome.tabs.executeScript(null, {
             code: 'var config = ' + JSON.stringify(config)
        }, function() {
            chrome.tabs.executeScript(null, { file: "jquery.js" }, function() {
                chrome.tabs.executeScript(null, { file: "content.js" });
            });
        });
    }
 });

chrome.browserAction.onClicked.addListener(function(tab) {
    chrome.tabs.executeScript(null, {
        code: 'var config = ' + JSON.stringify(config)
    }, function() {
        chrome.tabs.executeScript(null, { file: "jquery.js" }, function() {
            chrome.tabs.executeScript(null, { file: "content.js" });
        });
    });
    toggle = !toggle;
    if(toggle){
        chrome.browserAction.setIcon({path: "on.png"});
        console.log('active ');
    }
    else{
        chrome.browserAction.setIcon({path: "off.png"});
        console.log('not active ');
        }

    });
chrome.runtime.onConnect.addListener(function(port) {
    port.postMessage({toggle: toggle}); 
});

后台脚本在加载时将内容脚本注入页面（因为扩展必须从一开始就是活动的），我还可以通过单击扩展图标来打开/关闭扩展。

从bakground脚本我发送一条消息到包含true或false的内容脚本，并且函数“do”完成它的工作。如果是真的 - 通过按shift并点击我将url推送到数组。这是我的内容脚本（简化）：

$(document).ready(function(){

    function do(answer) {
        if (answer) {
            console.log('active');
            var url = document.location.href;
            var page = {
                url: url
            };
            $('body').keydown(function(e) {
                if (e.shiftKey) {
                    document.body.onclick = function() {
                        config.allPages.push(page);
                        chrome.storage.local.set({'config': config}, function ()                   {
                            console.log('savedPage: ', config);
                        });
                    };
                }
            });
    } else {
         console.log('not active');
         $('body').unbind('keydown');              

    }
}

var port = chrome.runtime.connect({name: "knockknock"});
port.onMessage.addListener(function(msg) {
    do(msg.toggle);
    });
});

如果我再次点击扩展图标，它将处于非活动状态，并且会向我的功能“do”发送false。所以当我按下shift并点击时它必须什么都不做。但是在我按下shift并单击1次后，即使我停用了我的扩展名，“do”功能仍然可以正常工作。

据我所知，原因就是关闭，对吧？但是当我向我的“执行”功能发送错误时，我真的不知道如何摆脱它们并取消绑定我的事件。我试过像

这样的东西

$('body').unbind('keydown');

从你的代码中可以看到

。我也试过

document.body.onclick = null;
$('body').unbind();

但那些没有帮助。也许这个问题很容易，但我真的需要重新审视我的代码。或者问题可能在我的背景中？

非常感谢您的帮助。

Answer 1

解决方案：

onclick属性与您的处理程序无关;它们由jQuery内部处理。

$('body').keydown(f) is equivalent to $('body').on('keydown', f)但不是$('body').bind('keydown', f)。

.unbind()仅适用于.bind()。对于您的情况，您需要使用.off()：

$('body').off('keydown');

那就是说，它不会影响你附加到document.body.onclick的听众 - 你可能也希望清除它。

说明：

通常，off()将删除所有侦听器，如果脚本变得更复杂，这可能不是您想要的。为了能够关闭特定的侦听器，它应该有一个引用，例如它应该命名为：

function onKeydown(e) { /*...*/ }
$('body').keydown(onKeydown);
// ...
$('body').off('keydown', onKeydown); // Easier to understand what's happening

如果端口连接中断（例如，重新启动扩展程序或崩溃），也可以关闭扩展程序。添加一个监听器port.onDisconnect来实现此目的。

提前听 Shift 只是为了设置另一个听众可能不是一个好主意。如果你想知道的是当你点击鼠标时是否按下 Shift ，你可以在点击事件中定义 - e.shiftKey。

当然，除非你想让第二个处理程序“坚持”＃34;按 Shift 一次后。

如何取消绑定chrome扩展的内容脚本中的事件？

1 个答案:

解决方案：

说明：