javascript - jQuery $(document).off() 在 Chrome 扩展中不起作用

Question

我已经基于 https://thoughtbot.com/blog/how-to-make-a-chrome-extension 创建了一个 Chrome 扩展(完成文件看最后)

我做了两个更改:我使用最小化的 jQuery 3.1.1 而不是上面页面中给出的旧版本，并且我更改了 content.js:

chrome.runtime.onMessage.addListener(
    function(request, sender, sendResponse) {
        if( request.message === "clicked_browser_action" ) {
            $(document).off("touchmove mousewheel mousemove scroll");
        }
    }
);

当我在打开相应测试页面的情况下单击扩展按钮时，$(document).off() 命令不起作用。它不会给出错误，它只是什么都不做。

我检查过了。如果我在我想要影响的页面上的控制台中键入 $(document).off("touchmove mousewheel mousemove scroll");，它工作正常。如果在扩展程序中运行则不是。

我尝试检查扩展中的 document 是否正确，并且 document.domain 在扩展中的断点中检查时给出了正确的结果(以及在控制台中页面)。

我尝试检查 jQuery._data(jQuery(document)[0]).events["touchmove"](和“mousewheel”、“mousemove”、“scroll”)，它在控制台，但如果我断点扩展，我会收到错误消息(无法读取未定义的属性“touchmove”)。当我进一步检查时，jQuery._data( jQuery(document)[0]) 给出以下内容:

在控制台中:

Object
    events: Object
    handle: function (e)
    __proto__: Object

在断点处:

Object
    __proto__: Object

我已经尝试了一些其他的东西(例如，jQuery 是可访问和工作的，等等)。

Answer 1

您正在尝试执行 $(document).off()为了删除由页面脚本添加的 jQuery 事件处理程序(网页中已经存在的脚本；即不是您的内容脚本)。 jQuery 将哪些事件处理程序添加到正在使用的 jQuery 实例内部的数据结构中。您的内容脚本与页面脚本处于不同的上下文/范围内。因此，当您执行 $(document).off()在您的内容脚本的上下文中，该 jQuery 实例不知道页面脚本添加的任何偶数处理程序，也无法删除它们。

为您的$(document).off()要有效，它必须在页面脚本上下文中运行。在页面脚本上下文中执行代码的最常见方法是创建并插入 <script>元素到页面的 DOM。

您可以将代码更改为:

chrome.runtime.onMessage.addListener(
    function(request, sender, sendResponse) {
        if( request.message === "clicked_browser_action" ) {
            let newScript = document.createElement('script');
            newScript.innerHTML='$(document).off("touchmove mousewheel mousemove scroll");';
            document.head.appendChild(newScript);
        }
    }
);

添加的脚本在页面上下文中运行，因为它现在是 <script> DOM 中的元素。浏览器识别出 <script>元素被添加并在插入它的脚本不再处理时对其进行评估(执行包含的代码)。它对您添加到 DOM 的任何其他元素基本上做同样的事情。因为是页面的一部分，<script>里面的代码在页面脚本上下文/范围内运行。

虽然上面的方法有效，特别是对于这么短的代码，我更喜欢创建 <script> 的方法在页面上下文中执行代码的元素是使用我编写的名为 executeInPage() 的函数.您可以在 my answer to "Calling webpage JavaScript methods from browser extension" 中找到该功能.