阿超 > chrome浏览器插件开发快速入门

chrome浏览器插件开发快速入门

2024-10-17

前端

劝君正向光明面，心自安详气自盈。——佚名

文档地址：

Hello World 扩展程序  |  Chrome Extensions  |  Chrome for Developers

Hello World 扩展程序

通过构建您的第一个 Hello World 扩展程序，了解 Chrome 扩展程序开发的基础知识。

概览

您将创建一个“Hello World”在本地加载扩展程序、查找日志并探索其他建议。

Hello World

当用户点击扩展程序工具栏图标时，此扩展程序将显示“Hello Extensions”。

Hello 扩展程序

Hello Extension 弹出式窗口

首先，创建一个用于存储扩展程序文件的新目录。如果您愿意，也可以下载 GitHub 中的源代码。

接下来，在此目录中创建一个名为 manifest.json 的新文件。此 JSON 文件描述了扩展程序的 功能和配置例如，大多数清单文件都包含 "action" 键，用于声明 Chrome 应用作扩展程序操作图标的图片，以及 。

1
2
3
4
5
6
7
8
9
10
{
  "manifest_version": 3,
  "name": "Hello Extensions",
  "description": "Base Level Extension",
  "version": "1.0",
  "action": {
    "default_popup": "hello.html",
    "default_icon": "hello_extensions.png"
  }
}

将该图标下载到您的目录中，并务必更改其名称，使其与 "default_icon" 键中显示的名称保持一致。

对于弹出式窗口，创建一个名为 hello.html 的文件，并添加以下代码：

1
2
3
4
5
<html>
  <body>
    <h1>Hello Extensions</h1>
  </body>
</html>

现在，当用户点击的操作图标（工具栏图标）时，该扩展程序会显示一个弹出式窗口。您可以 将其加载至本地确保所有文件均已保存。

加载未封装的扩展程序

要在开发者模式下加载已解压的扩展程序，请执行以下操作：

  1. 在新标签页中输入 chrome://extensions，转到“扩展程序”页面。（根据设计，chrome:// 网址不可链接。）

    • 或者，点击“扩展程序”菜单谜题按钮，然后选择菜单底部的管理扩展程序。
    • 或者，点击 Chrome 菜单，将光标悬停在更多工具上，然后选择扩展程序。

  2. 点击开发者模式旁边的切换开关以启用开发者模式。

  3. 点击 Load unpacked 按钮，然后选择扩展程序目录。

    “附加信息”页面

    “扩展程序”页面 (chrome://extensions)

看！该扩展程序已成功安装。如果不包含扩展程序图标 系统将会为该扩展程序创建一个通用图标。

固定该扩展程序

默认情况下，当您在本地加载扩展程序时，它会显示在扩展程序菜单 (益智) 中。将扩展程序固定到工具栏，以便在开发期间快速访问该扩展程序。

固定扩展程序

固定扩展程序

点击扩展程序的操作图标（工具栏图标）；您应该会看到一个弹出式窗口

Hello World 扩展程序

Hello World 扩展程序

重新加载扩展程序

返回代码，将扩展程序名称更改为“Hello Extensions of the world!”。

1
2
3
4
5
{
  "manifest_version": 3,
  "name": "Hello Extensions of the world!",
  ...
}

保存文件后，若要在浏览器中查看此更改，您还必须刷新扩展程序。前往 进入“扩展程序”页面，然后点击开启/关闭切换开关旁边的刷新图标：

重新加载扩展程序

何时重新加载扩展程序

下表显示了需要重新加载的组件才能看到更改：

扩展程序组件 需要重新加载扩展程序
清单 是
Service Worker 是
内容脚本 是（以及托管网页）
弹出式窗口 否
选项页面 否
其他扩展程序 HTML 网页 否

查找控制台日志和错误

控制台日志

在开发过程中，您可以通过访问浏览器控制台日志来调试代码。在本示例中，我们 可找到该弹出式窗口的日志。首先，在 hello.html 中添加脚本标记。

1
2
3
4
5
6
<html>
  <body>
    <h1>Hello Extensions</h1>
    <script src="popup.js"></script>
  </body>
</html>

创建一个 popup.js 文件，并添加以下代码。

1
console.log("This is a popup!")

要查看控制台中记录的消息，请执行以下操作：

  1. 打开弹出式窗口。

  2. 右键点击弹出式窗口。

  3. 选择检查。

    检查弹出式窗口。

    检查弹出式窗口。

  4. 在 DevTools 中，前往 Console 面板。

    开发者工具代码面板

    检查弹出式窗口

错误日志

现在，我们来取消该扩展程序。为此，我们可以移除 popup.js 中的右引号：

1
console.log("This is a popup!) // ❌ broken code

转到“扩展程序”页面并打开弹出式窗口。系统会显示错误按钮。

显示错误按钮的“扩展程序”页面

点击错误按钮，详细了解具体错误：

扩展程序错误详情

如需详细了解如何调试 Service Worker、选项页面和内容脚本，请参阅调试 扩展程序。

构建扩展程序项目

您可以通过多种方式构建扩展程序项目：不过，唯一的前提条件是 manifest.json 文件，如下例所示：

扩展程序文件夹的内容：manifest.json、background.js、script 文件夹、弹出式文件夹和 images 文件夹。

使用 TypeScript

如果您使用 VSCode 或 Atom 等代码编辑器进行开发，可以使用 npm chrome-types 包旨在充分利用Chrome 浏览器 API。当 Chromium 源代码加载完毕后，此 npm 软件包会自动更新 更改。

要点：经常更新此 npm 软件包，以便使用最新的 Chromium 版本。