likes
comments
collection
share

完全不懂前端的我用 GPT 15 分钟开发了一个 Chrome 插件

作者站长头像
站长
· 阅读数 11

前言

平常阅读的时候作者经常会提到一些项目或者相关资料，并且有时候只是单纯的文本，没有对应的链接，如果我想要去了解这个项目的详细信息就需要自己 Google 或者通过其他方式来查找。我经常做的一件事就是：

  • 复制一个项目名；
  • 开一个 new tab；
  • 访问 GitHub；
  • 粘贴查找；

可能是最近重复这个过程过于频繁，就萌生了开发一个插件来简化这个过程的想法。

于是几分钟后我写好了我的第一个 Chrome 扩展 GitHub Searcher (GHS)。

预期效果

我想要插件实现的效果非常简单，或者说简陋：将我选中的文本在 GitHub 中搜索，并且可以选择在当前 tab 还是新的 tab 进行搜索，有了这个效果后我就可以将前面提到的四步简化为以下两步

  • 选中需要查找的内容；
  • 在右键菜单中选择是在当前 tab 查找还是在新开一个 tab 查找；

开发思路

尝试在 GitHub 中查找几个仓库后发现 GitHub 中查找仓库的 URL 为：

github.com/search?q=test&type=repositories

其中参数 q 对应的是查找的内容，默认的 type 为 repositories，于是想要实现预期效果就变的非常简单了，只要通过某种方式获取到选中的文本，然后拼接并访问 URL 即可。

开发过程

有了基本的思路后就可以开始开发了，我自己使用最多的是 Chrome，于是就通过 Chrome 扩展来实现。

快速过了一遍官方提供的 Development basics，了解了一个 Chrome 扩展的项目框架以及必要的文件，可是我对前端开发的了解仅限于几个常见的 HTML 标签，这时候只能靠我的好大哥 GPT 了。

将前面的思路整理成 GPT 可以理解的语言后喂给他，然后。。。然后 GPT 就把所有的代码写好了。

刚开始我是没有抱太高的期望的，能帮我写一些使用 Chrome API 的样例，自己再照猫画虎改改能跑就行。结果当我把 GPT 吐出来的代码复制到项目里并用 Chrome 加载扩展后，我期望的功能竟然完全实现了！！！

我的 Prompt 也非常简单，如下：

我： 在浏览器中通过长按鼠标并滑动来选中一部分文本的操作叫做什么

GPT： 在浏览器中，通过长按鼠标左键并滑动来选中一部分文本的操作通常称为 "文本选择" 或 "文本拖选" 操作。这个操作允许用户在网页上选择文本，以便复制、剪切或执行其他操作，如搜索或翻译。这在浏览网页、复制信息或引用文本时非常常见。

我： 在浏览器中通过鼠标右键打开一个菜单的操作叫做什么

GPT： 在浏览器中，通过鼠标右键点击打开一个菜单的操作通常称为 "上下文菜单" 操作，有时也被称为 "右键菜单"。这个菜单通常包含与所点击的元素或区域相关的选项，这些选项可以执行各种操作，如在链接上打开链接、保存图像、复制文本等。这个上下文菜单根据用户所点击的具体内容和浏览器的设置而变化，提供了一种快速访问常用功能的方式。

我： 在一些 chrome 插件中，右键菜单中往往会多一个选项组，比如 “图片助手”，这个选项组中会有一些可以这个插件支持的操作，比如 “提取本页面的图片” 和 “下载本页面图片”，这些东西有没有正式叫法

GPT： 在 Chrome 插件中，右键菜单中的这种包含多个相关操作的选项组通常称为 "上下文菜单子菜单" 或 "右键子菜单"。这个子菜单允许插件开发者将插件支持的不同功能组织在一个更大的选项组中，以提供更多的功能选项，以及更好的用户体验。在这个子菜单中，每个选项通常代表一个插件支持的特定操作或功能。在你提到的例子中，"图片助手" 子菜单包含了 "提取本页面的图片" 和 "下载本页面图片" 等操作。

需要注意的是，这个名称并没有一个官方的标准，不同的插件开发者可能会使用不同的术语来描述这种功能，但通常来说，这种子菜单的作用是组织和呈现多个相关操作选项。

我： 我现在想要开发一个叫 ghs (GitHub Searcher) 的 chrome 浏览器插件，这个插件的使用方式是：

  1. 用户使用鼠标在网页中滑动选中一些词语或句子，即 “文本选择” 操作；
  2. 用户通过鼠标右击打开上下文菜单并选择一个名为 “GitHub Searcher” 的上下文子菜单，这个子菜单中有 "Currect Tab" 和 "New Tab" 两个选项；
  3. 选中文本后通过点击这两个选项可以分别在当前 tab 或一个新的 tab 中打开这个 url github.com/search?q={{ sample }}&type=repositories，其中 {{ }} 表示用户选中的文本；

下面是一个实际的使用示例： 我在浏览一个网页时，选中了 helloworld 这个词，然后右击鼠标选择 GitHub Searcher 子菜单中的 New Tab 选项，浏览器此时开启一个新的 tab 并访问 github.com/search?q=helloworld&type=repositories 这个 URL。

现在我需要你来帮助我完成这个插件的开发，列出每一个步骤并对代码添加必要的注释来帮助我理解。

GPT： 开发一个 Chrome 浏览器插件需要几个步骤，我将逐一列出每个步骤，并添加注释以帮助你理解代码。

步骤 1: 创建插件目录和清单文件

首先，你需要在本地创建一个插件目录，并在该目录下创建一个清单文件 (manifest.json)。清单文件用于定义插件的基本信息、权限和功能。

// manifest.json

{
  "manifest_version": 3,
  "name": "GitHub Searcher",
  "version": "1.0",
  "description": "Search GitHub repositories from selected text.",
  "permissions": ["contextMenus"],
  "icons": {
    "48": "icon.png"
  },
  "background": {
    "service_worker": "background.js"
  },
  "permissions": ["activeTab", "contextMenus"],
  "action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "icon.png",
      "48": "icon.png",
      "128": "icon.png"
    }
  }
}

步骤 2: 创建插件图标

在插件目录中添加插件图标（icon.png），这是用于表示你的插件的图标。

步骤 3: 创建上下文菜单

在 background.js 文件中创建上下文菜单，以便用户可以右键点击选中文本后打开插件子菜单。以下是一个示例 background.js 文件：

// background.js

chrome.contextMenus.create({
  id: "githubSearcherContextMenu",
  title: "GitHub Searcher",
  contexts: ["selection"]
});

chrome.contextMenus.create({
  id: "githubSearcherCurrentTab",
  title: "Current Tab",
  parentId: "githubSearcherContextMenu",
  contexts: ["selection"]
});

chrome.contextMenus.create({
  id: "githubSearcherNewTab",
  title: "New Tab",
  parentId: "githubSearcherContextMenu",
  contexts: ["selection"]
});

// 添加点击事件监听器
chrome.contextMenus.onClicked.addListener((info, tab) => {
  if (info.menuItemId === "githubSearcherCurrentTab") {
    openGitHubSearchPage(info.selectionText, false);
  } else if (info.menuItemId === "githubSearcherNewTab") {
    openGitHubSearchPage(info.selectionText, true);
  }
});

// 打开 GitHub 搜索页面的函数
function openGitHubSearchPage(selectedText, newTab) {
  const searchUrl = `https://github.com/search?q=${encodeURIComponent(selectedText)}&type=repositories`;
  if (newTab) {
    chrome.tabs.create({ url: searchUrl });
  } else {
    chrome.tabs.update({ url: searchUrl });
  }
}

步骤 4: 创建插件弹出页面

创建一个弹出页面 (popup.html)，用于在用户点击插件图标时显示插件的信息或设置。你可以根据需要自定义此页面。

步骤 5: 加载插件

最后，在 Chrome 浏览器中加载你的插件：

  1. 打开 Chrome 浏览器并进入扩展程序管理页面（chrome://extensions/）。
  2. 启用 "开发者模式"。
  3. 点击 "加载已解压的扩展程序" 按钮，并选择你插件的目录。

完成了这些步骤后，你的插件应该能够在用户选中文本并右键点击后显示 "GitHub Searcher" 子菜单，并在选择 "Current Tab" 或 "New Tab" 后打开相应的 GitHub 搜索页面。

请注意，以上是一个基本示例，你可以根据自己的需求进行进一步扩展和美化插件界面。同时，确保遵循 Chrome Web Store 的发布准则和最佳实践。成功发布插件后，用户就可以在 Chrome Web Store 中安装和使用你的插件了。

可以看到前面三步主要是在一些我不太确认的术语方面和 GPT 达成一致，第四步才开始结合这些术语以及自己的思路来让 GPT 完成代码的编写。

正如我之前所说，GPT 提供的代码是基本正确的并且安装后可以完成我想要的效果，但是还是有一些瑕疵需要修改，比如并没有提供 popup.html 以及没有提示需要设置图标等。

但这都不是大问题，简单设计一个好看的图标后再补充上 popup.html (optional)，README，LICENSE 等文件后我们的插件就完成了 :)

完全不懂前端的我用 GPT 15 分钟开发了一个 Chrome 插件

总结

以上就是我靠 GPT 从 0 开发一个 Chrome 扩展的全过程，开发这么顺利的很大一部分原因就是这个插件的功能实在是太简单了hhhh，不过也确实可以帮我省点事。

由于在 Chrome 商店发布插件太麻烦了就没搞，如果您对这个插件感兴趣可以自行下载源码然后手动加载到您的 Chrome 中，当然如果您对这个扩展感兴趣，欢迎给这个项目点个 Star，以上！

参考列表