浏览器插件-离线英汉词典

简介: 实现浏览器插件, 基于本地词典数据, 提供网页上英语词语查询汉语释义功能. Show how to implement English to Chinese dictionary using local data in browser extension.

如前文在浏览器插件中读取JSON资源文件末所述, 用浏览器插件实现了不依赖任何在线翻译服务的英汉词典. 由于词典包含77万个词条, 插件大小也达到了13+MB.
2018_10_11_dictionary___

词典数据也包含很多常见短语:
2018_10_11_dictionary___

源码库: program-in-chinese/webextension_english_chinese_dictionary

在火狐插件网站提交审核时, 发现源文件大小有限制, 超过4MB就不能被审核服务自动分析. 于是按每个词典文件五万词条进行分隔(详见转换到JSON; 按五万行分隔json · program-in-chinese/english-chinese-dictionary@10b55f6)

插件源码主要是导入词典数据和查询/显示两部分:

加载词典.js

const 词典路径 = '词典数据/词典'
const 文件扩展 = '.json'
var 词典文件 = {};
for (var 文件序号 = 0; 文件序号 < 16; 文件序号++) {
  词典文件[文件序号] = false;
}
var 词典数据 = {};

function 载入部分词典(文件) {
  return function () {
    var 文件路径 = 词典路径 + 文件 + 文件扩展;
    fetch(chrome.runtime.getURL(文件路径))
      .then((响应) => 响应.json())
      .then((数据) => {
        for (var 英文 in 数据) {
          词典数据[英文] = 数据[英文];
        }
        词典文件[文件] = true;
      });
  }
}

for (var 文件 in 词典文件) {
  载入部分词典(文件)();
}

function 已载入词典() {
  for (var 文件 in 词典文件) {
    if (!词典文件[文件]) {
      return false;
    }
  }
  return true;
}

function 取释义(选中文本) {
  var 释义 = 词典数据[选中文本];
  if (!释义) {
    选中文本 = 选中文本.toLowerCase();
    释义 = 词典数据[选中文本];
  }
  return 释义;
}

主界面.js

function 翻译选中文本() {
  chrome.tabs.executeScript({
    code: "window.getSelection().toString();"
  }, function (选中内容) {
    // TODO: 如果没有toString, 报错: -,.toLowerCase is not function
    var 选中文本 = 选中内容.toString();
    if (!选中文本) {
      置弹窗内容("无选中文本");
      return;
    }
    var 词典接口 = chrome.extension.getBackgroundPage();
    if (!词典接口.已载入词典()) {
      置弹窗内容("载入词典数据中...");
      return;
    }
    var 释义 = 词典接口.取释义(选中文本);
    置弹窗内容(选中文本, 释义);
  });
}

function 置弹窗内容(英文, 释义) {
  var 窗体 = document.body;
  var 英文部分 = document.getElementById("英文");
  var 释义部分 = document.getElementById("释义");
  英文部分.appendChild(document.createTextNode(英文));
  var 多行 = 释义.split('\\n');
  for (var 行数 in 多行) {
    释义部分.appendChild(document.createTextNode(多行[行数]));
    释义部分.appendChild(document.createElement("br"));
  }
}

翻译选中文本();

另, 已在Chrome插件商店发布. 链接如下:

2018-10-12

相关文章
|
6月前
|
机器学习/深度学习 人工智能 文字识别
浏览器AI模型插件下载,支持chatgpt、claude、grok、gemini、DeepSeek等顶尖AI模型!
极客侧边栏是一款浏览器插件,集成ChatGPT、Claude、Grok、Gemini等全球顶尖AI模型,支持网页提问、文档分析、图片生成、智能截图、内容总结等功能。无需切换页面,办公写作效率倍增。内置书签云同步与智能整理功能,管理更高效。跨平台使用,安全便捷,是AI时代必备工具!
480 8
|
8月前
|
Web App开发 人工智能 JavaScript
一键三连不求人!用 CodeBuddy 写个浏览器插件自动点赞、评论、收藏
本文介绍了一款通过 CodeBuddy AI 工具开发的浏览器插件,可自动完成“点赞、评论、收藏”三连操作。作者从需求出发,分四步实现:搭建基础框架、指定目标网页、解析内容并模拟点击事件,最后加载验证插件。借助 CodeBuddy 自动生成代码,整个过程高效便捷,大幅提升用户体验。此工具不仅节省手动操作时间,还为自动化任务提供了新思路,适合热爱技术与效率提升的网页冲浪者尝试。
|
数据可视化 Java Windows
Elasticsearch入门-环境安装ES和Kibana以及ES-Head可视化插件和浏览器插件es-client
本文介绍了如何在Windows环境下安装Elasticsearch(ES)、Elasticsearch Head可视化插件和Kibana,以及如何配置ES的跨域问题,确保Kibana能够连接到ES集群,并提供了安装过程中可能遇到的问题及其解决方案。
Elasticsearch入门-环境安装ES和Kibana以及ES-Head可视化插件和浏览器插件es-client
|
11月前
|
人工智能 程序员 测试技术
AI编程:Coze + Cursor实现一个思维导图的浏览器插件
本文是小卷关于AI编程工具学习的第3篇文章,通过开发一个思维导图生成工具,详细介绍了AI编程的完整流程。从需求分析、插件选择(如Coze的TreeMind),到创建测试工作流、发布API,再到整合API和开发浏览器插件,最终实现了用户选中文字后生成思维导图的功能。文章展示了如何利用现有工具高效开发,并总结了AI编程的优势与未来趋势。
1254 14
|
Web App开发 搜索推荐 开发者
浏览器插件上架指南:如何把你的产品搬上浏览器插件市场
在实践了 Chrone、Firefox、Edge、Opera 等 几个主要的插件平台的上架发布工作后,我觉得很有必要把这个过程和思考记录下来,分享给大家,希望能提供一些参考和避坑的经验。我想通过这篇文章,和大家聊聊「为什么我要做这件事」,以及「这个系列文章会包含哪些内容」。我想用一个系列的文章,记录我是如何把 EmojiClick 搬到浏览器插件市场的,也给大家提供一些借鉴经验。
320 19
|
安全 Oracle Java
edge浏览器加载java插件
edge浏览器加载java插件
929 1
|
编解码 JavaScript 前端开发
JS逆向浏览器脱环境专题:事件学习和编写、DOM和BOM结构、指纹验证排查、代理自吐环境通杀环境检测、脱环境框架、脱环境插件解决
JS逆向浏览器脱环境专题:事件学习和编写、DOM和BOM结构、指纹验证排查、代理自吐环境通杀环境检测、脱环境框架、脱环境插件解决
904 1
|
Web App开发 前端开发 JavaScript
手摸手教你,从0到1开发一个Chrome浏览器插件
开发 Chrome 插件既有趣又具成就感。本教程将引导你从零开始,逐步创建一个简单的 Chrome 插件。首先了解 Chrome 插件是可增强浏览器功能的小程序。以一个基础示例开始,你将学习如何设置开发环境,包括安装 Chrome 和准备文本编辑器,并掌握 HTML、CSS 和 JavaScript 的基础知识。接着,我们将构建插件的基本结构,涉及 `manifest.json` 配置文件、`background.js` 后台脚本、`popup.html` 用户界面以及 `style.css` 样式表。
1070 8
|
Web App开发 JavaScript 前端开发
如何在浏览器中安装使用Vue开发者工具?Vue开发者工具的安装使用?可直接提取插件安装使用
这篇文章介绍了如何在浏览器中安装和使用Vue开发者工具,提供了两种下载方式,包括直接下载编译好的插件和从GitHub上下载源代码后进行打包。文章还详细说明了在Chrome浏览器中加载插件的步骤,以及插件在Vue项目和非Vue项目中的不同表现。
如何在浏览器中安装使用Vue开发者工具?Vue开发者工具的安装使用?可直接提取插件安装使用
|
人工智能 自然语言处理 Linux
免费ChatGPT4o灵办AI可体验浏览器插件
灵办AI就是您所需的最佳助手!我们为您带来了一款多功能AI工具,ChatGPT4o不仅能为您提供精准翻译,还能满足您的对话需求、智能续写、AI搜索、文档阅读、代码生成与修正等多种需求。灵办 AI,真正让工作和学习变得轻松高效!一款多功能智能助手,旨在提升工作和学习效率。它提供实时翻译、对话问答、搜索、写作和网页阅读等服务,支持多种浏览器和操作系统,帮助用户随时获取信息,打破语言障碍,优化内容创作和信息处理。
436 0

热门文章

最新文章