在 Chrome 扩展 JS 代码中添加 jQuery

简介

Chrome 扩展是一种能够扩展浏览器功能的软件，它由 HTML、CSS 和 JS 构成。在开发过程中，经常会用到 jQuery 来快速、简洁地操作 DOM，本文介绍了如何在 Chrome 扩展中添加 jQuery。

步骤

1. 确认 jQuery 版本

首先需要确认你喜爱的 jQuery 版本（建议使用最新版）。jQuery 安装包可以从 官网下载。

2. 创建一个 Chrome 扩展

创建一个 Chrome 扩展，参考文献 Getting Started with Google Chrome Extensions。在这个扩展中，我们需要创建一个文件夹，命名为 jQuery。在这个文件夹中存储 jQuery。

3. 将 jQuery 文件添加到扩展

将下载的 jQuery 文件添加到之前创建的 jQuery 文件夹中。

4. 修改 manifest.json 文件

修改 manifest.json，将 jQuery 文件添加到 manifest.json 中。在 "web_accessible_resources" 数组中添加以下行：

{
   "web_accessible_resources": [
      "jquery-3.6.0.min.js"
   ]
}

5. 在扩展的 JS 代码中使用 jQuery

在扩展的 JS 代码中使用 jQuery，参考以下代码片段：

// 加载 jQuery
var script = document.createElement('script');
script.src = chrome.runtime.getURL('jquery-3.6.0.min.js');
(document.head||document.documentElement).appendChild(script);

// 使用 jQuery
$(document).ready(function() {
  console.log("Hello, jQuery!");
});

结论

通过上述步骤，在 Chrome 扩展中可以方便地使用 jQuery。