首页 > javascript > 如何在开发者控制台中使用Chrome注入jQuery?

如何在开发者控制台中使用Chrome注入jQuery? (How to Inject jQuery with Chrome in Developer Console?)

问题

问题

我以前能够(本地)使用以下两个Chrome扩展中的任何一个来轻松地将jQuery注入到尚未拥有jQuery的页面中,并且我没有(客户端)来试验设计更改,开发修改和实时故障排除:

不幸的是,现在因为看起来是防止“XSS”(跨站点脚本)的最新热潮,这些插件不再起作用。这些变化背后可能有一个崇高的目的,我只是想了解改变了什么。我认为这与“ 内容安全政策 ”有关,我最近才听说过这个政策并且对此知之甚少。

我在2011年首次了解到XSS作为浏览器问题,然而,XSS预防措施从未妨碍我以前进行本地开发。我一直在寻找现代(2017年末)的解决方案,但无济于事。

我不知道从哪里开始。

我曾经尝试过什么都没有用过

以下是我尝试的插件(以前大约6个月前工作)不再适用于我:

  1. 控制台中的jQuery(插件)
  2. jQuery注入(插件)
  3. jQuery Injector(插件)
  4. GitHub - bluerabbit / jquery-inject:jQuery-inject(Chrome扩展)

以下是我遇到的一些提供解决方案的链接,这些链接不再有效:

最后一个也看起来很有希望,但我还没有尝试过:

我的问题

  1. 如何将jQuery(使用Chrome Developer Console)注入不使用jQuery的网页?

  2. 在2017年,浏览器/ JavaScript /编程世界发生了一些变化,如果一个人知道这个特定的变化或现象,它很容易解释为什么上面的插件不再起作用?

  3. 为什么上面的插件不起作用?今年所有浏览器公司是否普遍推出了一些重大变化?

解决方法

这是一个一直对我有用的直接方法:

var jq = document.createElement('script');
jq.src = "https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js";
document.getElementsByTagName('head')[0].appendChild(jq);

// ... give time for script to load, then type (or see below for non wait option)
jQuery.noConflict();

只需将每一行粘贴到控制台中,一次一个。(实际上,如果选择前三行并将它们全部粘贴到D​​evTools控制台中,它可以正常工作)。

然后,在DevTools控制台中,测试它:

$('div').length; //press Enter

如果您收到错误,请尝试以下方式:

jQuery('div').length

希望第一种方法可行 - 但有时您需要使用第二种方法。

希望我可以将此代码声称为我自己的代码,但感谢jondavidjohn请访问下面引用的链接并UPVOTE他的解决方案。

参考:

https://stackoverflow.com/a/7474386/1447509

问题

THE ISSUE

I used to be able to (locally) use either of the following two Chrome extensions to easily inject jQuery into pages that didn't already have jQuery, and that I didn't own (client-side) to experiment with design changes, development modifications, and real-time troubleshooting:

Unfortunately, now because of what appears to be the newest craze in preventing "XSS" (cross-site scripting), those plugins no longer work. There may be a noble purpose behind these changes, and I'm just trying to understand WHAT changed. I think it has something to do with "content security policy", which I've only recently heard of and have very little knowledge of.

I first learned about XSS as a browser issue in 2011, however, XSS prevention measures had never prevented me from doing local development before. I've been searching for a modern (late 2017) solution, to no avail.

I'm not sure where to go from here.

WHAT I'VE TRIED THAT HASN'T WORKED

Here are plugins I tried (which used to work until about 6 months ago) that no longer work for me:

  1. jQuery in Console (Plugin)
  2. jQuery Inject (Plugin)
  3. jQuery Injector (Plugin)
  4. GitHub - bluerabbit/jquery-inject: jQuery-inject(Chrome extension)

Here are some of the many links I encountered that offer solutions which no longer work:

This last one also looks promising, but I haven't tried it yet:

MY QUESTIONS

  1. How can I inject jQuery (using Chrome Developer Console) into a webpage that doesn't use jQuery?

  2. Did something change in the browser/JavaScript/programming world significantly enough in 2017 that if a person knew about this particular change or phenomena it would easily explain why the above plugins no longer work?

  3. Why don't the above plugins work? Did ALL the browser companies universally roll out some major change this year?

解决方法

Here is a direct method that has always worked for me:

var jq = document.createElement('script');
jq.src = "https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js";
document.getElementsByTagName('head')[0].appendChild(jq);

// ... give time for script to load, then type (or see below for non wait option)
jQuery.noConflict();

Just paste each line into the console, one at a time. (Actually, it works fine if you select the top three lines and paste them into DevTools Console all-at-once).

Then, in DevTools console, test it:

$('div').length; //press Enter

If you get an error, try it this way:

jQuery('div').length

Hopefully, the first will work - but sometimes you'll need to use the 2nd method.

Wish I could claim this code as my own, but it is thanks to jondavidjohn. Please visit the referenced link below and UPVOTE his solution.

Reference:

https://stackoverflow.com/a/7474386/1447509

相似信息