谷歌扩展开发教程（一）Chrome 扩展开发的基础知识

你好,扩展

我们将创建一个“Hello, Extensions”示例，在本地加载扩展。

0101.png

首先创建一个新目录来存储扩展文件。如果您愿意，可以从GitHub下载完整的源代码。

接下来，在此目录中创建一个名为的新文件manifest.json并添加以下代码：

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

这个 JSON 对象描述了扩展的功能和配置。例如，该"action"键声明 Chrome 应使用的图像作为操作的图标，以及在单击操作时在弹出窗口中显示的 HTML 页面。

0102.png

将到您的目录，并确保更改其名称以匹配"default_icon"密钥中的内容。

对于弹出窗口，创建一个名为的文件hello.html，并添加以下代码：

<html>
    <head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8">
    </head>
    <body>
        <h1>Hello Extensions</h1>
        <div>你好 扩展</div>
    </body>
</html>

注意：显示中文需要添加 "<meta http-equiv="content-type" content="text/html;charset=utf-8">" 避免出现乱码。

加载已解压的扩展程序

在开发者模式下加载一个解压的扩展：

通过输入chrome://extensions新选项卡进入扩展页面。（根据设计chrome://，URL 不可链接。）
或者，单击扩展菜单拼图按钮，然后选择菜单底部的管理扩展。

或者，单击 Chrome 菜单，将鼠标悬停在更多工具上，然后选择扩展程序。
通过单击开发人员模式旁边的切换开关启用开发人员模式。
单击加载已解压的扩展程序按钮并选择扩展目录。

0103.png

扩展已成功安装。因为清单中没有包含扩展图标，所以将为扩展创建一个通用图标。

重新加载扩展

让我们回到代码，把扩展名改成“Hello Extensions of the world！” 在清单中。

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

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

0104.png

查询控制台日志和错误

控制台日志

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

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

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

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

要查看控制台中记录的此消息：

刷新扩展。
打开弹出窗口。
右键单击弹出窗口。
选择检查。

0105.png

5.在DevTools中，导航到控制台面板。

0106.png

错误日志

现在让我们打破扩展。我们可以通过删除结束引号来做到这一点popup.js：

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

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

0107.png

构建扩展项目

有很多方法可以构建扩展项目；但是，您必须将 manifest.json 文件放在扩展的根目录中。下面是一个结构示例：

0108.png