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

问题描述 投票:1回答:1

我已经基于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”),并且可以在控制台中使用,但是如果我对扩展名进行断点,则会收到错误(Cannot read property 'touchmove' of undefined)。当我进一步检查时,jQuery._data( jQuery(document)[0])提供以下内容:

在控制台中:

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

在断点:

Object
    __proto__: Object

我已经尝试了其他一些东西(例如,jQuery可以访问并且可以使用,等等)。

javascript jquery google-chrome-extension jquery-events
1个回答
2
投票

您正在尝试执行$(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);
        }
    }
);

添加的脚本在页面上下文中运行,因为它现在是DOM中的<script>元素。浏览器识别出已添加<script>元素,并在对其进行处理后立即对其进行评估(执行所包含的代码)。对于添加到DOM中的任何其他元素,它的作用基本上相同。因为它是页面的一部分,所以<script>内部的代码将在页面脚本上下文/范围内运行。

虽然上述工作,特别是对于这样的短代码,但我创建<script>元素以在页面上下文中执行代码的首选方法是使用我编写的名为executeInPage()的函数。您可以在my answer to "Calling webpage JavaScript methods from browser extension"中找到该功能。

© www.soinside.com 2019 - 2024. All rights reserved.