chrome插件”hello-world“开发详细流程以及日志定位

最新推荐文章于 2025-02-24 16:52:07 发布

idealzouhu

最新推荐文章于 2025-02-24 16:52:07 发布

阅读量601

点赞数 1

分类专栏：前端文章标签： chrome 前端

本文链接：https://blog.csdn.net/weixin_44814196/article/details/131745046

版权

3 篇文章

订阅专栏

本插件开发文档翻译于Google官方文档Chrome Extension development basics - Chrome Developers

一、插件开发

hello-world插件开发的具体流程如下：

插件开发源码链接

在开发人员模式下加载解压的扩展：

扩展程序已成功安装。由于manifest.json中没有包含扩展程序图标，因此将为扩展程序创建一个通用图标。

单击扩展程序的操作图标（工具栏图标）, 会看到一个弹出窗口。弹出窗口的内容为hello. html文件里面的内容。

默认情况下，当您在本地加载扩展时，它会出现在扩展菜单中。将您的扩展固定到工具栏可以在开发过程中快速访问您的扩展。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lfNdJboy-1689431402826)(images/image-20230715215142561.png)]

修改manifest.json的代码并将扩展的名称更改为“Hello Extension of the world！”

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

保存文件后，要在浏览器中查看此更改，您还必须刷新扩展。转到扩展页面并单击开/关切换旁边的刷新图标：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SKUGxyFS-1689431402826)(images/image-20230715215731661.png)]

刷新扩展后，重新加载扩展程序的结果如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-abDFm6TG-1689431402826)(images/image-20230715220013349.png)]

并非所有组件都需要重新加载才能查看所做的更改，如下表所示：

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

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

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

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

注意，由于此时添加了Content Scripts这部分内容，需要重新加载扩展程序

要查看控制台中记录的此消息，具体步骤为：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6nSmRwdq-1689431402827)(images/image-20230715221138648.png)]

在popup.js文件中添加一段错误的代码：

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

转到扩展页面并打开弹出窗口，将出现一个错误按钮。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZIPi9nwW-1689431402827)(images/image-20230715221618754.png)]

单击错误按钮可以了解有关错误的更多信息：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8WLnoG4W-1689431402827)(images/image-20230715221705966.png)]

要了解有关service worker, options page, and content scripts 的更多信息，可以查阅Debugging extensions.。