通过构建您的第一个 Hello World 扩展程序,了解 Chrome 扩展程序开发的基础知识。
概览
您将创建一个“Hello World”在本地加载扩展程序、查找日志并探索其他建议。
Hello World
当用户点击扩展程序工具栏图标时,此扩展程序将显示“Hello Extensions”。
<ph type="x-smartling-placeholder">![Hello 扩展程序](https://developer.chrome.google.cn/static/docs/extensions/get-started/tutorial/hello-world/image/hello-extension-6e3eacba176d3.png?authuser=9&hl=uk)
首先,创建一个用于存储扩展程序文件的新目录。如果您愿意,也可以下载 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>
现在,当用户点击的操作图标(工具栏图标)时,该扩展程序会显示一个弹出式窗口。您可以 将其加载至本地确保所有文件均已保存。
加载未封装的扩展程序
要在开发者模式下加载已解压的扩展程序,请执行以下操作:
- 在新标签页中输入
chrome://extensions
,转到“扩展程序”页面。(根据设计,chrome://
网址不可链接。)- 或者,点击“扩展程序”菜单谜题按钮,然后选择菜单底部的管理扩展程序。
- 或者,点击 Chrome 菜单,将光标悬停在更多工具上,然后选择扩展程序。
- 点击开发者模式旁边的切换开关以启用开发者模式。
- 点击 Load unpacked 按钮,然后选择扩展程序目录。
<ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder">
</ph> “扩展程序”页面 (chrome://extensions)
看!该扩展程序已成功安装。如果不包含扩展程序图标 系统将会为该扩展程序创建一个通用图标。
固定该扩展程序
默认情况下,当您在本地加载扩展程序时,它会显示在扩展程序菜单 () 中。将扩展程序固定到工具栏,以便在开发期间快速访问该扩展程序。
![固定扩展程序](https://developer.chrome.google.cn/static/docs/extensions/get-started/tutorial/hello-world/image/pinning-extension-215cb97773ab6.png?authuser=9&hl=uk)
点击扩展程序的操作图标(工具栏图标);您应该会看到一个弹出式窗口
<ph type="x-smartling-placeholder">![Hello World 扩展程序](https://developer.chrome.google.cn/static/docs/extensions/get-started/tutorial/hello-world/image/hello-world-extension-27a679d21340d.png?authuser=9&hl=uk)
重新加载扩展程序
返回代码,将扩展程序名称更改为“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!")
要查看控制台中记录的消息,请执行以下操作:
- 打开弹出式窗口。
- 右键点击弹出式窗口。
- 选择检查。
<ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder">
</ph> 检查弹出式窗口。 - 在 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 文件,如下例所示:
使用 TypeScript
如果您使用 VSCode 或 Atom 等代码编辑器进行开发,可以使用 npm chrome-types 包旨在充分利用Chrome 浏览器 API。当 Chromium 源代码加载完毕后,此 npm 软件包会自动更新 更改。
🚀? 准备好开始构建了吗?
选择以下任一教程,开始您的扩展程序学习之旅。
扩展程序 | 学习内容 |
---|---|
在每个网页上运行脚本 | 在每个页面上自动插入元素。 |
将脚本注入活跃标签页 | 点击扩展程序操作后在当前网页上运行代码。 |
管理标签页 | 创建用于管理浏览器标签页的弹出式窗口。 |
使用 Service Worker 处理事件 | 扩展程序 Service Worker 如何处理事件。 |