如何使用 ChatGPT 构建Chrome浏览器扩展_chatgpt 生成chrome plgins

前言

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

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

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

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

一、环境准备

1.1、AiChat

官网地址：https://i.bossai.im/#/?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 文件和一个标志，指示后台页面是否应保持运行状态。

• “browseraction”: {“defaulticon”: “icon16.png”, “defaulttitle”: “My Extension”, “defaultpopup”: “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>
<html>
  <head>
    <meta charset="utf-8">
    <title>Clear Cache</title>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <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;
  }
 
  #lastCleared {
    font-weight: bold;
    margin-top: 20px;
    text-align: center;
    color: #333;
  }

三、案例拓展

我这里举一个场景，大家可以尝试一下，我后续也会考虑利用ChatGPT来实现。

为什么要重复造轮子，比如自己实现一个多语言翻译扩展插件，主要有以下几点原因：

1、对于日常工作涉及到翻译的需求比较多的场景，且对翻译质量有一定的要求。

2、可以支持扩展接入不同的翻译服务（API方式），比如腾讯、阿里、百度、Google、DeepL、Microsoft、Amazon、Open AI等。

3、可以直接划词翻译、或者整个网页一键翻译

4、受限于网络，无法使用Microsoft、Amazon、Open AI、Google等翻译服务

5、交互体验差，每次都要单独打开不同的翻译站点使用

6、目前实现上述功能的软件需要收费，或者体验不够好

如果你对这篇文章感兴趣，而且你想要了解更多关于AI领域的实战技巧，可以关注「技术狂潮AI」公众号。在这里，你可以看到最新最热的AIGC领域的干货文章和案例实战教程。