如何使用 ChatGPT 构建Chrome浏览器扩展

前言

这里主要是提供一个思路，如何通过ChatGPT来开发一个属于我们自己的Chrome浏览器扩展，大家完全可以根据自己的需求自行开发，基本上也不需要具备什么技术背景，懂基础的电脑办公，具备ChatGPT的使用条件和环境即可。

除了ChatGPT聊天工具外，其实前面介绍的很多AI编程工具也可以完成此项工作，比如GitHub Copilot结合Chat，Codeium的Chat模块，Bito AI的Chat模块结合代码生成能力，都可以去实现，并不局限于使用ChatGPT。AI工具如何安装使用可以看前面的文章。

以下是我如何通过七个步骤使用 ChatGPT 构建我的第一个浏览器扩展，看看ChatGPT是如何帮助我编写一个清除Chrome缓存的扩展。

其中可能不会特别顺畅，这个主要取决于你和ChatGPT的沟通方式，指令是否足够清晰，越清晰生成的代码越准备，bug越少，速度也就越快。

一、环境准备

1.1、AiChat

官网地址： https:// c.aichat.la/# /?p=14980

如果没有自己的GPT账号或者不具体网络条件的朋友可以试试AiChat，完全免费不需要魔法，国内可直接访问，这也是我平时用的比较多的一款工具，前面也有文章单独介绍过，最方便的还是速度快，可以自定义角色或者选择内置的角色，不需要自己每次去重复写提示词

PS；国内很多个人或者企业部署了一些镜像，用过的都知道，要么需要输入自己的Key（这种方式很不安全，特别容易泄漏Key，我有2个key就莫名被消耗完了），要么及时要注册，限制每天几条，很难有一些不错的体验。

所以建议要么自己去部署一套单独玩，要么就用这种不需要Key的站点来体验。

1.2、AI编程辅助工具

我们也可以直接在GitHub Copilot、Codeium、Bito AI中来试用，如果不是学生没有免费账号可以选择后Codeium、Bito AI，有条件就用GitHub Copilot。具体的相关介绍和安装使用情查阅我前面发布的文章，这里不在重复赘述了。

二、开发插件

2.1、扩展文件结构

在ChatGPT中输入“如何创建 Chrome 扩展？文件结构应该是什么样的？”

ChatGPT 为我提供了创建Chrome扩展的五个步骤——从设计文件夹结构到在 Chrome 中本地运行项目。

然后，它分享了一个 Chrome 扩展文件结构的示例如下。

为了节省您一些时间，这里有一张图表简要定义了这些文件的用途：

1）、manifest.josn

有关您的扩展程序的元数据，例如名称和版本以及权限。anifest 作为专有名词是 Google Chrome API 的名称。最新的是V3。

2）、 popup.js

当用户在他们的 Chrome 工具栏中单击您的扩展程序图标时，将出现一个弹出窗口。该文件决定了该弹出窗口的行为，并包含用于处理用户与弹出窗口交互的代码。

3）、 popup.html 和 style.css

这些文件构成了弹出窗口的视觉效果。popup.html 是界面，包括布局、结构和内容。style.css 决定了 HTML 文件在浏览器中的显示方式，包括字体、文本颜色、背景等。

2.2、创建 manifest.json

manifest.json 是 Chrome 扩展程序的配置文件，它包含了扩展程序的名称、版本、描述、图标、权限、页面等信息。每个 Chrome 扩展程序都必须包含一个名为 manifest.json 的文件，该文件必须位于扩展程序的根目录中。

我们在 IDE 中新建一个插件项目，然后在项目下创建一个名为 manifest.json 的文件。在 manifest.json 中，ChatGPT根据我需要创建清理缓存的需求生成了如下的信息：

{
  "manifest_version": 3,
  "name": "Cache Cleaner",
  "version": "1.0",
  "description": "A simple Chrome extension to clear browser cache.",
  "permissions": ["storage", "tabs", "browsingData"],
  "action": {
    "default_icon": {
      "16": "icon-16.png",
      "32": "icon-32.png",
      "48": "icon-48.png",
      "128": "icon-128.png"
    "default_popup": "popup.html"
  "background": {
       "service_worker": "background.js"
}

manifest.json 文件包含了以下信息：

• “manifest_version”: 2 - 指定了 manifest.json 文件的版本号，Chrome 扩展程序必须使用版本 2 或更高版本的 manifest.json 文件。
• “name”: “My Extension” - 指定了扩展程序的名称。
• “version”: “1.0” - 指定了扩展程序的版本号。
• “description”: “This is my first Chrome extension.” - 指定了扩展程序的描述。
• “icons”: {“16”: “icon16.png”, “48”: “icon48.png”, “128”: “icon128.png”} - 指定了扩展程序的图标，包括三个不同大小的图标文件。
• “permissions”: [“tabs”, “activeTab”, “storage”] - 指定了扩展程序需要的权限，包括访问浏览器标签页、当前标签页和本地存储。
• “background”: {“scripts”: [“background.js”], “persistent”: false} - 指定了扩展程序的后台页面，包括一个 JavaScript 文件和一个标志，指示后台页面是否应保持运行状态。
• “browser action”: {“default icon”: “icon16.png”, “default title”: “My Extension”, “default popup”: “popup.html”} - 指定了扩展程序的浏览器操作，包括默认图标、标题和弹出窗口。

2.3、创建一个service worker，就是一个叫background.js的文件

在 Chrome 扩展程序开发中，使用 service worker 是可选的，而不是必须的。service worker 可以用来实现一些高级功能，例如离线缓存、后台数据同步等。但是，如果您的扩展程序不需要这些功能，那么您可以不使用 service worker。

使用 service worker 的主要优点是可以使扩展程序更加高效和可靠。在使用 service worker 的情况下，您可以将一些处理逻辑移动到后台线程中，以避免阻塞主线程。此外，service worker 还可以在离线情况下提供基本的功能，例如离线缓存和离线访问。

因此，您应该根据您的扩展程序的需求来决定是否使用 service worker。如果您的扩展程序只需要简单的功能，例如在浏览器中显示一些信息或修改网页内容，那么您可能不需要使用 service worker。但是，如果您的扩展程序需要实现一些高级功能，例如离线缓存或后台数据同步，那么使用 service worker 可能会更加合适。

在我的 background.js 文件中，这里我们要求 ChatGPT 按照描述生成我需要的 service worker 的评论：

/*
Chrome扩展程序的Service Worker
处理扩展程序安装时的事件
处理接收到消息的事件

ChatGPT 根据我的要求最终文件如下所示：

/*
Chrome扩展程序的Service Worker
处理扩展程序安装时的事件
处理接收到消息的事件
// 安装扩展程序时，请使用 console.log 输出信息；
chrome.runtime.onInstalled.addListener(function() {
   console.log("Extension installed");
// 当接收到消息时，请发送响应并使用 console.log 输出信息。
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
   console.log("Message received");
   sendResponse("Message received");

2.4、创建popup.html文件

在 popup.html 文件中，我们来描述希望弹出窗口如何显示。此窗口是用户单击扩展图标时将看到的窗口。

<!--
清除浏览器缓存的Chrome扩展程序的HTML代码。它与名为popup.js的Javascript文件和名为style.css的CSS文件相连。此扩展程序将呈现以下带有ID的按钮：
-“所有历史记录”
-“过去一个月”
-“过去一周”
-“昨天”
-“过去一小时”
-“过去一分钟”
此扩展程序还将呈现一个具有ID“lastCleared”的空段落。
-->

ChatGPT 根据我们的需求生成的代码建议如下：

<!DOCTYPE html>
    <meta charset="utf-8">
    <title>Clear Cache</title>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
    <h1>Clear Cache</h1>
    <button id="allHistory">所有历史记录</button>
    <button id="pastMonth">过去一个月</button>
    <button id="pastWeek">过去一周</button>
    <button id="pastDay">过去一天</button>
    <button id="pastHour">过去一小时</button>
    <button id="pastMinute">过去一分钟</button>
    <p id="lastCleared"></p>
    <script src="popup.js"></script>
  </body>
</html>

2.5、测试浏览器扩展

我们可以在开发完成前先测试一下扩展，看下扩展的UI效果是否符合我们的预期，可以边修改边调试方便开发。

在 Chrome 浏览器中导航到 chrome://extensions/ 。开启开发者模式。按“加载解压”。上传包含您的 Chrome 扩展程序的文件夹。加载后，您应该能够测试您的扩展。这是我的样子：

2.6、创建一个popup.js文件添加交互

描述你的扩展中交互逻辑和按钮点击事件，让ChatGPT帮助你生成完整的交互逻辑代码，如果不符合要求可以继续修改，这是我使用的描述：

/*
这是一个Chrome扩展程序，用于清除浏览器缓存。
处理按钮点击事件：
拥有id为"allHistory"的按钮可以清除所有缓存历史记录
拥有id为"pastMonth"的按钮可以清除过去一个月内的缓存历史记录
拥有id为"pastWeek"的按钮可以清除过去一周内的缓存历史记录
拥有id为"pastDay"的按钮可以清除过去一天内的缓存历史记录
拥有id为"pastHour"的按钮可以清除过去一小时内的缓存历史记录
拥有id为"pastMinute"的按钮可以清除过去一分钟内的缓存历史记录
创建一个函数，该函数可以
将日期和时间转换为人类可读格式
在拥有id为"lastCleared"的段落中添加 "已成功清除缓存" 以及日期和时间。

最终ChatGPT生成的 popup.js 代码如下：

/*
这是一个Chrome扩展程序，用于清除浏览器缓存。
处理按钮点击事件：
拥有id为"allHistory"的按钮可以清除所有缓存历史记录
拥有id为"pastMonth"的按钮可以清除过去一个月内的缓存历史记录
拥有id为"pastWeek"的按钮可以清除过去一周内的缓存历史记录
拥有id为"pastDay"的按钮可以清除过去一天内的缓存历史记录
拥有id为"pastHour"的按钮可以清除过去一小时内的缓存历史记录
拥有id为"pastMinute"的按钮可以清除过去一分钟内的缓存历史记录
创建一个函数，该函数可以
将日期和时间转换为人类可读格式
在拥有id为"lastCleared"的段落中添加 "已成功清除缓存" 以及日期和时间。
// 将日期和时间格式化
function convertDate(date) {
    let formattedDate = new Date(date);
    var options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
    return formattedDate.toLocaleDateString("zh-CN", options);
 // 将“成功清除缓存”添加到 ID 为“lastCleared”的段落中 
 function addCleared() {
    var p = document.getElementById("lastCleared");
    let currentDate = new Date();
    p.innerHTML = "Successfully cleared cache " + convertDate(currentDate);
 // 清除所有缓存历史记录 
 document.getElementById("allHistory").addEventListener("click", function() {
    chrome.browsingData.removeCache({ "since": 0 }, function() {
        addCleared();
 // 清除过去一个月的缓存历史记录 
 document.getElementById("pastMonth").addEventListener("click", function() {
    let date = new Date();
    date.setMonth(date.getMonth() - 1);
    chrome.browsingData.removeCache({ "since": date.getTime() }, function() {
        addCleared();
 // 清除过去一周的缓存历史记录
 document.getElementById("pastWeek").addEventListener("click", function() {
    let date = new Date();
    date.setDate(date.getDate() - 7);
    chrome.browsingData.removeCache({ "since": date.getTime() }, function() {
        addCleared();
 // 清除过去一天的缓存历史记录
 document.getElementById("pastDay").addEventListener("click", function() {
    let date = new Date();
    date.setDate(date.getDate() - 1);
    chrome.browsingData.removeCache({ "since": date.getTime() }, function() {
        addCleared();
 // 清除过去一小时的缓存历史记录
 document.getElementById("pastHour").addEventListener("click", function() {
   let date = new Date();
    date.setHours(date.getHours() - 1);
    chrome.browsingData.removeCache({ "since": date.getTime() }, function() {
        addCleared();
 // 清除过去一分钟的缓存历史记录
 document.getElementById("pastMinute").addEventListener("click", function() {
   let date = new Date();
    date.setMinutes(date.getMinutes() - 1);
    chrome.browsingData.removeCache({ "since": date.getTime() }, function() {
        addCleared();

2.7、在文件夹中创建style.css

告诉ChatGPT，描述您想要的扩展样式。最终生成的 style.css 看起来像这样：

/* 
将 Chrome 扩展程序的弹出窗口的宽度和高度调整为更宽更高，
使用易于访问的友好颜色和字体，
使 h1 元素易于阅读，
当鼠标悬停在按钮上时进行高亮显示，
当按钮被点击时进行高亮显示，
将按钮对齐在一个列中并使它们居中，但是平均间隔它们，
使段落加粗且易于阅读。
body {
    width: 400px;
    height: 500px;
    background-color: #f5f5f5;
    font-family: Arial, sans-serif;
    font-size: 16px;
    color: #333;
    margin-top: 20px;
  h1 {
    font-size: 24px;
    margin-top: 20px;
    margin-bottom: 20px;
    color: #333;
    text-align: center;
  button {
    display: block;
    width: 80%;
    margin: 0 auto;
    margin-bottom: 10px;
    padding: 10px;
    border: none;
    border-radius: 5px;
    background-color: #4CAF50;
    color: white;
    cursor: pointer;
  button:hover, button:active {
    background-color: #333;
    color: #fff;