从0到1：手把手带你开发第一个Chrome插件

金金金上线！

话不多，只讲你能听懂的前端知识

前言

谁不想拥有一个属于自己的浏览器插件呢~

开始

创建manifest.json文件，添加以下内容：

json 复制代码

{
  "name": "Hello Extensions",
  "description": "Base Level Extension",
  "version": "1.0",
  "manifest_version": 3,
  "action": {
    "default_popup": "hello.html",
    "default_icon": "hello_extensions.png"
  }
}

下载个icon图片并命名为hello_extensions.png，需要和default_icon一致
创建一个文件，hello.html（弹出式窗口，就是点击了扩展会弹出一个小框显示信息），添加以下内容：
html 复制代码
```
<html>
 <body>
   <h1>Hello Extensions</h1>
 </body>
</html>
```

加载未打包的扩展程序

如需在开发者模式下加载未封装的扩展程序，请执行以下操作：

在新标签页中输入 chrome://extensions 即可前往"扩展程序"页面。（根据设计，chrome:// 网址不可链接。）
- 或者，点击"扩展程序"菜单拼图按钮，然后选择菜单底部的管理扩展程序。
- 或者，点击 Chrome 菜单，将鼠标悬停在更多工具 上，然后选择扩展程序。
点击开发者模式旁边的切换开关，即可启用开发者模式。
点击加载已解压缩的文件按钮，然后选择扩展程序目录。（可能没那么快响应，记得稍等一会）

这样就代表成功了

固定扩展程序

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

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

重新加载扩展程序

有时候会有修改内容的需求，此时改完后就需要重新加载扩展程序以看到最新的内容
修改manifest.json，将扩展程序的名称更改为 Hello Extensions of the world!

保存文件后，您还必须刷新扩展程序，才能在浏览器中看到此更改。前往"附加信息"页面，然后点击开启 /关闭切换开关旁边的刷新图标：

验证

何时应该重新加载扩展程序呢？

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

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

查找控制台日志和错误

控制台日志

在开发期间，您可以通过访问浏览器控制台日志来调试代码。在本例中，我们将找到弹出式窗口的日志。首先，将脚本标记添加到 hello.html。
html 复制代码
```
<html>
  <body>
    <h1>Hello Extensions</h1>
    <script src="popup.js"></script>
  </body>
</html>
```
创建一个 popup.js 文件，并添加以下代码：
js 复制代码
```
console.log("This is a popup!")
```

在控制台中查看系统记录的这条消息，请执行以下操作:

打开弹出式窗口。
右键点击弹出式窗口。
选择检查。
在 DevTools 中，前往控制台面板

错误日志

现在，来破坏一下扩展程序。为此，移除 popup.js 中的闭引号：
前往"扩展程序"页面，然后打开弹出式窗口。系统随即会显示一个错误按钮。
点击错误按钮，详细了解相应错误：

如需详细了解如何调试服务工件、选项页面和内容脚本，请参阅调试扩展程序。

可以通过多种方式构建扩展程序项目；不过，唯一的前提是将 manifest.json 文件放在扩展程序的根目录中(之后出如何构建扩展程序相关文章~)

编写有误还请各位指正，万分感谢。