大家好，我是南月，首先说明我不是官方人员，所以此扩展非官方扩展。

之前发过我用灵犀开写网页代码的记录文（体验使用WPS灵犀Claw生成代码），前段时间因为热搜的原因社区来了许多黑粉，外加有很多广告，本来想拉黑，但社区一直没有该功能提供，所以只能自己搞一个扩展来实现。

但我之前没有接触过浏览器扩展程序开发，所以这次仍然打算交给灵犀Claw，顺便试试效果。

现在应该叫灵犀专业版了。

第一版实现的功能：

• 用户名后增加“加入黑名单”的按钮，若已加入黑名单则改为“移除黑名单”

• 操作二次确认

• 黑名单用户高亮提示

• 不用屏蔽黑名单用户的内容

• 帖子列表页、个人中心页、帖子详情页均实现以上功能

• 需要一个设置页面查看当前黑名单列表和快捷操作

扩展地址在最后，或自行去Chrome Web Store、FireFox扩展中心搜索“WPS社区黑名单”。

灵犀写代码

记录命令、出现的问题、交流记录和解决思路。

1.1.Chrome扩展

指令：

写一个Chrome扩展，目标是给WPS社区（https://bbs.wps.cn）增加一个黑名单系统，可以进行黑名单管理，如果是黑名单内的用户，在社区首页、帖子详情页等各种显示用户名的地方，用户名都用红色背景显示，然后在每个用户名后面都增加一个“加入黑名单”的按钮，如果已经是黑名单用户则改为“移出黑名单”，并且操作需要二次确认。扩展设置中可以查看黑名单列表、增删黑名单用户，至于是按用户昵称判断黑名单，还是用用户的uid（每个用户名都有自己的个人中心连接：https://bbs.wps.cn/user/1180774，例如这个uid就是1180774），你先决定吧。目前黑名单用户只做标记，我在访问社区时能看出和别的不同就行，无需屏蔽。

正好遇到了灵犀环境无法启动浏览器的问题，顺便让它自己修复了。之前灵犀Python环境出现问题的时候我也让他自修复过（艰苦卓绝，历经4个小时我终于配合灵犀Claw修复了自己的问题），这次这个修复过于简单我就不发帖记录了。

说回正题，我在命令里给了他记录黑名单的两种方法，一个是只按名称记录，方法是简单，但如果改名则失效；另一种是按uid，这种记录后需要先取uid才能判断，我让灵犀自行决策：

灵犀决定按UID判断，对于AI来说多写几行代码就跟玩儿似的。

不到一分钟就写好了一个版本，这速度，啧啧啧。

经过尝试，出现了问题：

它会在每个用户中心URL的链接后面都显示黑名单按钮，就导致页面内会出现大量黑名单按钮。

修复了一番后还有些问题：

一个是帖子列表页用户名后的黑名单按钮无了，另一个是个人中心页多余的黑名单按钮没移除干净。

继续提问题，另外增加一个新需求：

新需求的要求是帖子底部评论区的每个评论的用户后面也增加一个按钮，之所以有不要新起一行这个要求，是因为最初灵犀已经实现了这个功能，只是会单独占一行在用户名下面，后来改多黑名单按钮的bug的时候把这里也改没了，我就当新需求重提一下要求。

酱婶儿的问题。

改完之后尝试让他打包：

默认打了个压缩包……

只不过后来想起让他增加个右键菜单价格设置试试：

一旦打了一次包之后每次更改都会自动打包。

设置是有了但是多了：

很快灵犀就发现了问题并修正。

黑名单列表发现问题，因为默认只显示了UID和个人中心URL，没有用户名，无法直观看出是谁，所以需要加上用户名显示：

但主要问题都在这了，先是更新文件不知道更新到哪了：

灵犀认为是浏览器扩展缓存的问题。

但经过我检查发现是本地代码压根没更新，不清楚是什么原因。

之后的问题集中在用户名获取的情况：

当我让它去掉第二行的内容时，问题出现了：

但实际上，成了这样：

后来让灵犀修复了三次都没效果，我去首页看了一下HTML代码：

发现这个信息在class="userinfo-out"的div下，其中用户名在span标签下，身份信息和发帖时间在和span同级的div下，于是告诉了灵犀：

解决方案看起来怪怪的，因为我想象中的方案是直接找span内的文本就行了，灵犀还要去找URL去匹配。最后果然还是没效果。

我又细说了一下：

发现灵犀还在死磕规则判断，只好明确告诉他就但去span下的文本，最终还是不行，仍然是下面我反馈的问题，同时把两行文本全取到了。

我开始怀疑是不是灵犀找错父级元素了，所以我扩大了一点查看范围：

新发现，在显示头像的图像标签下alt内也会显示用户名，既然灵犀之前找到过头像，那是不是直接读alt的内容就行了？就别再往下级标签去翻了。

连同代码和思路一起告诉灵犀，灵犀解析后果然立刻明白了怎么做，并且成功解决了问题。看来以后和灵犀交流，说一堆思路和解法都不如直接把源代码甩给它。但灵犀不是能读取页面源码的吗……

1.2.FireFox扩展

功能完整实现了就简单了，接下来让灵犀转换为FireFox扩展即可，同时让他注意不要覆盖当前Chrome扩展的源码，防止后续还有更新。

经测试，一次通过。

1.3.本次AI开发心得

• 需求要细致，要求要清晰

• 如果是读取网页源码进行分析，必要时需要手工提供源码，并告知用途

• 仔细看AI的回复消息，有时候思路跑偏了能及时纠正

1.4.后续

如果以后还有机会，可能可以优化的点：

• 加入、移除黑名单后需要刷新才能应用到本页面其他该ID的条目

• 同步功能（Chrome和FireFox扩展似乎不同）

• 黑名单列表导入导出

• 报错或bug最好通过附件发给灵犀，不要全靠文字描述

• 耐心，耐心，耐心，一个问题或需求反复沟通和修改是正常的

2.安装本地扩展

2.1.Chromium系

进入扩展程序管理，勾选“开发者模式”（一般Chromium系浏览器都有，只是可能位置不同），然后加载已解包的扩展（将crx解压缩，或先改扩展名为.zip再解压缩），或者将crx扩展拖拽到浏览器中。

2.2.FireFox

没有经过Mozilla的扩展都无法直接让火狐加载，需进入about:debugging页面临时加载附加组件：

可能需要选择扩展源码中的maniftest.json文件才能正常使用。但注意重启浏览器后会失效。

3.AI开发成果演示

帖子列表：（未加黑名单）

上周独钓寒江月倒霉蛋老师微信被举报封禁，今天被我翻牌来做效果演示～

帖子列表（加入黑名单）：

个人中心（加入黑名单）：

帖子页（帖子）：

帖子页（评论）：

黑名单管理（单击扩展图标）：

FireFox效果（帖子列）：

FireFox效果（扩展图标点击）：

火狐和Chrome扩展功能、效果均一样，就不用多演示了。

4.扩展发布

新开一个对话，让灵犀帮我查一下两家扩展的发布资料和流程，这里主要处理扩展发布的问题。

（要钱，突然不想发布了……）

我看到了谷歌这边对权限检查比较严格（最后一行）。

回到开发扩展的对话，让灵犀检查一下两个扩展所使用的权限和说明（因为这个对话里灵犀知道扩展的源码在哪，不用重新指定）：

之后让灵犀将不需要的权限删除，再检查一遍后进行打包就可以了。

还有要提供一个隐私政策页面的URL，模板也让灵犀写了一份，不过还需要手动删除说明部分和补充一些信息：

因为我选择将隐私说明放在自己的服务器，所以需要将md文件转换为HTML，交给灵犀即可：

之后按两家的提交流程进行提交并填写表单等待审核即可：

不过提交火狐时火狐查出了1错误，并有6处安全警告：

不用找翻译，直接把错误和描述全丢给灵犀就行了（建议一个一个处理）：

灵犀就会自己找方法。

若要支持手机版火狐，记得告诉灵犀让灵犀改一下配置。

搞定。

最后，如果还想给其他浏览器自己的应用商店（如Edge、Opera、QQ浏览器等）发布应用，也可以按照上面的方法让灵犀总结一下需要的资料和流程，大家可以自行尝试。

扩展下载地址：

因为本来是打算自用的，所以没充分测试，有意见和建议，欢迎反馈~

Chrome扩展商店（Chromium系浏览器都可以安装，需梯子）：https://chromewebstore.google.com/detail/wps-%E7%A4%BE%E5%8C%BA%E9%BB%91%E5%90%8D%E5%8D%95/nnfefojeopbehcdbpklfmgkefhimmimf

傲游扩展市场（Chromium系浏览器都可以安装，自由访问）：https://www.crxsoso.com/webstore/detail/nnfefojeopbehcdbpklfmgkefhimmimf

火狐扩展中心：https://addons.mozilla.org/zh-CN/firefox/addon/wps-%E7%A4%BE%E5%8C%BA%E9%BB%91%E5%90%8D%E5%8D%95/

－－＞南月的发帖记录和回顾合集＜－－

https://www.kdocs.cn/l/ctYBtxhDgFwQ