jQuery $ {document）.off（）在Chrome扩展程序中不起作用 [英] jQuery $(document).off() not working in Chrome extension

问题描述

我已经基于 https：//创建了一个Chrome扩展程序Thoughtbot.com/blog/how-to-make-a-chrome-extension （在最后看完文件）

I've created a Chrome Extension based on https://thoughtbot.com/blog/how-to-make-a-chrome-extension (look at the end for the completed files)

两项更改：我使用最小化的jQuery 3.1.1代替了上一页中给出的旧版本，并且更改了content.js：

I've made two changes: I used jQuery 3.1.1 minimized instead of the older one given in the page above, and I changed content.js:

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

$（document）.off（）命令不起作用。它没有给出错误，只是没有执行任何操作。

The $(document).off() command is not working when I click the extension's button with an appropriate test page opened. It doesn't give an error, it just doesn't do anything.

我已经检查了。如果我在要影响的页面的控制台中输入 $（document）.off（ touchmove mousewheel mousemove scroll）; 可以正常工作。

I've checked. If I type $(document).off("touchmove mousewheel mousemove scroll"); into the console on the page I want to affect, it works fine. If run in the extension it isn't.

我尝试检查文档在扩展中是否正确，并且在扩展名（和页面上的控制台）中的断点处检查时， document.domain 给出正确的结果。

I tried checking that document was correct in the extension, and document.domain gives the correct result when checked in a breakpoint in the extension (and in the console on the page).

我尝试检查 jQuery._data（jQuery（document）[0]）。events [ touchmove] （和 mousewheel， mousemove， scroll ），并且可以在控制台中使用，但是如果我断点扩展名，则会收到错误消息（无法读取未定义的属性'touchmove'）。当我进一步检查时， jQuery._data（jQuery（document）[0]）给出以下内容：

I tried checking jQuery._data( jQuery(document)[0]).events["touchmove"] (and "mousewheel", "mousemove", "scroll") and it works in the console, but I get an error (Cannot read property 'touchmove' of undefined) if I breakpoint the extension. When I checked further, jQuery._data( jQuery(document)[0]) gives the following:

In控制台：

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

在断点处：

Object
    __proto__: Object

我尝试了一些其他事情（例如jQuery可以访问并且可以正常工作，等等）。

I've tried a few other things (for example, that jQuery is accessible and working, and so on).

推荐答案

您正在尝试执行 $（document）.off（）以便删除页面脚本（网页中已经存在的脚本；即您的内容脚本）添加的jQuery事件处理程序。 jQuery存储哪些事件处理程序已添加到正在使用的jQuery实例内部的数据结构中。您的内容脚本与页面脚本的上下文/范围不同。因此，当您在内容脚本的上下文中执行 $（document）.off（）时，该jQuery实例不知道任何已被偶数处理的事件。

You're attempting to execute $(document).off() in order to remove jQuery event handlers that were added by page scripts (scripts that already exist in the webpage; i.e. not your content script). jQuery stores which event handlers have been added in data structures internal to the jQuery instance being used. Your content script is in a different context/scope from that of page scripts. Thus, when you execute $(document).off() in the context of your content script, that jQuery instance isn't aware of any of the even handlers which have been added by the page scripts and can't remove them.

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

For your $(document).off() to be effective, it must be run in the page script context. The most common way to have code execute in the page script context is to create and insert a <script> element to the page's 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> 元素。浏览器识别出添加了< script> 元素，并且一旦不再处理插入的脚本，便对其进行评估（执行所包含的代码）。对于添加到DOM中的任何其他元素，它的作用基本上相同。因为它是页面的一部分，所以< script> 中的代码将在页面脚本上下文/范围内运行。

The added script gets run in the page context because it's now a <script> element in the DOM. The browser recognizes that a <script> element was added and evaluates it (executes the code contained) as soon as the script which inserted it is no longer processing. It does basically the same thing for any other element you add to the DOM. Because it is part of the page, the code inside the <script> gets run in the page script context/scope.

虽然上述工作有效，尤其是对于这样的短代码，但我创建< script> 元素以在页面上下文中执行代码的首选方法是使用一个函数我写了 executeInPage（）。您可以在我对通过浏览器扩展程序调用网页JavaScript方法的答案中找到该功能。

While the above works, particularly for such short code, my preferred method of creating <script> elements to execute code in the page context is to use a function I wrote called executeInPage(). You can find that function in my answer to "Calling webpage JavaScript methods from browser extension".

这篇关于jQuery $ {document）.off（）在Chrome扩展程序中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！