我使用GPT在15分钟内用零前端知识创建了一个名叫GitHub Searcher的Chrome扩展

要点:

• 作者想开发一个右键搜索GitHub项目的Chrome插件，但前端知识有限。

• 作者将想法简述给GPT，GPT生成了完整可用的代码。

• 虽有小问题，但GPT生成代码基本实现了预期功能，仅需少量修改。

9月11日 消息:没有前端经验，使用GPT在15分钟内就开发了一个Chrome扩展程序，你敢信吗?作者Lorain在dev.to上分享了他的开发经验。

作者称他希望通过右键菜单直接在当前页或新标签页搜索选中的文本在GitHub上的项目。但作者前端知识有限，便将想法描述给GPT，GPT快速生成了可工作的代码，包括清单文件、背景脚本、右键菜单等。

提示如下:

我:通过按住鼠标并拖动鼠标来选择网页中的部分文本，这个操作叫什么?

GPT:在网络浏览器中，通过按下并拖动鼠标左键来选择一部分文本的操作通常称为“文本选择”或“文本拖动”。此操作允许用户突出显示网页上的文本，以便进行复制、剪切或执行搜索或翻译等其他操作。这是阅读网页、复制信息或引用文本时的常见交互。

我:在浏览器中点击鼠标右键打开菜单，这个操作叫什么?

GPT:在网络浏览器中，通过鼠标右键单击打开菜单的操作通常称为“上下文菜单”操作，有时也称为“右键菜单”。此菜单通常包含与您右键单击的元素或区域相关的选项，允许您执行各种操作，例如打开链接、保存图像、复制文本等。此上下文菜单的内容可能会有所不同，具体取决于您右键单击的内容和浏览器的设置。它提供了一种快速访问常用功能的便捷方法。

我:在某些 Chrome 扩展程序中，右键菜单通常有一个子菜单，例如“图像助手”，其中包含各种支持的操作，例如“从此页面提取图像”和“从此页面下载图像”。这些有官方术语吗?

GPT:在 Chrome 扩展中，右键单击菜单中的这些子菜单包含多个相关操作，通常称为“上下文菜单子菜单”或“右键单击子菜单”。这些子菜单允许扩展开发人员将扩展支持的不同功能组织到更大的选项组中，从而提供更多的功能选择和改进的用户体验。在此子菜单中，每个选项通常代表扩展支持的特定操作或功能。在您提到的示例中，“图像助手”子菜单包括“从此页面提取图像”和“从此页面下载图像”等操作。

值得注意的是，对此没有官方标准术语，不同的扩展开发人员可能使用不同的术语来描述此功能。然而，一般来说，此类子菜单的目的是组织和呈现多个相关的操作选项。

我:我想开发一个名为“ghs”的 Chrome 扩展（GitHub Searcher）。该扩展的使用方法如下:

这是一个实际的用例:在浏览网页时，我选择单词“helloworld”，然后右键单击并从“GitHub Searcher”子菜单中选择“新选项卡”选项。然后浏览器应该打开一个新选项卡并访问该 URLgithub.com/search?q=helloworld&type=repositories。

现在，我需要你的帮助来开发这个扩展。请列出每个步骤并在代码中添加必要的注释以帮助我理解它。

GPT:开发 Chrome 浏览器扩展涉及几个步骤。我将列出每个步骤并向代码添加注释以帮助您理解它。

第1步:创建扩展目录和清单文件

首先，您需要为您的扩展创建一个本地目录，并manifest.json在该目录中创建一个清单文件 （ ）。清单文件用于定义扩展的基本信息、权限和功能。

//manifest.json{

第2步:创建扩展图标

将扩展图标 （icon.png） 添加到扩展目录。该图标代表您的分机。

第3步:创建上下文菜单

在background.js文件中，创建上下文菜单，以便用户可以右键单击选定的文本来打开扩展的子菜单。这是一个示例background.js文件:

//background.jschrome.contextMenus.create（{

第四步:创建扩展弹出页面

创建一个弹出页面 （popup.html），当用户单击扩展图标时，该页面将显示信息或设置。您可以根据需要自定义此页面。

第5步:加载扩展

最后，在 Chrome 浏览器中加载您的扩展程序:

完成这些步骤后，当用户选择文本并右键单击时，您的扩展应该能够显示“GitHub Searcher”子菜单，并且当“当前选项卡”或“新选项卡”时，它应该打开相应的 GitHub 搜索页面被选中。

请注意，这是一个基本示例，您可以根据需要进一步扩展和自定义扩展程序的界面。另外，请确保您遵循 Chrome 网上应用店的发布指南和最佳实践。成功发布后，用户可以从 Chrome 应用商店安装并使用您的扩展程序。

GPT生成的代码基本实现了搜索功能，仅需解决一些小问题如补充弹出页面。这显示GPT可以帮助开发者快速实现想法，节省开发时间，即使对领域不熟悉。通过与GPT的互动对话，开发者可以将想法转化为可执行的代码。本次开发经验令人鼓舞，显示GPT的潜力。

以下是GitHub Searcher的详细介绍:

GitHub Searcher（GHS）是一个方便实用的Chrome浏览器扩展，它能让你从任意网页上选择的文本快速地在GitHub上进行代码搜索，大大提高软件开发和技术研究的效率。

项目地址:https://github.com/justlorain/ghs

GHS扩展的核心优势在于它打通了浏览器界面和GitHub的关联，让原本需要多步操作的代码搜索行为变得简单方便。只需在任意网页上选择关键词、代码片段或函数名，右键通过GHS扩展菜单选择在当前页面或新页面进行GitHub搜索，就可以快速定位到相关开源代码仓库或项目文件。

GHS扩展最大限度地节省开发人员的时间成本，不需要在浏览器界面和GitHub网站间来回切换，也不需要重新组织搜索关键词，直接从选中的文本激活GitHub代码搜索，大大提升代码编写和技术调研的效率。这对经常需要查阅技术文档的开发者来说，无疑是极大的便利。

GHS扩展还具备轻量级的优势，安装简单方便，对系统资源消耗非常小，不会产生明显的性能负担，可以无缝集成到开发者的工作流程中。总体来说，GHS是增强开发效率的绝佳工具，对于经常在GitHub上搜索代码的技术人员来说是必备的 Chrome扩展。