[js] 英语学习助手：思源查词（剑桥词典 + 沙拉查词等）

缘起

之前经常在论坛看到小伙伴们问，思源能查词吗？

我在学习英语时也有这个需求，之前一直用各种查词软件，及 uTools 的沙拉查词，感觉思源查词是没太大的必要性。我也曾想过实现集查词，翻译，搜索，ai 于一体的插件，也让 ai 写好了 UI，数据来源嘛主要来自各大查词网站的页面抓取。但终因时间和精力有限，暂时搁置了。

一次偶然的机会，发现了 bob 翻译的插件支持从剑桥词典抓取数据并格式化显示。这不正是我想要的吗？

于是把所有参考资料收集好丢给 ai，让 ai 实现了这个代码。

Update: 0.0.5+ 已支持调用 uTools 的沙拉查词插件等，支持同时配置多个词典。

为什么选择剑桥词典？

1. 正如上面所说偶然的机会发现已有别人做好的现成作品可参考
2. 剑桥词典内容权威，真人发音
3. 同时支持中文释义和英英释义
4. 例句贴近真实生活场景
5. 适合初学者，标注 CEFR 等级（A1–C2）
6. 好吧，最主要的还是第 1 点，有现成作品，不过同时这个词典也很好。

AI 制作过程

这个代码写的还是较轻松的，现在有 AI 真方便，以前写代码，光 UI 搞半天，这个是开发最不愿搞，但又不得不搞的，如果有可能，开发统统用配置文件，哈哈。

但现在不一样了，我甚至不需要画 UI，常见功能，AI 知道应该做成什么样，你只需要告诉它要做什么，返回数据结构是什么就可以了，完全让 ai 自己设计。

我是怎么做的呢？

第一步，我把 https://github.com/yaobinbin333/bob-plugin-cambridge-dictionary/blob/cbdab3becad9b3b33165ff99dff4bab44ed54e17/src/entry.ts#L17 这个页面的资料给它，告诉它我要做从剑桥词典查词功能，数据是从剑桥词典网站抓取的，这个是参考，让它先设计 UI。

然后，它完成了，运行一看，一片空白，发生什么了？

好嘛，它直接完成了一个完善的抓取显示的功能，我本地运行，直接报跨域错误了。

这里，如果不懂代码的朋友，也应该能看到它集成了 js 代码，这时候其实应该让它先完成纯 UI，不涉及获取数据，一步步来，不然问题会很多，不方便观察问题。比如，如果纯小白看到空白会这么问，没用啊，什么都没有，那么，ai 再次检查，再次运行，仍然空白，然后继续...，然后....，你崩溃了。

于是，我告诉它先不要抓取，用假数据占位就行，我先调 UI，没问题后再填充数据。

然后，ai 出色完成了 UI，感觉不错，如果我自己整，得累够呛还不一定有它好，但它分分钟钟就完成了。

然后我适当调整了一些细节后，让 ai 集成数据。

集成完后，运行一看，又出问题了，原本良好的 UI，然后又空白了。

如果纯小白，会把现象告诉 AI，然后 ai 继续，你又反馈，ai 又继续，然后你又奔溃了。

于是，我打开控制台一看，好嘛，它对 HTML 的解析使用的是 cheerio 库，这个库只能用于 nodejs。我浏览器运行，自然不行。其实，这个库能否用于浏览器我也不懂，但我看到它上来就先安装库，就知道不是运行于浏览器的，要么得用构建工具，这不是我想要的，于是我问了 ai，cheerio 能否用于浏览器，结果是不能。

这时，如果小白，不知道这个问题怎么办？你可以打开源码，让 ai 帮你解释代码的主要功能和工作流程，以及这个代码能工作的环境，是否能在浏览器运行等。这样，你就能从流程或解释中看出一些问题，然后让 ai 给你找替代方案。当然，如果你的参考资料来自 bob 插件，这本身就应该了解 bob 插件的工作环境，如果你没特别说明，AI 会以为，你要转换的目标也是同样的环境，因此这里应该做好说明。

于是，我告诉它用 DOMParser 替代 cheerio，当然，如果你不知道 DOMParser 也没关系，就像前面所说，可以问 AI 替代方案，这个 DOMParser 也是我以前从 AI 那里学到的。

很快啊，AI 马上又给结果了，然后运行，仍然空白。

如果此时换作小白，会反馈，没用啊，还是不管用，AI，我再查查，这次好了，这次保证没问题，这个代码为什么可以正常运行，然后你崩溃了，AI，很抱歉没帮到你，我会努力学习，还有其他问题吗，你，滚。

那么，这次出了什么问题呢，没错，是跨域的问题，打开浏览器控制台，报错信息清晰可见。所以，有时先别忙着反馈，先把错误信息给 AI，不从根源上解决问题，不是白忙活吗。

不过，这里也确实是我的错，因为我一开始就让它用 fetch 的，因为我之前测过，在思源里可以用 fetch 正常抓取剑桥词典的，如果不行的话，思源还有代理 api。总之，把代码放到思源里执行就 OK 了。

至此，终于万事大吉了，又调整了一些细节，加了主题适配，和 AI 扯了会淡后，就完成了。

其实，你看，小白用 AI 写代码也不难，只需要找对正确解决方法，多问 AI，不要急着反馈，你先搞懂流程，问清 ai 大概需要经过哪些步骤实现，并详细告知自己的工作环境，然后 AI 大概率能工作的很好。

作品展示

好了，废话了那么多终于上作品了

0.0.6.6+ 增加全球真人发音

0.0.6.8 点击单词标题可以输入查词

0.0.6.9 增加生词本功能

调用更多词典（沙拉查词等）

0.05+ 已支持调用 uTools 的更多词典功能，比如，沙拉查词插件，中英词典插件等，当未安装该插件时，第一次使用会跳转到安装界面。

更多词典配置说明

// 是否开启更多词典 true 开启 false 不开启
const enableTheThirdDicts = true;

// 更多词典设置
const theThirdDicts = [
    {
      // 名字，通常用于提示或显示
      name: '沙拉查词',
      // 图标6x16大小
      icon: 'https://saladict.crimx.com/icons/favicon-16x16.png',
      // 打开命令
      command: `utools://沙拉查词/沙拉查词?{{keyword}}`,
      // 显示位置 toolbar 工具栏; dictpage 剑桥词典内; notfound 查不到时; all 所有位置; 也可以任意组合，用逗号隔开即可; 默认all
      position: 'all',
    },
    {
      // 名字，通常用于提示或显示
      name: '中英词典',
      // 图标16x16大小
      icon: 'https://b3logfile.com/file/2025/10/1760663431439TYe0SV_2-ujPYk4O.png?imageView2/2/interlace/1/format/webp',
      // 打开命令
      command: `utools://中英词典/中英词典?{{keyword}}`,
      position: 'dictpage, notfound',
    },
    {
      // 名字，通常用于提示或显示
      name: 'AI助手',
      // 图标16x16大小
      icon: 'https://b3logfile.com/file/2025/10/ailogo-rcvBWYB.png?imageView2/2/interlace/1/format/webp',
      // 打开命令
      command: `utools://AI%20助手/AI%20助手?${aiPrompt}`,
      position: 'dictpage, notfound',
    },
    {
      // 名字，通常用于提示或显示
      name: '问AI',
      // 图标16x16大小
      icon: 'https://gips0.baidu.com/it/u=1125504705,2263448440&fm=3028&app=3028&f=PNG&fmt=auto&q=75&size=f16_16',
      // 打开命令
      command: aiSearchUrl,
      position: 'notfound',
    }
];

沙拉查词使用效果

当配置中包含显示到 toolbar 时

当配置中包含显示到词典内时

当开启第三方词典，且剑桥词典未查询到内容时

打赏作者

代码下载

👇 打赏后可见（为什么要打赏后可见？主要想通过这种方式统计使用人数及用户需求，以帮助作者分析哪些功能是用户最需要的）