#Chrome扩展程序开发教程--02：Hello Extensions-Toy模板网

这篇具有很好参考价值的文章主要介绍了#Chrome扩展程序开发教程--02：Hello Extensions。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

引言

本系列博客旨在带来最新的Chrome扩展程序开发入门教程。

1、Hello Extensions

本节博客中，笔者将带领读者创建一个最简单的扩展程序：
#Chrome扩展程序开发教程--02：Hello Extensions

1.创建一个文件夹，并在里面创建一个名为 manifest.json 的文件，输入以下内容：

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

这里面的 “action” 用以告诉 Chrome 我们的扩展程序的图标是 hello_extensions.png，并且当用户点击图标时，应当弹出 hello.html 窗口。

2.在文件夹中创建 icons 文件夹，点击下载图标，然后将图标改名为 hello_extensions.png 并移动到 icons 文件夹中。

3.在文件夹中创建 popup 文件夹，并在 popup 中创建 hello.html，输入以下内容：

<html>
  <body>
    <h1>Hello Extensions</h1>
  </body>
</html>

4.在 Chrome 中进入 chrome://extensions，点击右上角的 开发者模式，然后点击 加载已解压的扩展程序。选中我们刚刚创建的文件夹，即可加载 Hello Extensions
#Chrome扩展程序开发教程--02：Hello Extensions

2、固定扩展程序

默认情况下，当在本地加载扩展程序时，它将出现在扩展菜单中 #Chrome扩展程序开发教程--02：Hello Extensions ，可以将你的扩展程序固定在工具条上，以便在开发过程中快速访问。

点击扩展程序的图标（工具栏图标），就可以看到 Hello Extensions 的 popup 窗口了。