#Chrome扩展程序开发教程--02：Hello Extensions

最新推荐文章于 2024-11-11 17:01:08 发布

投笔丶从戎

最新推荐文章于 2024-11-11 17:01:08 发布

阅读量742

点赞数 1

分类专栏： Chrome扩展程序文章标签： chrome javascript 前端

本文链接：https://blog.csdn.net/qq_43519779/article/details/130304377

版权

Chrome扩展程序专栏收录该内容

7 篇文章 9 订阅

订阅专栏

#Chrome扩展程序开发教程--02：Hello Extensions

引言

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

1、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

2、固定扩展程序

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

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

3、重新加载扩展程序

当我们修改了扩展程序后，为了在浏览器中看到这一变化，必须刷新扩展程序。进入扩展程序页面，点击开关切换键旁边的刷新图标：

4、查看扩展程序的输出

在上一章中已经介绍了，扩展程序的运行和网页本身是隔离的，因此在扩展程序中运行 console.log() 并不能直接在控制台中看到，为了能看到扩展程序的输出信息，需要进行以下操作：

打开 popup 窗口
在 popup 窗口中点击右键
选择检查
在扩展程序的 DevTools 中，切换到 console 窗口