【AI辅助编程】一次浏览器插件的开发尝试--尝试开发一个文本谐音排雷的浏览器插件

Lyss07

【背景介绍】
    偶然间在B站看直播的时候了解到一些直播间里，会有一些SC（醒目留言）谐音梗，通过主播读出来的时候，造成一定的节目效果。而读这些文本的时候绕开一些特定词语或者说缩写被称为“排雷”。
    引发了想开发一个检测文本中是否存在“雷点”词语的工具的想法，因为是在网页端看的直播，就想做个插件试试。
    本身是程序员，但是没有接触过浏览器插件的开发和部署流程，前端代码还在学习中，所以想到了使用AI辅助编程，一是初步了解下流程，二是增加一些JavaScript学习中结果输出，以便得到更好的反馈



【需求分析】
    1.浏览器中选中文本，右键触发检测
    2.获取文本内容的拼音，检测是否存在特定的谐音
    3.输出检测结果



【AI介入--DeepSeek】
    这里需要补充说明的是，我示例的内容更偏向于模拟一个突然的想法，然后去找AI提问，并非特别专业的提示词（或者说专业的提示词工程），无论是格式还是内容，可能都偏向于模拟一个啥都不懂的人。如果想要了解更专业、高效的提示词的话，可以自己查一下相关信息，这里不做更多扩展
    【提示词1】
      使用XXXXXX代码编程，获取一段文本的中文读音，
      该文本中除了中文还可能包含数字、字母、特殊符号等
    【说明】这里使用的是我熟悉的编程语言，以便能看懂内容。然后输出结果可以不用细看，往下接着提问


    【提示词2】
      基于以上代码，将每个读音的首字母提取出来，变成一个检查文本谐音内涵梗的检测预警功能，
      用户会输入包含谐音梗的拼音首字母缩写，
      需要完成将用户输入的缩写字母，带入到上述文本检测中进行检测，并预警，
      包含谐音梗的字母时，输出“有雷！！”提醒用户
    【说明】这里是主要功能内容，其实可以和第一个放到一起的，就是想试下这种不连续输入的效果


    【提示词3】
      将上述XXXXX代码改为Java script，并尝试作为一个浏览器插件，通过选中文本的右键触发检测，检测结果为可设定显示时间的弹窗展示
    【说明】这里就完成了主要的流程和内容，同样地，前三个提示词，其实是一个需求描述，可以放到一起


    【后续提示词】
      还有以下问题需要解决：
      1.如何从 https://github.com/zh-lx/pinyin-pro 中获取所需的pinyin-pro.js 库，并在插件中使用
      2.需要报雷的内容改为配置文件，用户可以进行增加、修改、删除
      3.弹窗关闭时间改为可配置的配置文件，用户可以通过点击插件图标进行配置修改


      再做出如下修改：
      1.将content-script.js 重命名为content_script.js
      2.content_script.js中的常量提取出来一个单独的 consts.js脚本
      给出修改后的所有文件内容，以及相关的部署说明


    会在附件中整理一个提示词和DS的回答记录文件，这里不做过多的补充了




    这里只做最后的结果的主要代码展示，完整内容见附件 -- sc_check.zip
    不好意思，又测出来一个小问题，更新了一下代码，附件也已更新
    问题是  initialChain 这个变量在主逻辑中的检测流程里有修改不能设为 const, 已修改为如下内容：
      let initialChain = pinyin(text, {pattern: 'first', toneType: 'none', multiple: true}).replace(/\s+/g, '');

[JavaScript] 纯文本查看 复制代码

?

001 002 003 004 005 006 007 008 009 010 011 012 013 014 015 016 017 018 019 020 021 022 023 024 025 026 027 028 029 030 031 032 033 034 035 036 037 038 039 040 041 042 043 044 045 046 047 048 049 050 051 052 053 054 055 056 057 058 059 060 061 062 063 064 065 066 067 068 069 070 071 072 073 074 075 076 077 078 079 080 081 082 083 084 085 086 087 088 089 090 091 092 093 094 095 096 097 098 099 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157

// 主检测逻辑 (async () => {   const { DIGIT_MAP, LETTER_MAP, SYMBOL_MAP } = window.XIEYIN_CONSTS;   const text = window.getSelection().toString().trim();     // 弹窗组件（带秒级时间控制）   const showAlert = (message, seconds=2) => {     const alertDiv = document.createElement('div');     alertDiv.style = `       position: fixed;       top: 20px;       right: 20px;       padding: 15px;       background: #ff4444;       color: white;       border-radius: 5px;       z-index: 9999;       box-shadow: 0 2px 10px rgba(0,0,0,0.2);       font-family: 'Microsoft YaHei', sans-serif;       line-height: 1.5;       white-space: pre-wrap;       text-align: left;       max-width: 300px;     `;     alertDiv.textContent = message;     // 换行处理     alertDiv.innerHTML = message.replace(/\n/g, '<br>');     document.body.appendChild(alertDiv);           setTimeout(() => {       document.body.removeChild(alertDiv);     }, seconds * 1000); // 秒转毫秒   };     // 非中文处理函数   function processNonChinese(char) {     const lowerChar = char.toLowerCase();     if (LETTER_MAP.hasOwnProperty(lowerChar)) return LETTER_MAP[lowerChar];     if (DIGIT_MAP.hasOwnProperty(char)) return DIGIT_MAP[char];     if (SYMBOL_MAP.hasOwnProperty(char)) return SYMBOL_MAP[char];     return '';   };     // 拼音生成函数   const generateDetailText = (text, dangerWord)  => {     const chunks = [];     const dangerLower = dangerWord.toLowerCase();           // 分割字符并生成拼音     [...text].forEach(char => {       let py = '';       if (/[\u4e00-\u9fa5]/.test(char)) {         try {           py = pinyin(char, { toneType: 'none', multiple: true })[0];         } catch {           py = '?';         }       } else {         const converted = processNonChinese(char);         py = converted ? converted : char;       }       chunks.push({ char, py });     });       // 查找所有匹配位置     const initialChain = chunks.map(c => c.py[0]?.charAt(0) || '').join('').toLowerCase();     const matches = [];     let pos = -1;       while ((pos = initialChain.indexOf(dangerLower, pos + 1)) !== -1) {       const segment = chunks         .slice(pos, pos + dangerWord.length)         .map(c => `${c.char}（${c.py}）`)         .join('');       // 位置 ${pos + 1}-${pos + dangerWord.length}：       matches.push(`${segment}`);     }       return matches.join('\n') || '（位置无法定位）';   }     //   function injectScript(file, node) { //     return new Promise((resolve) => { //         const th = document.querySelector(node); //         const s = document.createElement('script'); //         s.type = 'text/javascript'; //         s.src = file; //         s.onload = () => resolve(s); //         th.appendChild(s); //     }); // }   //   await injectScript(chrome.runtime.getURL('libs/pinyin-pro/pinyin-pro.latest.js'), 'body');   console.log('当前选中:', text); // 在检测前添加   // 正确的拼音库导入方式   const { pinyin } = pinyinPro;   // // 使用pinyin函数   // console.log('拼音库版本:', pinyin.VERSION);   // 使用本地拼音库   let initialChain = pinyin(text, {pattern: 'first', toneType: 'none', multiple: true}).replace(/\s+/g, '');   // ,type: 'string'     // 在拼音转换后添加   // console.log('原始文本:', text);   console.log('首字母链:', initialChain);     // 合并非中文处理   // [...text].forEach(char => {   //   if (!/[\u4e00-\u9fa5]/.test(char)) {   //     const converted = processNonChinese(char);   //     if (converted) initialChain += converted[0];   //   }   // });     // 检测危险词   chrome.storage.sync.get(['dangerousWords', 'alertSeconds', 'showDetail'], (result) => {     const text = window.getSelection().toString().trim();     const dangerousPatterns = result.dangerousWords || ['tm', 'sb'];     const duration = result.alertSeconds || 3;     const showDetail = result.showDetail !== false;       let foundWord = '';     let detailText = '';         // 生成首字母链   // let initialChain = pinyin(text, {   //   pattern: 'first',   //   toneType: 'none',   //   type: 'string'   // }).replace(/\s+/g, '').toLowerCase();     // 合并非中文处理   [...text].forEach(char => {     if (!/[\u4e00-\u9fa5]/.test(char)) {       const converted = processNonChinese(char);       if (converted) initialChain += converted[0];     }   });     // 检测所有匹配项   const foundWords = dangerousPatterns.filter(word =>     initialChain.includes(word.toLowerCase())   );     if (foundWords.length > 0) {     let message = '有雷！！';     if (showDetail) {       message += '\n\n' + foundWords.map(word => {         return `${generateDetailText(text, word)}`;       }).join('\n\n');     }     showAlert(message, duration);   } else {     showAlert('安全~', duration);   }   }); })();

Lyss07

hzqyihui 发表于 2025-3-28 14:24
最近刷到好多用ds来辅助编程的，我现在只是拿来查东西

是的是的，我一开始也是，
后面觉得可以用来学新东西，
目前测了几个开发新库、修改代码啥的，效果一般，
就这个写个插件这个算是比较成功的，就全流程发出来了

huanglaoda

回复虽短但收获颇丰，感谢前辈的经验传授！

huanglaoda

无私公开技术细节令人敬佩，感谢你的分享！

123tiankongli

回复虽短但收获颇丰，感谢前辈的经验传授！

huanglaoda

期待后续更新版本

lzq1002

厉害厉害，研究下

yixiaofan

向大神们学习学习，希望将来也能有所提升

zemu1

不错，有空了研究下

zzzkc

回复虽短但收获颇丰，感谢前辈的经验传授！

hzqyihui

最近刷到好多用ds来辅助编程的，我现在只是拿来查东西