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

【问题标题】：How to Inject jQuery with Chrome in Developer Console?如何在开发者控制台中使用 Chrome 注入 jQuery？
【发布时间】：2025-12-27 09:20:10
【问题描述】：

问题

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

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

我在 2011 年第一次了解到 XSS 作为浏览器问题，然而，XSS 预防措施之前从未阻止我进行本地开发。我一直在寻找现代（2017 年末）的解决方案，但无济于事。

我不知道从这里去哪里。

我尝试过但没有奏效的方法

以下是我尝试过的插件（大约在 6 个月前还可以使用），但对我不再有效：

以下是我遇到的许多链接中的一些，它们提供了不再有效的解决方案：

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

How to Inject jQuery Into Any Website via Chrome Developer Tools | DSASMBLR

我的问题

如何将 jQuery（使用 Chrome 开发者控制台）注入到不使用 jQuery 的网页中？
2017 年浏览器/JavaScript/编程世界是否发生了足够大的变化，如果有人知道这种特殊的变化或现象，很容易解释为什么上述插件不再起作用？
李>
为什么上述插件不起作用？今年是否所有浏览器公司都普遍推出了一些重大变化？

【问题讨论】：

你能告诉我为什么你需要注入 jquery 吗？我的意思是为了什么目的？ #wantToKnow
我刚刚测试了您发布的一个插件，它运行良好：chrome.google.com/webstore/detail/jquery-inject/…
我可以很好地使用您的参考*.com/questions/7474354/…。我没有尝试其余的，因为这对我有用
@plonknimbuzz 我已经在这里解释过了：(client-side) to experiment with design changes, development modifications, and real-time troubleshooting
@plonknimbuzz 谢谢。我会研究这些因素。我试图更新我对上述“为什么”的评论，但没有成功，所以这是我的其余回复。：From time to time I will run across old, basic websites and using jQuery I can quickly mock up what an upgrade might look like for the owner who, as a freelance web developer/designer, I am hoping to make my client. 希望对您有所帮助。

标签： javascript jquery dependency-injection google-chrome-devtools

【解决方案1】：

您可以制作一个非常基本的 chrome 扩展，在每个页面上注入 JQuery。 Getting started with chrome extensions。您可以使用这段代码在清单本身中指定它。

"content_scripts": [
     {
          "matches": ["*"],
          "js": ["jquery.min.js"]  }
]

请注意，匹配项中的 * 将在每个网页上注入脚本。你也可以给出不同的模式。例如，“www.abc.com/*”将匹配所有以“www.abc.com”开头的 URL，并且只会在这些页面上注入脚本。

更好的解决方案

更好的办法是创建一个 chrome 扩展，当你点击扩展图标时，它可以在当前选项卡中注入你的 JavaScript 文件。

制作一个后台脚本并在清单中指定它。

manifest.json

{
  "name": "My Extension",
  "version": "0.1",
  "manifest_version": 2,
  "description": "inject script",
  "browser_action": {
    "default_icon": "logo.png"
  },
  "permissions": [
    "activeTab"
  ],
  "background": {
    "scripts": ["background.js"]
  }
}

在您的后台脚本中，监听对扩展图标的点击并在当前选项卡中注入 jquery。

background.js

chrome.browserAction.onClicked.addListener(function(tab) {
  chrome.tabs.executeScript(null, {file: "jquery.min.js"});
});

【讨论】：

【解决方案2】：

使用Snippets。

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

【讨论】：

工作（在 Google Chrome 版本 83.0.4103.116）就像一个魅力！它避免了Content Security Policy 问题。

【解决方案3】：

不幸的是，现在由于防止“XSS”（跨站点脚本）的最新热潮，这些插件不再起作用。这些变化背后可能有一个崇高的目的，我只是想了解发生了什么变化。我认为这与“内容安全策略”有关，我只是最近才听说并且知之甚少。

是的。这些插件不起作用的原因是因为它们与 MITM（中间人）攻击无法区分，恶意攻击者可以注入任意 JavaScript。 CSP (Content-Security-Policy) 旨在通过仅从源白名单中运行受信任的 JavaScript 来防止这种情况发生。不幸的是，在开发人员将插件作者注入的 JavaScript/CSS 列入白名单之前，目前在 Chrome 或 Firefox 中都没有简单的方法来处理这个问题。这不太可能发生，因为 Chrome 有一个关于如何遵守 CSP 政策的guide for app developers。

同时，我建议您关注XSS 上的 OWASP 文章，以便了解它为何如此重要。

不推荐的方法

您可以从 Chrome 商店下载“禁用内容安全策略”插件。仅将其用于本地开发。请记住，如果您这样做，恶意 ISP 或专门的攻击者仍然可以在 MITM 攻击中注入脚本（例如，如果他们控制了您的路由器）。

推荐方法

不要注入 jQuery，而是把它放在你的页面中。添加CSP标签：

<meta http-equiv="Content-Security-Policy" content="...">

您可以在这里输入default-src 'self'; script-src https://cdn.com/jquery 之类的内容，cdn.com 是您从中下载 jQuery 的位置。更进一步，添加subresource integrity hash。如果 CDN 遭到入侵、变得恶意或您成为 MITM，则哈希将不匹配，并且不会加载恶意脚本。此外，出于同样的原因，您永远不能真正信任插件。

如果您决定不使用 CDN，您可以使用包管理器（如 node 或 Bower）为您下载特定版本的 jQuery。然后在本地加载它。当然，对于生产，您通常希望使用 CDN，以便您的访问者可以从更近的数据中心下载。此外，如果您使用 Cloudflare，他们很可能已经缓存了该特定版本的 jQuery，因此他们不必继续下载它。

原型设计

如果您的动机是制作原型，那么有一些变通方法：

不推荐：您可以抓取网站，进行修改，然后呈现给客户。

推荐：您应该进行快速原型设计，而不是在实时网站上进行修改。这样做的好处是：

如果您与客户坐下来，客户可以准确地看到您在做什么
您处理的是抽象原型，而不是具体细节，应在合同中规定。有关骨架屏幕的问题，请参阅ux.stackexchange.com。
您可以向客户解释为什么您不能执行 X（将 jQuery 注入实时站点）而应该执行 Y（请参阅答案的其余部分），这有望说服他们采用更好的安全实践
原型可以立起来很快就扔掉，您甚至可以保留修订版以进行比较。更改实时网站并非易事

【讨论】：

感谢您提供详细信息！你让我看到了很多我不知道的事情。 csp 元标记、快速原型设计、MITM 攻击等。通过学习现代 ES6 JavaScript document.querySelectorAll() 方法，我能够解决注入 jQuery 问题，因此不需要 jQuery，并制作了我一直称为 sn-ps 的东西（这可能与 Chrome 开发工具调用 sn-ps) 在控制台中运行的相同也可能不同。我刚刚将我所有的 jQuery sn-ps 转换为 ES6。不过，我期待着进一步研究您提出的新概念 :)

【解决方案4】：

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

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 中，它就可以正常工作）。

您可能会立即看到一个错误：Uncaught ReferenceError: jQuery is not defined。忽略它 - DevTools 正在拉你的腿。 （谷歌在幽默方面的尝试很弱，也许......）

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

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

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

jQuery('div').length

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

此代码感谢jondavidjohn，来自此original post。

【讨论】：

效果很好！这正是我一直在寻找的…… 3 年前你在哪里？大声笑。
在末端设置$ = jQuery，那么你就可以访问$

【解决方案5】：

最简单的方法是在开发控制台中作为一个整体来执行它，看看它的神奇之处：

var script = document.createElement('script');
script.src = "https://code.jquery.com/jquery 3.4.1.min.js";
document.getElementsByTagName('head')[0].appendChild(script);

【讨论】：

这个答案与上一个答案（两年前发布）完全相同，只是变量名发生了变化。 -1