自然语言编程：用说话的方式创建你的第一个Chrome插件

G等你下课
133 阅读5分钟

前言

在这个AI技术突飞猛进的时代，软件开发的门槛正在被彻底重构。曾几何时，想要开发一个简单的Chrome插件，你需要投入数月时间学习编程语言、理解浏览器API、解决兼容性问题。而现在，这一切正在发生革命性的变化。

Prompt即编程：AI辅助插件开发实战手册

本文要向你展示的，是一个全新的可能性：即使没有任何编程基础，你也可以在几小时内开发Chrome插件。这不是未来的愿景，而是当下正在发生的现实。通过精心设计的Prompt和强大的AI辅助工具，创意到产品的转化路径被极大地缩短了。

我们将以"Hulk背景插件"这一具体案例为切入点，带你完整了解：

  • 如何用自然语言描述你的插件构想
  • 专业Prompt的构建技巧
  • AI生成代码的优化方法
  • 从开发到发布的完整流程

更重要的是，这种方法不只适用于简单插件。随着你Prompt设计能力的提升，完全可以开发出功能复杂的商业级扩展。许多独立开发者已经通过这种方式，实现了月入数千美元的被动收入。

无论你是想实现个人创意、提升工作效率，还是探索新的职业可能，这篇文章都将为你打开一扇全新的大门。让我们开始这段令人兴奋的AI辅助开发之旅吧！记住，在这个新时代，限制你的不再是技术能力，而是你的想象力。

AI驱动的Chrome插件开发四步法

1. 角色赋予：给你的AI助手一个专业身份

开始前，先给你的AI助手一个明确的专业身份，示例：
"你现在是一名资深的Chrome插件开发专家，精通JavaScript、HTML、CSS和Chrome扩展API，尤其擅长将用户需求转化为简洁高效的插件代码。"

这种角色设定能显著提高AI生成代码的质量和适用性。

2. 任务描述：清晰表达你的插件需求

用自然语言详细描述你想实现的插件功能。示例：
"我需要一个Chrome插件，点击程序图标打开弹出窗口，在窗口中显示默认提示：“改变背景颜色”、“点击下方按钮将当前页面背景色为红色”和一个“改变背景颜色”按钮。"

越详细的需求描述，AI生成的代码就越符合你的预期。

3. 流程细化：补充UI设计和交互细节

进一步细化插件的界面和交互过程：

  • "ux设计图请参考ux.png"。
  • "点击按钮，网页背景改变为红色"

4. 规则约束：设定限制条件和注意事项

明确告知AI需要遵守的规则：

  • "使用最新版Chrome扩展API"
  • "请使用icons文件夹的图标知网应用程序的图标"
  • "代码要有清晰的注释"

实战案例：Hulk背景变色插件开发全流程

效果图如下所示 Snipaste_2025-05-11_12-05-13.png

具体步骤

构建文件目录结构

这里我们以trae作为开发工具，以下图目录结构创建文件夹和文件

Snipaste_2025-05-11_12-12-19.png

icon中存放的是插件不同大小的图标

icon16.png

icon48.png

icon128.png

instruction.txt文件用于存放prompt，其中的内容如下：

你是一个经验丰富的chrome插件开发者。请帮我开发一个名为Hulk的拓展应用。 ux设计图请参考ux.png。

具体交互步骤如下: Step 1: 点击程序图标打开弹出窗口，在窗口中显示默认提示：“改变背景颜色”、“点击下方按钮将当前页面背景色为红色”和一个“改变背景颜色”按钮 Step 2: 点击按钮，网页背景改变为红色

注意以下事项: 请使用icons文件夹的图标知网应用程序的图标

UX.jpg为插件的UI界面布局

UX.jpg

使用Trae的交互对话框

在其中输入内容：请根据 #instruction.txt 当中的需求，帮我开发对应的chrome扩展程序。

Snipaste_2025-05-11_12-30-28.png

参考代码如下

manifest.json

{
  "manifest_version": 3,
  "name": "Hulk",
  "version": "1.0",
  "icons": {
    "16": "icons/icon16.png",
    "48": "icons/icon48.png",
    "128": "icons/icon128.png"
  },
  "action": {
    "default_popup": "popup.html"
  },
  "permissions": ["scripting", "activeTab"]
}

popup.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hulk</title>
    <style>
      body {
        width: 200px;
        padding: 10px;
      }
      p {
        margin: 5px 0;
      }
      button {
        margin-top: 10px;
        padding: 8px;
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <p>改变背景颜色</p>
    <p>点击下方按钮将当前页面背景色为红色</p>
    <button id="changeColorBtn">改变背景颜色</button>
    <script src="popup.js"></script>
  </body>
</html>

popup.js

/**
 * 
 */
//js 面向对象语言
//事件监听器addomcontentloaded'事件
//
document.addEventListener('DOMContentLoaded', () => {
  //获取按钮元素，并添加点击事件监听器
  const changeColorBtn = document.getElementById('changeColorBtn');
  //当按钮被点击时，执行异步函数 （进入事件）
  changeColorBtn.addEventListener('click', async () => {
    // 获取当前活动的标签页
    const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
    // 执行脚本，将当前标签页的背景颜色改为绿色
    await chrome.scripting.executeScript({
      target: { tabId: tab.id },
      func: () => {
        // 获取当前页面的document对象，并修改其背景颜色为绿色
        document.body.style.backgroundColor = 'red';
      }
    });
  });
});

加载插件到浏览器中

进入chrome浏览器中的拓展程序管理界面点击右上角的"加载已解压的拓展程序"按钮，选择项目所在目录即可完成插件加载

Snipaste_2025-05-11_12-43-52.png

Snipaste_2025-05-11_12-47-45.png

结尾

记住，未来的编程可能不再是写代码，而是清晰地描述问题、验证解决方案。AI已经让你站在了"无需传统编程技术也能开发专业插件"的新起点上，现在就开始你的创作之旅吧！

avatar
文章
阅读
粉丝