如何构建ChatGPT插件

本文中，我们将一步一步地探索并构建一个名为"AI Prompt Testing"的项目。该项

目是一个网站插件，旨在帮助网站生成一个 ChatGPT 提示测试题，以巩固当前网

页的内容。

1、抽象提取

这个网站 chatgpt 插件大概的效果，类比的实现有哪些？ addtoany， google

analytics

查阅资料

www.addtoany.com/buttons/cus…

addtoany 的配置是这样子

href="<https://www.addtoany.com/share>"></a></div>

<script async src="https://static.addtoany.com/menu/page.js"></script>

复制代码

google analytics 的配置是这样子

<!-- Google tag (gtag.js) --><script async

src="https://www.googletagmanager.com/gtag/js?id=G-XXXXX"></script><s

cript>

window.dataLayer = window.dataLayer || [];

function gtag(){dataLayer.push(arguments);}

gtag('js', new Date());

按钮，按钮的功能如下：

1、假如用户点击按钮，按钮则生成一个一段文本，“基于链接{url}，生成一份测试题，选择

题 4 题，问答题 3 题，判断题 3 题，并在问题之后附上答案”，这里的{url} 是当前网页地址。

2、按钮展示是一个 chatgpt svg 图标，图标大小为 32*32，，图标内部字体内容为“生成测

试题”

3、用户点击按钮后，请把内容复制到剪贴板，并提示用户“内容已复制请前往 chatgpt 网站”

4、提示内容添加动画淡入显示，用户点击提示内容后自动淡出并移除复制代码

然后 chatgpt 一顿输出

// 创建一个 div 元素来包含按钮和提示内容

var container = document.createElement("div");container.style.cssText =

icon.setAttribute("xmlns", "http://www.w3.org/2000/svg");

icon.setAttribute("width", "32");

icon.setAttribute("height", "32");

icon.setAttribute("viewBox", "0 0 24 24");

icon.setAttribute("fill", "none");

icon.setAttribute("stroke", "currentColor");

icon.setAttribute("stroke-width", "2");

icon.setAttribute("stroke-linecap", "round");

icon.setAttribute("stroke-linejoin", "round");

var path = document.createElementNS("http://www.w3.org/2000/svg",

var text = document.createElement("span");text.style.cssText =

"font-size:10px; display:block;";text.innerHTML = "生成测试题";

button.appendChild(icon);

button.appendChild(text);

// 创建提示内容元素

var tooltip = document.createElement("div");tooltip.style.cssText =

"position:absolute;bottom:40px;left:50%;transform:translateX(-50%);ba

ckground:#333;color:#fff;padding:5px

10px;border-radius:5px;opacity:0;transition:opacity

0.5s;";tooltip.innerHTML = "内容已复制，请前往 ChatGPT 网站";

// 将按钮和提示内容添加到容器元素中

container.appendChild(button);

container.appendChild(tooltip);

document.body.appendChild(container);

// 为按钮添加点击事件

"，生成一份测试题，选择题 4 题，问答题 3 题，判断题 3 题，并在问题之后附上答案";

// 复制文本到剪贴板

var tempInput = document.createElement("input");

tempInput.setAttribute("value", text);

document.body.appendChild(tempInput);

tempInput.select();

document.execCommand("copy");

document.body.removeChild(tempInput);

// 显示提示内容，并在淡入后淡出并删除元素

tooltip.style.opacity = "1";

});复制代码

贴入控制台看一下