Chrome扩展开发基础教程（附HelloWorld）

氷泠

已于 2022-02-13 10:26:42 修改

阅读量4.2k

点赞数 6

分类专栏：前端琐碎文章标签：扩展开发 Chrome

于 2021-02-12 19:49:15 首次发布

本文链接：https://blog.csdn.net/qq_27525611/article/details/113791799

版权

本文是一篇关于Chrome扩展开发的基础教程，详细介绍了如何使用原生JS和H5创建Chrome扩展，包括创建manifest.json，添加弹出界面，设置图标以及发布扩展的步骤。同时，也提及了在Firefox上开发扩展的注意事项和不同之处。

摘要由CSDN通过智能技术生成

1 概述

Chrome扩展开发的基础教程，代码基于原生JS+H5，教程内容基于谷歌扩展开发官方文档。

开发扩展建议使用WebStorm，推荐WebStorm的原因是能够补全，在设置中的Libraries中可以下载chrome的库，这样就能够补全了：

在这里插入图片描述

另一个建议使用的是VSCode，但是笔者目前没有找到让VSCode补全的方式，希望知道的可以在评论指出补充一下。

当然其实扩展开发并没有规定使用哪一个IDE，常用的Web开发IDE比如HBuilder也是可以的，看个人喜好了。

首先创建一个空白文件夹：

mkdir FirstExtension
cd FirstExtension

接着创建一个叫manifest.json的文件，直接在WebStorm中创建即可，文件内容如下：

{
   
    "name": "First Extension",
    "description": "This is my first extension",
    "version": "1.0",
    "manifest_version": 3
}