PromptMaster:支持变量插入、内置生成功能的提示词管理插件

一个提示词管理器，到底该管什么？

作为一个重度 AI 用户，我前前后后用过不下 5 款提示词管理器。

从最开始的备忘录存提示词，到后来专门装了浏览器插件，按分类建文件夹、打标签------我一度觉得自己已经把提示词管理做到了极致。

直到有一天，我需要批量生成 10 条小红书文案。

我的提示词库里有一条"万能模板"：

请帮我写一条小红书文案，主题是【产品名称】，目标人群是【目标用户】，风格要求是【轻松/专业/种草】，字数控制在【200字左右】。

每次用这条模板，我都得手动把【】里的内容一个个删掉、替换。10 条文案，同样的操作重复了 10 遍。

第 7 条的时候，我漏改了"目标人群"，生成的文案直接跑偏。

这不是管理器的锅------它确实帮我存好了提示词。但它能做的，也仅仅是"存"而已。

三个被忽视的技术问题

后来我仔细想了想，发现这类工具普遍存在三个问题：

问题一：变量替换全靠手动

很多提示词都有"变量"------日期、姓名、产品名、风格要求......这些内容每次用都不一样。

大部分管理器的处理方式是：你自己改。

一条提示词有 3 个变量，每次用都要手动替换 3 次。变量多了，漏改是常事；改错了，生成结果直接废掉。更别说那些藏在长文本中间的变量，一不小心就看漏了。

管理器帮你省了"找提示词"的时间，却把"改提示词"的时间原封不动地留给了你。

问题二：写新提示词的成本不低

遇到新需求，手头没有现成的提示词怎么办？

大部分人的做法是：打开某个提示词网站，搜模板、复制粘贴、再根据自己的需求修改。整个流程下来，切了三四个标签页，花了十几分钟。

写提示词本身，就成了一个需要"提示词"的环节。

问题三：UI 侵入性太强

这点可能是最容易被忽略的。

几乎所有提示词管理器都是一个独立的界面------要么是一个完整的页面，要么是一个占了屏幕三分之一的大弹窗。你得先打开它，找到提示词，复制或插入，再关掉它。

问题是：你在用 AI 的时候，屏幕空间本来就紧张。对话内容、输入框、参考资料......一个管理器界面再往那儿一杵，整个布局都乱了。

更别提来回切换的打断感------你正专注于和 AI 对话，突然得切到管理器界面找条提示词，思路全断了。

我的解决方案：从"存"到"用"的全链路设计

折腾了一圈之后，我决定自己做一个 Chrome 扩展来解决这些问题。项目叫 PromptMaster，支持 24 个主流 AI 平台，开源在 GitHub | Gitee 上。

下面聊聊我在三个核心问题上的技术思路。

方案一：动态变量语法 + 自动弹窗

我设计了一套 #变量名# 双井号标记语法。用户在提示词里用双井号包裹变量，比如：

复制代码

请帮我写一条小红书文案，主题是#产品名称#，目标人群是#目标用户#，风格要求是#风格：轻松/专业/种草#，字数控制在#字数：200字左右#。

使用时，扩展通过正则匹配识别所有 #xxx# 标记，自动生成一个表单弹窗，把变量逐项列出来让用户填写。填写完毕后，自动替换到原文中再插入 AI 输入框。

变量还支持"提示文本"语法------在变量名后面加冒号写说明，如 #风格：轻松/专业/种草#。解析时冒号前作为标签，冒号后作为 placeholder 提示。这样隔了一个月再用，也能快速理解每个变量该填什么。

核心思路：把"查找→替换"这个重复劳动交给程序，用户只需要填空。

方案二：内置提示词生成 & 优化器

我在扩展里集成了一个基于 OpenAI 兼容接口的提示词生成模块。

用户用大白话描述需求------比如"帮我写一个生成周报的提示词模板"------模块会基于 Lyra 4D 方法论，生成结构完整、逻辑清晰的专业提示词。生成结果支持一键保存到本地提示词库。

同时它也能"优化"：把现有提示词丢给它，它会分析结构、补充细节、优化表达。

技术实现上，这块用了流式输出（stream: true）+ 前端 Markdown 渲染，体验和主流 AI 对话一致。所有配置（API Key、Base URL、模型名）存在 chrome.storage.local，数据不出浏览器。

核心思路：把提示词的"生产"和"消费"放在同一个工具里，减少上下文切换。

方案三：热角唤起 + 最小化 UI 干扰

这是我在 UI 设计上花心思最多的地方。

我给扩展做了两种模式：悬浮模式和热角模式。热角模式下，鼠标移到屏幕指定角落，面板才会浮现；移开，它就自动消失。

不用的时候，屏幕上没有任何多余元素------没有图标、没有侧边栏、没有浮窗。用的时候，鼠标一划，一个紧凑的面板弹出来，搜索、标签筛选、生成器都在里面。

核心思路：插件应该像快捷键一样------需要时一触即发，不需要时完全隐形。

一些技术实现细节

除了三个核心功能，在开发过程中还处理了不少细节：

追加模式 ：插入提示词时默认追加到已有内容后面，不会覆盖用户已输入的文字。这需要对接不同 AI 平台的输入框实现------有的是 contenteditable，有的是 textarea，有的用了 Lexical/Slate 等富文本编辑器，插入逻辑各不相同。
输入框适配：不同平台的输入框结构差异很大。有的用 Shadow DOM，有的用 iframe，有的用了自定义编辑器框架（Lexical、CodeMirror、Slate、ProseMirror 等）。每种都需要单独处理插入逻辑。

javascript 复制代码

// 策略 1：优先使用 execCommand（兼容性最好）
if (!inserted) {
  try { inserted = document.execCommand('insertText', false, textToInsert); } catch (_) {}
}

// 策略 2：派发 InputEvent（适配 Lexical 等现代编辑器）
if (!inserted) {
  inputBox.dispatchEvent(new InputEvent('beforeinput', {
    inputType: hasLineBreak ? 'insertFromPaste' : 'insertText',
    data: textToInsert, bubbles: true, cancelable: true,
  }));
  inputBox.dispatchEvent(new Event('input', { bubbles: true }));
}

// 策略 3：直接写 innerText（兜底方案）
if (!inserted) {
  inputBox.innerText = existingText + textToInsert;
  inputBox.dispatchEvent(new Event('input', { bubbles: true }));
}

数据存储 ：所有提示词、标签、API 配置都存在浏览器本地，不上传任何服务器。存储层做了版本化设计（v2），通过 chrome.runtime.getURL + 动态 import() 在内容脚本中加载。
防重复注入：Manifest V3 的 Service Worker 会被浏览器随时回收，下次激活时又会重新注入脚本。为避免重复执行，每个模块入口处都用全局标记做守卫：

javascript 复制代码

// 每个内容脚本入口处
if (window.__promptManagerContentInjected) return;
window.__promptManagerContentInjected = true;
// ... 模块初始化逻辑

复制代码

Service Worker 检查注入状态时，也通过读取这些标记来判断脚本是否已加载：

javascript 复制代码

const isInjected = await chrome.scripting.executeScript({
  target: { tabId },
  func: () => window.__promptManagerContentInjected === true,
});

平台兼容：当前支持 24 个 AI 平台，平台配置维护在一个 JSON 文件里，包含 URL 匹配模式和输入框选择器。新增平台只需添加一条配置。
防止变量语法误匹配 ：由于变量语法的#符号在 markdown 语法中十分常见，且与颜色编码也容易混淆，需要避免误匹配问题。

javascript 复制代码

class PromptProcessor {
  static extractVariables(content) {
    // 支持中文字符和 label:placeholder 语法，排除十六进制颜色
    const regex = /#([a-zA-Z0-9_一-龥]+)(?:[:：]([^#]*))?#/g;
    const matches = [...content.matchAll(regex)];
    const variables = [];
    const seenNames = new Set();

    for (const match of matches) {
      const varName = match[1];
      const placeholder = match[2] || '';
      // 跳过十六进制颜色（如 #ff0000）
      if (!placeholder && /^[0-9a-fA-F]{3}$|^[0-9a-fA-F]{6}$/.test(varName)) continue;
      if (seenNames.has(varName)) continue;
      seenNames.add(varName);
      variables.push({ name: varName, label: varName, placeholder: placeholder || varName });
    }
    return variables;
  }

  static replaceVariables(content, values) {
    return content.replace(/#([a-zA-Z0-9_一-龥]+)(?:[:：][^#]*)?#/g, (match, varName) => {
      return values[varName] !== undefined ? values[varName] : match;
    });
  }
}

安装与开源地址

Edge 用户 ：在 Edge 插件市场搜索 PromptMaster，点击安装。

Chrome 用户 ：打开 Crx搜搜插件市场，采用在线或离线安装方式获取。

开源地址：GitHub | Gitee。

写在最后

提示词管理器不该只是一个"仓库"。它应该帮你写提示词、改提示词、用提示词------而不只是"存提示词"。它也不该抢占你的屏幕，打断你的节奏。

这是我做这个项目的初衷：一条模板，填空即用；需要新模板，张口就来；不用的时候，它安安静静地待在角落。

项目免费开源，使用 CC BY 4.0 协议。如果你也受够了手动改变量、到处找模板的日子，可以试试。欢迎任何形式的贡献和反馈。