Hello World 扩展程序

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

概览

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

Hello World

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

<ph type="x-smartling-placeholder">
</ph> Hello 扩展程序 <ph type="x-smartling-placeholder">
</ph> Hello Extension 弹出式窗口

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

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

{
  "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 的文件，并添加以下代码：

<html>
  <body>
    <h1>Hello Extensions</h1>
  </body>
</html>

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

加载未封装的扩展程序

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

  1. 在新标签页中输入 chrome://extensions，转到“扩展程序”页面。（根据设计，chrome:// 网址不可链接。）
    • 或者，点击“扩展程序”菜单谜题按钮，然后选择菜单底部的管理扩展程序。
    • 或者，点击 Chrome 菜单，将光标悬停在更多工具上，然后选择扩展程序。
  2. 点击开发者模式旁边的切换开关以启用开发者模式。
  3. 点击 Load unpacked 按钮，然后选择扩展程序目录。 <ph type="x-smartling-placeholder">
    </ph> “附加信息”页面 <ph type="x-smartling-placeholder">
    </ph> “扩展程序”页面 (chrome://extensions)

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

固定该扩展程序

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

<ph type="x-smartling-placeholder">
</ph> 固定扩展程序 <ph type="x-smartling-placeholder">
</ph> 固定扩展程序

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

<ph type="x-smartling-placeholder">
</ph> Hello World 扩展程序 <ph type="x-smartling-placeholder">
</ph> Hello World 扩展程序

重新加载扩展程序

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

{
  "manifest_version": 3,
  "name": "Hello Extensions of the world!",
  ...
}

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

重新加载扩展程序

何时重新加载扩展程序

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

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

查找控制台日志和错误

控制台日志

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

<html>
  <body>
    <h1>Hello Extensions</h1>
    <script src="popup.js"></script>
  </body>
</html>

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

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

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

  1. 打开弹出式窗口。
  2. 右键点击弹出式窗口。
  3. 选择检查。 <ph type="x-smartling-placeholder">
    </ph> 检查弹出式窗口。 <ph type="x-smartling-placeholder">
    </ph> 检查弹出式窗口。
  4. 在 DevTools 中，前往 Console 面板。 <ph type="x-smartling-placeholder">
    </ph> 开发者工具代码面板 <ph type="x-smartling-placeholder">
    </ph> 检查弹出式窗口

错误日志

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

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 软件包会自动更新 更改。

🚀? 准备好开始构建了吗？

选择以下任一教程，开始您的扩展程序学习之旅。

扩展程序 学习内容
在每个网页上运行脚本 在每个页面上自动插入元素。
将脚本注入活跃标签页 点击扩展程序操作后在当前网页上运行代码。
管理标签页 创建用于管理浏览器标签页的弹出式窗口。
使用 Service Worker 处理事件 扩展程序 Service Worker 如何处理事件。