【大模型应用】小白借助chatgpt开发谷歌插件

Drone_xjw

已于 2024-01-15 15:55:44 修改

阅读量724

点赞数 10

分类专栏： AI应用文章标签： chatgpt

于 2024-01-15 15:53:04 首次发布

本文链接：https://blog.csdn.net/xjw9602/article/details/135602065

版权

AI应用专栏收录该内容

1 篇文章 0 订阅

订阅专栏

大模型正缓慢地渗透进入我们的生活，尽管目前还没有现象级的产品应用，但它已足以让我痴迷于它，我对它能够提升程序员的生产效率笃定无疑。

本次我用一个下午做了一次尝试，使用大模型帮助我开发一个谷歌插件。开发之前，我对谷歌插件的认识仅限于知道如何安装和删除插件。

我想开发一个谷歌插件，功能如下：
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 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到来。

代码内容已分享出来啦。

Drone_xjw

关注

10
点赞
踩
8

收藏

觉得还不错? 一键收藏
1
评论
【大模型应用】小白借助chatgpt开发谷歌插件

基于本插件，我感受到了chatgpt赋能的力量。对于我这样完全不懂前端代码的开发者，最终能够通过对话就把插件完成了，算是完成我一直以来的一个小愿望。相信不久的将来，我连复制粘贴代码都不需要了。
复制链接

扫一扫