建设网站公司,wordpress 百万数据,网站建设包括哪些项目,北京网站建设模板大模型正缓慢地渗透进入我们的生活#xff0c;尽管目前还没有现象级的产品应用#xff0c;但它已足以让我痴迷于它#xff0c;我对它能够提升程序员的生产效率笃定无疑。
本次我用一个下午做了一次尝试#xff0c;使用大模型帮助我开发一个谷歌插件。开发之前#xff0c;…大模型正缓慢地渗透进入我们的生活尽管目前还没有现象级的产品应用但它已足以让我痴迷于它我对它能够提升程序员的生产效率笃定无疑。
本次我用一个下午做了一次尝试使用大模型帮助我开发一个谷歌插件。开发之前我对谷歌插件的认识仅限于知道如何安装和删除插件。
我想开发一个谷歌插件功能如下
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: CtrlShiftY,mac: MacCtrlShiftY},description: Opens popup}}
}然后我们需要在background.js文件中监听快捷键事件
chrome.commands.onCommand.addListener(function(command) {if (command _execute_browser_action) {chrome.browserAction.openPopup();}
});接下来我们需要在popup.html文件中定义弹窗的界面
!DOCTYPE html
html
headlink relstylesheet typetext/css hrefpopup.css
/head
bodydiv idtab classtabbutton classtablinks onclickopenTab(event, Translate)Translate/buttonbutton classtablinks onclickopenTab(event, FunctionName)Function Name/button/divdiv idTranslate classtabcontenttextarea idinputTranslate placeholderEnter text.../textareabutton idbtnTranslateTranslate/buttonp idoutputTranslate/p/divdiv idFunctionName classtabcontenttextarea idinputFunctionName placeholderEnter description.../textareabutton idbtnFunctionNameGenerate Function Name/buttonp idoutputFunctionName/p/divscript srcpopup.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 classtabcontent and hide themvar tabcontent document.getElementsByClassName(tabcontent);for (var i 0; i tabcontent.length; i) {tabcontent[i].style.display none;}// Get all elements with classtablinks and remove the class activevar 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 classtablinks onclickopenTab(event, Translate)Translate/buttonchatgpt立马纠正自己的错误并给出下面的回复
你需要将新的事件监听器代码添加到popup.js文件中并确保你的HTML元素有对应的ID。下面是整合后的popup.js文件的完整代码
// Open the specified tab
function openTab(evt, tabName) {// Get all elements with classtabcontent and hide themvar tabcontent document.getElementsByClassName(tabcontent);for (var i 0; i tabcontent.length; i) {tabcontent[i].style.display none;}// Get all elements with classtablinks and remove the class activevar 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 classtablinks idtranslateTabTranslate/button
button classtablinks idfunctionNameTabFunction Name/button因为我完全不懂前端代码所以我只会把插件的报错告诉chatgpt而chatgpt就会帮我解决问题。最终经过几轮的问答我给该插件赋予了翻译功能(中译英、英译中)、生成函数名功能(调用文心大模型调用国内的接口较快也可改为调用openAI)。至此我的插件第一步开发结束啦后续继续完善。
总结
基于本插件我感受到了chatgpt赋能的力量。对于我这样完全不懂前端代码的开发者最终能够通过对话就把插件完成了算是完成我一直以来的一个小愿望。相信不久的将来我连复制粘贴代码都不需要了。感谢chatgpt期待更强大的AI到来。
代码内容已分享出来啦。
