【大模型应用】小白借助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": ["<all_urls>"],"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 themvar 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 tabdocument.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 themvar 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 tabdocument.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 buttonsvar 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 buttonsdocument.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>