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

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

前言

这里的主要目的是提供如何通过ChatGPT开发自定义Chrome浏览器扩展的想法。你可以根据你的需要。基本上，您不需要具备任何技术技能。您必须了解基本的计算机技能并拥有ChatGPT。使用条件和环境足够。

除了聊天工具chatGPT之外，前面提到的很多AI编程工具也可以完成这个任务，例如带有Chat、Chat模块的GitHubCopilot、CodeiumChat模块以及BitoAI的结合代码生成功能的Chat模块都可以实现并实现。它不限于使用。聊天GPT。如何安装和使用AI工具可以参考之前的文章。

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

这并不是小事，但这主要取决于你与ChatGPT通信的方式，规则是否足够清晰：生成的代码越清晰，就越准备好，错误越少，速度就越快。

1、环境准备

1.1.爱聊

官网地址：https://c.aichat.la/#/?p14980

如果您没有帐户或没有特定的网络条件，您可以尝试AiChat。它是完全免费的，不需要魔法。在中国可以直接访问。这也是我比较常用的一个工具。我在之前的文章中经常单独介绍过。更方便的是速度快。您可以执行某个功能或选择一个内置功能。没有必要一直经常写提示词。

中国很多人或者公司已经形成了一些形象。用过的人都知道，要么需要输入Key（这个方法很安全，输入Key也很容易，我有2个Key莫名其妙的被花掉了），要么及时注册，限制字母数量每天，很难有好的体验。

因此建议您要么自行设置并单独玩，要么使用此类不需要尝试密钥的网站。

1.2.人工智能编程工具

我们也可以直接在GitHubCopilot、Codeium和BitoAI上进行测试：如果您不是学生并且没有免费帐户，您可以选择Codeium或BitoAI，如果可能，请使用GitHubCopilot。具体训练和训练的使用可以参考我之前发表的文章，这里不再赘述。

2.开发插件

2.1.资金文件结构

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

ChatGPT给了我创建Chrome扩展程序的五个步骤-设计一个文件夹结构以在Chrome中本地运行该程序。

然后就获得了Chrome扩展程序的文件结构的副本。

为了节省您的时间，下面的图表简要定义了这些图像的用途：

1)、manifest.josn

有关您的扩展的元数据，例如名称、版本和权限。anifest是GoogleChromeAPI的专有名称。有一个V3。

2）、人民

当用户在Chrome工具栏中单击您的扩展程序图标时，就会出现人员。该文件定义人员的行为并包含处理与用户的人员交互的代码。

3）、people.html和style.css

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

2.2.创建清单.json

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

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

{

表现形式,3

“名称”：“缓存清理器”

“版本”：“1.0”，

“description”:”清除浏览器的简单Chrome扩展他们受伤了“，

“权限”：[“存储”，“选项卡”，“浏览数据”]；

“行动”：{

“默认图标”：{

“16”:”icon-16.png”,

“32”:”icon-32.png”,

“48”:”icon-48.png”,

“128”:”icon-128.png”

},

“defaultpopup”：“people.html”

},

“背景”：{

“助手”：“背景.js”

}

}

Manifest.json文件包含以下信息：

“manifestversion”:2-指定manifest.json文件的版本号。Chrome扩展程序版本2或更高版本必须使用manifest.json文件。

“name”:”MyExtension”-指定扩展名。

“version”:”1.0″-指定扩展的版本号。

“描述”：“这是我的第一个Chrome扩展。”-指定扩展的描述。

“icons”:{“16″:”icon16.png”,”48″:”icon48.png”,”128″:”icon128.png”}-指定扩展程序的图标，包括三个不同大小的文档图标。

“permissions”:[“tabs”,”activeTab”,”storage”]-指定扩展所需的权限，包括访问导航选项卡、当前选项卡和本地存储。

“background”:{“scripted”:[“background.js”],”persistent”:false}-指定后台页面扩展，包括JavaScript文件和指示是否应保留后台页面的标志。

“browseraction”:{“defaulticon”:”icon16.png”,”defaulttitle”:”MyExtension”,”defaultpopup”:”popup.html”}-指定浏览器操作的扩展名，包括默认图标、标题和窗口。

2.3.创建一个名为background.js的服务器文件

Chrome扩展服务的使用是可选的，不是必需的。操作员可以实现一些高级功能，例如在线缓存、电子数据同步等。但是，如果您的扩展不需要这些功能，那么您可以将其设为工作线程。

使用操作员的主要优点是使您的分机更加高效和稳定。在使用运算符的情况下，可以将一些处理逻辑移至线程中，以防止主线程阻塞。此外，workerworker还可以在离线时提供基本功能，例如在线和离线缓存访问。

因此，您应该根据您分机的需要来决定是否使用员工。如果您的扩展只需要一个简单的功能，例如在浏览器中显示一些信息或滚动页面内容，您可能不需要使用工作人员。但是，如果您的扩展需要实现一些高级功能，例如设置视频或同步程序，那么使用运算符可能更合适。

在我的background.js文件中，我要求ChatGPT为此处描述的操作员生成注释：

/*

Chrome扩展的ServiceWorker

至少在安装扩展时我们会处理它

收到订单后我们一定会处理

*/

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

/*

Chrome扩展的ServiceWorker

至少在安装扩展时我们会处理它

收到订单后我们一定会处理

*/

//安装扩展后，请使用console.log输出信息；

chrome.runtime.onInstalled.addListener(function(){

console.log(“扩展”长的”）;

});

//当收到消息时，发送响应并使用console.log输出信息。

chrome.runtime.onMessage.addListener(function(发送者请求sendResponse){

console.log(“消息已收到”);

sendResponse(“消息已收到”);

});

2.4.创建people.html文件

在文件people.html中，我们告诉我们希望人物如何出现。这是用户单击扩展图标时将看到的窗口。

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

html>

html>

头部

元字符集“utf-8”>

标题>清除缓存标题>

linkrel”stylesheet”type”text/css”href”style.css”>

头部

身体

h1>清除缓存h1>

Buttonid”allHistory”>所有历史按钮>

Buttonid“pastMonth”>过去一个月按钮>

Buttonid“pastWeek”>过去一周按钮>

Buttonid“过去一天”>过去一天按钮>

Buttonid“过去一小时”>过去一小时按钮>

Buttonid”pastMinute”>过去一分钟按钮>

pid“最后清除”>p>

scriptrc”popul.js”>脚本>

身体

html>

2.5.测试feed扩展

在开发完成之前，我们可以对扩展进行测试，看看扩展的UI效果是否符合我们的预期。

在Chrome浏览器中导航至chrome://extensions/。开发商刚刚转身。按“劳斯解压缩”。用于上传文件的Chrome扩展程序文件夹。加载后，您将能够测试您的扩展。这就是我喜欢我的脸的地方；

2.6。创建popup.js文件以添加交互

描述您的扩展程序中的交互逻辑和按钮点击，ChatGPT将帮助生成所有交互逻辑代码。如果恐惧不需要，你可以继续改变它。这是我使用的描述：

/*

这是一个用于清理浏览器的Chrome扩展。

按钮点击手柄：

有一个带有“allHistory”所有缓存历史记录的按钮

与“pastMonth”建立链接将分解过去一个月的缓存历史记录

有一个带有“pastWeek”的按钮将告诉您过去一周的缓存历史记录

具有id“pastDay”的链接，清除过去一天的历史记录缓存

使用“过去一小时”按钮关闭过去一小时的历史记录缓存

有一个ID为“pastMinute”的按钮会将历史缓存分解到过去一分钟

分娩的任务可以

将日期和时间转换为人类可读的格式

在“lastCleared”段落中添加“缓存已成功清除”以及日期和时间。

*/

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

/*

这是一个用于清理浏览器的Chrome扩展。

按钮点击手柄：

有一个带有“allHistory”所有缓存历史记录的按钮

与“pastMonth”建立链接将分解过去一个月的缓存历史记录

有一个带有“pastWeek”的按钮将告诉您过去一周的缓存历史记录

具有id“pastDay”的链接，清除过去一天的历史记录缓存

使用“过去一小时”按钮关闭过去一小时的历史记录缓存

有一个ID为“pastMinute”的按钮会将历史缓存分解到过去一分钟

分娩的任务可以

将日期和时间转换为人类可读的格式

在“lastCleared”段落中添加“缓存已成功清除”以及日期和时间。

*/

//设置日期和时间格式

函数转换rtDate(日期){

letformattedDatenewDate(日期);

varoptions{weekday:’long’,year:’numerics’,month:’long’,day:’numerics’};

returnformattedDate.toLocaleDateString(“zh-CN”,options);

}

//将“缓存清除成功”添加到ID为“lastCleared”的段落中

函数addCleared(){

varpdocument.getElementById(“lastCleared”);

letcurrentDatenewDate();

p.innerHTML“Doneclearedcache”convertDate(currentDate);

}

//清除所有缓存历史记录

document.getElementById(“allHistory”).addEventListener(“click”,function(){

chrome.browsingData.removeCache({“来自其中”:0},function(){

添加清除（）；

});

});

//清除一个月的缓存历史记录

document.getElementById(“pastMonth”).addEventListener(“click”,function(){

letdatenewDate();

日期.setMonth(日期.getMonth()-1);

chrome.browsingData.removeCache({“since”:date.getTime()},function(){

添加清除（）；

});

});

//清除过去一周的缓存历史记录

document.getElementById(“pastWeek”).addEventListener(“click”,function(){

letdatenewDate();

date.setDate(date.getDate()-7);

chrome.browsingData.removeCache({“since”:date.getTime()},function(){

添加清除（）；

});

});

//清除过去一天的缓存历史记录

document.getElementById(“pastDay”).addEventListener(“click”,function(){

letdatenewDate();

date.setDate(date.getDate()-1);

chrome.browsingData.removeCache({“since”:date.getTime()},function(){

添加清除（）；

});

});

//清除过去一小时的历史缓存

document.getElementById(“过去时间”).addEventListener(“点击”,function(){

letdatenewDate();

日期.setHours(日期.getHours()-1);

chrome.browsingData.removeCache({“since”:date.getTime()},function(){

添加清除（）；

});

});

//清除过去一分钟的缓存历史记录

document.getElementById(“pastMinute”).addEventListener(“click”,function(){

letdatenewDate();

date.setMinutes(date.getMinutes()-1);

chrome.browsingData.removeCache({“来自其中”:date.getTime()},函数(){

添加清除（）；

});

});

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

比如说ChatGPT，您要描述的扩展类型。最终生成的style.css如下所示：

/*

调整Chrome弹出窗口的延伸和高度，使其更宽更高；

使用友好的颜色和易于访问的字体；

使h1元素易于阅读

鼠标触发时突出显示，

单击按钮时突出显示

将按钮排成一排并居中，但间距均匀；

使段落加粗且易于阅读。

*/

身体

宽度：400px；

高度：500px；

背景颜色：#f5f5f5；

字体系列：Arial；

字体大小：16px；

颜色：#333；

顶部边距：20px；

}

h1{

字体大小：24px；

顶部边距：20px；

下边距：20px；

颜色：#333；

文本对齐：居中；

}

按钮{

显示：块；

宽度：80%；

保证金：0自动；

下边距：10px；

内边距：10px；

边框：无；

边框半径：5px；

背景颜色：#4CAF50；

白颜色;

光标：指针；

}

按钮：启动，按钮：活动{

背景颜色：#333；

颜色：#fff；

}

#最后清除{

字体粗细：粗体；

顶部边距：20px；

文本对齐：居中；

颜色：#333；

}

开发的项目目录是这样的。然后在GoogleChrome中加载并安装即可使用：

三、发??展事业

我们在这里给大家一个任务让大家尝试一下，以后我也会考虑使用ChatGPT来实现。

为什么需要重新发明轮子来实现多语言翻译的插件扩展？主要原因有以下这些：

1、日常工作需要大量运输需求的场景，对运输质量有一定的要求。

2.可以接入各种转账服务（API方式），如腾讯、阿里巴巴、百度、Google、DeepL、微软、亚马逊、OpenAI等。

3.可以直接翻译文字，也可以一键翻整个网页。

4.由于网络限制，无法使用Microsoft、Amazon、OpenAI、Google等翻译服务。

5、交互体验差。

6.目前已加载完成上述功能的软件，或者体验不够好。