通过构建您的首个 Hello World 扩展程序,了解 Chrome 扩展程序开发的基础知识。
概览
您将创建一个“Hello World”示例,在本地加载扩展程序,查找日志,并探索其他推荐的扩展程序。
Hello World
当用户点击扩展程序工具栏图标时,此扩展程序会显示“Hello Extensions”。
![Hello 扩展程序](https://developer.chrome.google.cn/static/docs/extensions/get-started/tutorial/hello-world/image/hello-extension-6e3eacba176d3.png?authuser=8&hl=hu)
首先,新建一个目录来存储您的扩展程序文件。如果您愿意,也可以从 GitHub 下载完整的源代码。
接下来,在此目录中创建一个名为 manifest.json
的新文件。此 JSON 文件描述了扩展程序的功能和配置。例如,大多数清单文件包含一个 "action"
键,用于声明 Chrome 应用作扩展程序的操作图标的图片,以及当用户点击扩展程序的操作图标时在弹出式窗口中显示的 HTML 页面。
{
"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>
现在,当用户点击扩展程序的操作图标(工具栏图标)时,此扩展程序会显示一个弹出式窗口。您可以在 Chrome 中对其进行测试,方法是在本地加载它。请确保所有文件均已保存。
加载已解压的扩展程序
如需在开发者模式下加载已解压的扩展程序,请执行以下操作:
- 在新标签页中输入
chrome://extensions
,前往“扩展程序”页面。(按照设计,chrome://
网址是不可链接的。)- 或者,您也可以点击“扩展程序”菜单谜题按钮,然后选择菜单底部的管理扩展程序。
- 或者,点击 Chrome 菜单,将光标悬停在更多工具上,然后选择扩展程序。
- 点击开发者模式旁边的切换开关以启用开发者模式。
- 点击 Load unpacked(加载解压缩)按钮,然后选择扩展程序目录。
“扩展程序”页面 (chrome://extensions)
搞定!该扩展程序已成功安装。如果清单中未包含扩展程序图标,系统将为扩展程序创建一个通用图标。
固定扩展程序
默认情况下,在本地加载扩展程序时,它会显示在扩展程序菜单 () 中。将扩展程序固定到工具栏,以便在开发过程中快速访问扩展程序。
![固定扩展程序](https://developer.chrome.google.cn/static/docs/extensions/get-started/tutorial/hello-world/image/pinning-extension-215cb97773ab6.png?authuser=8&hl=hu)
点击扩展程序的操作图标(工具栏图标);您应该会看到一个弹出式窗口。
![hello world 扩展程序](https://developer.chrome.google.cn/static/docs/extensions/get-started/tutorial/hello-world/image/hello-world-extension-27a679d21340d.png?authuser=8&hl=hu)
重新加载扩展程序
返回代码,在清单中将扩展程序的名称更改为“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!")
要在控制台中查看这条消息的记录,请按以下步骤操作:
- 打开弹出式窗口。
- 右键点击弹出式窗口。
- 选择检查。
检查弹出式窗口。 - 在 DevTools 中,前往控制台面板。
检查弹出式窗口
错误日志
现在我们取消一下该扩展程序。为此,我们可以移除 popup.js
中的右引号:
console.log("This is a popup!) // ❌ broken code
前往“扩展程序”页面并打开弹出式窗口。系统会显示错误按钮。
点击错误按钮,详细了解错误:
如需详细了解如何调试 Service Worker、选项页面和内容脚本,请参阅调试扩展程序。
构建扩展程序项目
您可以通过多种方式构建扩展程序项目;不过,唯一的前提条件是将 manifest.json 文件放在扩展程序的根目录中,如以下示例所示:
使用 TypeScript
如果您使用 VSCode 或 Atom 等代码编辑器进行开发,可以通过 npm 软件包 chrome-types 来利用 Chrome API 的自动填充功能。当 Chromium 源代码发生更改时,此 npm 软件包会自动更新。
🚀? 准备好开始构建了吗?
选择以下任一教程,开启您的扩展程序学习之旅。
扩展程序 | 学习内容 |
---|---|
在每个网页上运行脚本 | 在每个网页上自动插入元素。 |
将脚本注入活动标签页中 | 点击扩展程序操作后在当前页面上运行代码。 |
管理标签页 | 创建一个用于管理浏览器标签页的弹出式窗口。 |
使用 Service Worker 处理事件 | 扩展 Service Worker 处理事件的方式。 |