jQuery Off（）不适用于Chrome扩展 [英] jQuery Off() not working in Chrome Extension

问题描述

我已根据 https：//机器人创建了Chrome扩展程序.thoughtbot.com / how-to-make-a-chrome-extension （查看已完成文件的结尾）

我做了两个变化。我使用JQuery 3.1.1最小化，而不是上面页面中给出的较旧的JQuery 3.1.1;我更改了content.js：

$ p $ chrome.runtime.onMessage.addListener（
函数（request，sender，sendResponse ）{
if（request.message ===clicked_browser_action）{
$（document）.off（touchmove mousewheel mousemove scroll）;
}
}
）;


当我点击扩展按钮时，$（document）.off（）命令不起作用打开适当的测试页面。它没有给出错误，它只是没有做任何事情。

我检查过了。如果我在要控制的页面上输入 $（document）.off（touchmove mousewheel mousemove scroll）; 到控制台，它可以正常工作。

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

我试着检查 jQuery._data（jQuery（document）[0]）。events [touchmove] （和mousewheel，mousemove，scroll ），它在控制台中工作，但如果我断点扩展，则会出现错误（无法读取undefined 的属性'touchmove'）。当我进一步检查时， jQuery._data（jQuery（document）[0]）给出了以下内容：

 对象
事件：对象
句柄：函数（e）
 __proto__：对象
  

在断点处：

  Object 
 __proto__：Object 
  

其他的东西（例如，jQuery可以访问和运行，等等）。

任何人都可以帮忙吗？

< script> 元素到页面的DOM中。

您可以将您的代码更改为：

  chrome.runtime.onMessage.addListener（
 function请求，发件人，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> 中的代码在页面脚本上下文/作用域中运行。

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

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");
        }
    }
);

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.

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.

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).

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 console:

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

In breakpoint:

Object
    __proto__: Object

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

Can anyone help?

解决方案

Your content script is in a different context/scope from that of page scripts (scripts that already exist in the webpage). In order to execute code in the page script context, you have create and insert a <script> element to the page's DOM.

You could change your code to:

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);
        }
    }
);

The added script gets run because it is 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.

这篇关于jQuery Off（）不适用于Chrome扩展的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！