前言
这里主要是提供一个思路，如何通过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领域的干货文章和案例实战教程。