如果你想要编写一个浏览器扩展程序，那么你很可能需要在程序注入的内容脚本中使用 jQuery。不过，要让 jQuery 在一个内容脚本中运行并不是一件简单的事情。在这篇文章中，我们将介绍如何在你的内容脚本中包含 jQuery，并给出一个示例代码。
为什么需要在内容脚本中使用jQuery？
当我们开发一个 Chrome 扩展程序时，我们通常会在页面中添加一些额外的功能。在这种情况下，我们可以通过注入一个内容脚本来实现这些功能。内容脚本是指在网页上运行的 JavaScript 代码，它可以与页面进行交互，并在需要时修改页面的 DOM 结构。
在使用内容脚本时，我们经常需要使用 jQuery 来处理 DOM 元素和事件。jQuery 是一个流行的 JavaScript 库，它可以极大地简化我们的代码，使得操作 DOM 和事件变得更加容易和直观。
内容脚本中如何包含 jQuery
要在内容脚本中使用 jQuery，我们需要将 jQuery 文件包含在我们的扩展程序中。有两种方法可以做到这一点：
方法一：从互联网加载 jQuery
这是最简单的方法，它允许我们从互联网上加载 jQuery。我们只需要在内容脚本中添加以下代码即可：
var script = document.createElement('script');
script.src = 'https://code.jquery.com/jquery-3.6.0.min.js';
script.type = 'text/javascript';
document.head.appendChild(script);这将在文档头部插入一个新的 <script> 标签，其中 src 指定了要加载的 jQuery 文件的 URL。当页面加载完成后，这个标签会自动执行并将 jQuery 导入到我们的内容脚本中。
虽然这个方法很简单，但它有一个缺点：我们必须依赖互联网连接，网络不佳或者访问速度慢时可能会导致加载失败。
方法二：将 jQuery 包含在扩展程序中
我们可以将 jQuery 文件包含在我们的扩展程序中，并在需要时从本地文件引用它。具体来说，我们需要将 jQuery 文件放在扩展程序的文件夹中，并在 manifest.json 文件中指定它的路径。
假设我们将 jQuery 文件保存在扩展程序的 js 目录下（即 js/jquery-3.6.0.min.js），那么我们可以使用以下代码在内容脚本中包含它：
var script = document.createElement('script');
script.src = chrome.extension.getURL('js/jquery-3.6.0.min.js');
script.type = 'text/javascript';
document.head.appendChild(script);这个代码片段使用了 Chrome 扩展程序 API 中的 chrome.extension.getURL() 方法，它返回指定文件相对于扩展程序根目录的完整 URL。这样我们就可以在内容脚本中动态地引用 jQuery 文件了。
示例代码
下面是一个示例代码，它演示了如何在内容脚本中包含 jQuery：
-- -------------------- ---- -------
-- ----------
-- -- ------ --
--- ------ - ---------------------------------
---------- - --------------------------------------------------
----------- - ------------------
----------------------------------
-- - --- -----------
---------------------------- -
-- ----------
--- ------ - --------------
------------------ ------
-------------------------
-- ------------------
----------------------- -
------------------- ---------
---
---这个示例代码演示了如何在页面上添加
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/27996