【大模型应用】小白借助chatgpt开发谷歌插件
大模型正缓慢地渗透进入我们的生活，尽管目前还没有现象级的产品应用，但它已足以让我痴迷于它，我对它能够提升程序员的生产效率笃定无疑。
本次我用一个下午做了一次尝试，使用大模型帮助我开发一个谷歌插件。开发之前，我对谷歌插件的认识仅限于知道如何安装和删除插件。
我想开发一个谷歌插件，功能如下：
1. 通过快捷键FY触发弹窗
2. 弹窗中有两个tab，一个是翻译，一个是函数命名
3. 翻译tab的功能是我输入英文自动转换为中午呢、我输入中文则自动转换为英文
4. 函数命名tab则可以根据我输入的描述，自动生成5个对应的代码命名
以上功能我需要借助大模型实现，帮我调用openAI的接口。请首先提供完整的思路给我
当输入上述文案时，chatgpt会回复完整的思路，参考思路后可让其提供代码
请根据上述的思路，给我完整的代码，并给我注释
大模型给我的回复是
首先，我们需要在manifest.json文件中定义插件的基本信息和权限：
{
"manifest_version": 3,
"name": "My Extension",
"version": "1.0",
"permissions": ["storage"],
"host_permissions": ["" ],
"action": {
"default_popup": "popup.html",
"default_icon": {
"16": "images/icon16.png",
"48": "images/icon48.png",
"128": "images/icon128.png"
}
},
"background": {
"service_worker": "background.js"
},
"commands": {
"_execute_action": {
"suggested_key": {
"default": "Ctrl+Shift+Y",
"mac": "MacCtrl+Shift+Y"
},
"description": "Opens popup"
}
}
}
然后，我们需要在background.js文件中监听快捷键事件：
chrome.commands.onCommand.addListener(function(command) {
if (command === "_execute_browser_action") {
chrome.browserAction.openPopup();
}
});
接下来，我们需要在popup.html文件中定义弹窗的界面：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="popup.css">
</head>
<body>
<div id="tab" class="tab">
<button class="tablinks" onclick="openTab(event, 'Translate')">Translate</button>
<button class="tablinks" onclick="openTab(event, 'FunctionName')">Function Name</button>
</div>
<div id="Translate" class="tabcontent">
<textarea id="inputTranslate" placeholder="Enter text..."></textarea>
<button id="btnTranslate">Translate</button>
<p id="outputTranslate"></p>
</div>
<div id="FunctionName" class="tabcontent">
<textarea id="inputFunctionName" placeholder="Enter description..."></textarea>
<button id="btnFunctionName">Generate Function Name</button>
<p id="outputFunctionName"></p>
</div>
<script src="popup.js"></script>
</body>
</html>
在popup.css文件中定义弹窗的样式：
/* Style the tab */
.tab {
overflow: hidden;
border: 1px solid #ccc;
background-color: #f1f1f1;
}
/* Style the buttons inside the tab */
.tab button {
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
}
/* Change background color of buttons on hover */
.tab button:hover {
background-color: #ddd;
}
/* Create an active/current tablink class */
.tab button.active {
background-color: #ccc;
}
/* Style the tab content */
.tabcontent {
display: none;
padding: 6px 12px;
border: 1px solid #ccc;
border-top: none;
}
最后，我们需要在popup.js文件中实现弹窗的功能：
// Open the specified tab
function openTab(evt, tabName) {
// Get all elements with class="tabcontent" and hide them
var tabcontent = document.getElementsByClassName("tabcontent");
for (var i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
// Get all elements with class="tablinks" and remove the class "active"
var tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
// Show the current tab, and add an "active" class to the button that opened the tab
document.getElementById(tabName).style.display = "block";
evt.currentTarget.className += " active";
}
// Call the Google Translate API
function translate(text) {
// TODO: Implement this function
}
// Call the OpenAI API
function generateFunctionName(description) {
// TODO: Implement this function
}
// Add event listeners to the buttons
document.getElementById("btnTranslate").addEventListener("click", function() {
var text = document.getElementById("inputTranslate").value;
translate(text);
});
document.getElementById("btnFunctionName").addEventListener("click", function() {
var description = document.getElementById("inputFunctionName").value;
generateFunctionName(description);
});
当我得到上述的回复后，我就在本地新建一个目录，并按照chatgpt给的命名创建文件、粘贴内容。
在谷歌浏览器中选择该目录插件后，触发该插件出现报错，我将报错信息发送给chatgpt：
出现报错如下：
Refused to execute inline event handler because it violates the following Content Security Policy directive: "script-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-...'), or a nonce ('nonce-...') is required to enable inline execution. Note that hashes do not apply to event handlers, style attributes and javascript: navigations unless the 'unsafe-hashes' keyword is present.
<button class="tablinks" onclick="openTab(event, 'Translate')">Translate</button>
chatgpt立马纠正自己的错误并给出下面的回复：
你需要将新的事件监听器代码添加到popup.js文件中，并确保你的HTML元素有对应的ID。下面是整合后的popup.js文件的完整代码：
// Open the specified tab
function openTab(evt, tabName) {
// Get all elements with class="tabcontent" and hide them
var tabcontent = document.getElementsByClassName("tabcontent");
for (var i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
// Get all elements with class="tablinks" and remove the class "active"
var tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
// Show the current tab, and add an "active" class to the button that opened the tab
document.getElementById(tabName).style.display = "block";
evt.currentTarget.className += " active";
}
// Call the Google Translate API
function translate(text) {
// TODO: Implement this function
}
// Call the OpenAI API
function generateFunctionName(description) {
// TODO: Implement this function
}
// Add event listeners to the buttons when the DOM is fully loaded
document.addEventListener('DOMContentLoaded', function () {
// Event listeners for tab buttons
var translateTab = document.getElementById('translateTab');
var functionNameTab = document.getElementById('functionNameTab');
if (translateTab) {
translateTab.addEventListener('click', function(event) {
openTab(event, 'Translate');
});
}
if (functionNameTab) {
functionNameTab.addEventListener('click', function(event) {
openTab(event, 'FunctionName');
});
}
// Event listeners for action buttons
document.getElementById("btnTranslate").addEventListener("click", function() {
var text = document.getElementById("inputTranslate").value;
translate(text);
});
document.getElementById("btnFunctionName").addEventListener("click", function() {
var description = document.getElementById("inputFunctionName").value;
generateFunctionName(description);
});
});
请注意，我在添加事件监听器之前添加了if语句来检查元素是否存在，以避免在元素不存在时尝试添加事件监听器导致的错误。
同时，确保你的HTML文件中的按钮元素有对应的ID，如下所示：
<button class="tablinks" id="translateTab">Translate</button>
<button class="tablinks" id="functionNameTab">Function Name</button>
因为我完全不懂前端代码，所以我只会把插件的报错告诉chatgpt，而chatgpt就会帮我解决问题。最终经过几轮的问答，我给该插件赋予了翻译功能(中译英、英译中)、生成函数名功能(调用文心大模型，调用国内的接口较快，也可改为调用openAI)。至此，我的插件第一步开发结束啦，后续继续完善。
总结
基于本插件，我感受到了chatgpt赋能的力量。对于我这样完全不懂前端代码的开发者，最终能够通过对话就把插件完成了，算是完成我一直以来的一个小愿望。相信不久的将来，我连复制粘贴代码都不需要了。感谢chatgpt，期待更强大的AI到来。
代码内容已分享出来啦。