如何一步一步构建网站ChatGPT插件

在本文中，咱们将一步一步地探究并构建一个名为”AI Prompt Testing”的项目。该项目是一个网站插件，旨在协助网站生成一个ChatGPT提示测试题，以巩固当前网页的内容。

1、笼统提取

这个网站ChatGPT插件大约的效果，类比的完结有哪些？ addtoany， google analytics

查阅资料

www.addtoany.com/buttons/cus…

addtoany的装备是这样子

<div class="a2a_kit a2a_kit_size_32 a2a_floating_style a2a_vertical_style" style="left:0px; top:150px;">
    <a class="a2a_button_facebook"></a>
    <a class="a2a_button_twitter"></a>
    <a class="a2a_button_pinterest"></a>
    <a class="a2a_dd" 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>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXX');
</script>

都记下来，以被咱们后续插件装备参阅

2、技术完结考虑

既然是网站chatgpt 插件，那么为何不让chatgpt 帮我写一下代码呢？

考虑prompt

用一个js脚本，动态嵌入到网站上，脚本内容是，动态在网页右下侧生成一个类似共享按钮的按钮，按钮的功能如下：
1、假如用户点击按钮，按钮则生成一个一段文本，“根据链接{url}，生成一份测试题，选择题4题，问答题3题，判断题3题，并在问题之后附上答案”，这里的{url} 是当前网页地址。
2、按钮展示是一个chatgpt svg 图标，图标巨细为32*32，，图标内部字体内容为“生成测试题”
3、用户点击按钮后，请把内容仿制到剪贴板，并提示用户“内容已仿制请前往chatgpt网站”
4、提示内容增加动画淡入显现，用户点击提示内容后主动淡出并移除

然后chatgpt一顿输出

// 创立一个div元素来包括按钮和提示内容
var container = document.createElement("div");
container.style.cssText = "position:fixed;right:20px;bottom:20px;z-index:9999;";
// 创立按钮元素
var button = document.createElement("button");
button.style.cssText = "background:none;border:none;cursor:pointer;";
var icon = document.createElementNS("http://www.w3.org/2000/svg", "svg");
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", "path");
path.setAttribute(
  "d",
  "M6 9l6 6 6-6"
);
icon.appendChild(path);
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%);background:#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);
// 为按钮增加点击事情
button.addEventListener("click", function () {
  // 生成测试题文本
  var url = window.location.href;
  var text =
    "根据链接" +
    url +
    "，生成一份测试题，选择题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";
  setTimeout(function () {
    tooltip.style.opacity = "0";
    setTimeout(function () {
      container.removeChild(tooltip);
    }, 500);
  }, 3000);
});

贴入控制台看一下

生成后，点击按钮效果，基本满足了

经过1、2步的梳理，咱们基本完结所有用户侧的代码和思路。

3、接下来咱们开端正式写代码

3.1 创立项目，初始化

npm create vite@latest

咱们能够选择vue 的模版初始化，考虑了一下好像挺简单，用原生js也能够。删掉vue 插件。由于咱们需要构建成第三方网站直接引证的代码库，所以要装备一下build 选项。

咱们的prompt里边需要用到svg图标，所以把vite-svg-loader 插件也引进。

vite.config.js

import { defineConfig } from 'vite'
import svgLoader from 'vite-svg-loader'
import banner from 'vite-plugin-banner'
import pkg from './package.json'
import path from 'path'
// <https://vitejs.dev/config/>
export default defineConfig({
  plugins: [
    banner({
      outDir: './lib',
      content: `/**\n * name: ${pkg.name}\n * version: v${pkg.version}\n * description: ${pkg.description}\n * author: ${pkg.author}\n * homepage: ${pkg.homepage}\n */`
    }), svgLoader()
  ],
  build: {
    outDir: "./lib",
    lib: {
      entry: path.resolve(__dirname, 'src/index.js'),
      name: 'chatgpt',
      fileName: (format) => `chatgpt.${format}.js`
    }
  }
})

项目建立完结，npm run dev 开端一步一步调优chatgpt生成的代码

3.2 怎么完结装备类似于 google analytics 的装备？

<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXX');
</script>

首先咱们要序列化一下装备选项，生成key value 目标，然后直接读取key的值就好了

// if fromOrgin
if (window.atob && window.atob(opt.config) !== location.origin) {
   return;
}

咱们加上一行调试一下装备看一下代码还能不能运转

所以咱们照本宣科就能够得到大约引进装备代码

index.html

<script type="module" src="/src/index.js"></script>
<script>
  window._chatData = window._chatData || [];
  function chatag() { _chatData.push(arguments); }
  chatag('js', new Date());
  chatag('config', 'aHR0cDovL2xvY2FsaG9zdDo1MTcz');
</script>

‘aHR0cDovL2xvY2FsaG9zdDo1MTcz’ 就是当前本地调试的域名 ‘http://localhost:5173’

atob('aHR0cDovL2xvY2FsaG9zdDo1MTcz')

考虑到网站插件可能是多国用户的需求，引进多国言语，把原来写死的txt 抽离一下，基本完结

4、代码到了发布阶段

4.1 咱们引进release-it package

"release-it": {
    "hooks": {
      "after:bump": "npm run build"
    }
  },

发布生命周期 after:bump 需要构建一下再发布, 具体参阅 github.com/release-it/…

4.2 优化readme 让用户更加好了解

### Add chatbtn code manually
Below is the chatbtn code for this account. Please copy and paste this code into the code of every page on your site, immediately after the <head> or <body> element. Only one chatbtn tag can be added per page.
```js
<script async src="<https://unpkg.com/ai-prompt-testing/lib/chatgpt.umd.js?id=aHR0cHM6Ly9kb2NzLnczY3ViLmNvbQ==>"></script>
<script>
  window._chatData = window._chatData || [];
  function chatag(){_chatData.push(arguments);}
  chatag('js', new Date());
  chatag('config', 'aHR0cHM6Ly9kb2NzLnczY3ViLmNvbQ==');
</script>
or
```
<script>
var tracker_id = 'aHR0cHM6Ly9kb2NzLnczY3ViLmNvbQ=='
function chatag(){_chatData.push(arguments);}
var url = "<https://unpkg.com/ai-prompt-testing/lib/chatgpt.umd.js?id=>" + tracker_id;
(function() {
  var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
  ga.src = url;
  var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
window._chatData = window._chatData || [];
chatag('js', new Date());
chatag('config', tracker_id);
</script>
```
### Chatag config
-   chatag('config', 'aHR0cHM6Ly9kb2NzLnczY3ViLmNvbQ==');
'aHR0cHM6Ly9kb2NzLnczY3ViLmNvbQ==' equal to btoa(location.origin)
### Lastest library
https://unpkg.com/ai-prompt-testing
## Demo
https://docs.w3cub.com/rust/std/index

由于咱们要发布到npm 所以直接用unpkg cdn

unpkgis a fast, global content delivery network for everything on npm.

最后附上项目链接：

github.com/icai/ai-pro…

喜爱的朋友一键三连～～