什么？小白也可以用大模型对Chrome扩展开发?

LeeAt
298 阅读4分钟

前言

在当今的软件开发领域，大模型和提示词工程正逐渐成为一股不可忽视的力量，深刻地影响着传统应用开发的方式。本文将通过一个具体的实例 —— 开发一个 Chrome 扩展应用，实现将网页背景颜色修改为绿色的功能，来展现提示词工程（Prompt Engineering）在应用开发中的独特作用和显著优势。

传统编程对扩展的开发

在传统的 Chrome 扩展应用开发中，开发者需要进行诸多准备工作。首先，要制作一个 Demo，以便更好地规划和展示扩展的功能。同时，还需要深入学习基础的 Web 开发技术，包括 HTML、CSS 和 JavaScript 等，这些是构建 Chrome 扩展的基础。此外，掌握 Chrome 扩展开发知识和工具也至关重要，比如了解 Chrome 扩展的架构、清单文件（manifest.json）的配置、权限设置等。同时，JavaScript 高级概念，如事件处理、异步编程等，对于实现扩展的复杂功能也必不可少。在这个开发过程中，开发者需要花费大量的时间和精力来完成这些准备工作，以确保扩展的功能正常运行。

提示词工程赋能应用开发

在使用提示词工程开发 Chrome 扩展应用时，首先要在本地目录下创建一个名为 Hulk 的文件夹，这将作为扩展应用的主目录。接着，在 Hulk 文件夹下面创建一个 icons 文件夹，用于存放扩展应用的图标。将名为 UX.png 的图标移入 icons 文件夹中，以便后续使用。

提示词内容

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

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

注意以下两点：
请使用icons文件夹的图标作为应用程序下的图标

返回代码

1. popup.js文件：这个文件负责处理按钮的点击事件，将当前页面的背景颜色改为绿色。代码如下： 
document.addEventListener('DOMContentLoaded', function() {
    const changeColorButton = document.getElementById('changeColorButton');
    changeColorButton.addEventListener('click', function() {
        chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
            chrome.scripting.executeScript({
                target: {tabId: tabs[0].id},
                function: function() {
                    document.body.style.backgroundColor = 'green';
                }
            });
        });
    });
});
  1. popup.html 文件：这个文件定义了弹出窗口的内容，包括显示的提示信息和按钮。代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hulk</title>
</head>
<body>
    <p>改变背景颜色</p>
    <p>点击下方按钮将当前页面背景色为绿色</p>
    <button id="changeColorButton">改变背景颜色</button>
    <script src="popup.js"></script>
</body>
</html>
  1. manifest.json 文件：这个文件是 Chrome 扩展的配置文件，包含了扩展的版本、名称、描述、权限等信息。代码如下：
{
    "manifest_version": 3,
    "name": "Hulk",
    "version": "1.0",
    "description": "改变网页背景颜色为绿色",
    "action": {
        "default_popup": "popup.html",
        "default_icon": {
            "16": "icons/icon16.png",
            "48": "icons/icon48.png",
            "128": "icons/icon128.png"
        }
    },
    "permissions": ["activeTab", "scripting"]
}

加载程序并使用

完成代码编写后，进入到 Chrome 扩展管理页面，点击加载已解压的扩展程序按钮，选择之前创建的 Hulk 文件夹，即可完成对扩展程序的加载。

使用前

image.png

使用后

image.png

小结

在本次实践中，我们通过对比传统编程与提示词工程在 Chrome 扩展开发上的不同方式，完成了 “Hulk” 扩展应用从构思到实现的全过程。传统开发模式依赖开发者掌握多种技术知识，开发流程繁琐且耗时；而提示词工程仅需将需求以清晰指令形式提交给 AI 大模型，即可快速获得功能代码，极大降低了开发门槛和时间成本。从创建文件夹、配置图标，到提交提示词获取代码，再到加载扩展并成功实现将网页背景色改为绿色的功能，整个过程充分体现出提示词工程的便捷性与高效性。

本文总结

本文以开发 “将网页背景颜色修改为绿色” 的 Chrome 扩展应用为切入点，深入探讨了提示词工程对传统应用开发的影响。通过传统编程与提示词工程两种开发方式的对比发现，传统编程在开发 Chrome 扩展时，需要开发者具备 Web 开发、Chrome 扩展开发等多方面专业知识，开发周期长、难度大；而提示词工程通过自然语言指令，利用 AI 大模型自动生成代码，显著简化了开发流程。

这一实践不仅展示了提示词工程在提升开发效率、降低技术门槛方面的巨大潜力，也为应用开发提供了全新的思路。随着人工智能技术的不断进步，提示词工程有望成为未来应用开发的重要手段，推动软件开发行业向更高效、更普惠的方向发展，让更多人能够参与到应用开发的创新实践中 。

avatar
文章
阅读
粉丝