如何在开发者控制台中使用Chrome注入jQuery？

Question

问题

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

• jQuery Injector - Chrome网上应用店
• jQuery Everywhere - Chrome网上应用店

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

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

我不知道从哪里开始.

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

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

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

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

• 如果在服务器上启用了内容安全策略,如何使用bookmarklet将脚本注入页面？
• 在JavaScript控制台中包含jQuery
• 如何将jquery注入任何网页
• 如何在另一个JavaScript文件中包含JavaScript文件？
• Google Chrome扩展程序:如何在以编程方式注入的内容脚本中包含jQuery？
• 将jQuery注入任何站点| 布兰登马丁内斯
• 内容脚本 - 谷歌浏览器

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

• 如何通过Chrome开发者工具将jQuery注入任何网站| DSASMBLR

我的问题

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

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

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

Answer 1

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

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

只需将每一行粘贴到控制台中，一次即可。（实际上，如果您选择前三行并将它们全部一次粘贴到DevTools Console中，则可以正常工作）。

然后，在DevTools控制台中对其进行测试：

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

如果遇到错误，请尝试以下方式：

jQuery('div').length

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

希望我可以将此代码声明为我自己的代码，但这要感谢jondavidjohn。请访问下面的引用链接并支持他的解决方案。

参考：

/sf/answers/523207051/

Answer 2

使用片段。

1. 复制 jQuery 代码，并将其粘贴到 Snippet 中。
2. 运行代码段。