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

简介: 实现浏览器插件, 基于本地词典数据, 提供网页上英语词语查询汉语释义功能. 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

相关文章
|
10天前
|
开发者
查看edge浏览器插件的安装位置并将插件安装到别的浏览器
查看edge浏览器插件的安装位置并将插件安装到别的浏览器
18 1
|
2月前
|
Web App开发 JavaScript 前端开发
从零开始,轻松打造个人化Chrome浏览器插件
从零开始,轻松打造个人化Chrome浏览器插件
67 0
|
2月前
|
数据采集 Web App开发 JSON
浏览器插件:WebScraper基本用法和抓取页面内容(不会编程也能爬取数据)
本文以百度为实战案例演示使用WebScraper插件抓取页面内容保存到文件中。以及WebScraper用法【2月更文挑战第1天】
115 2
浏览器插件:WebScraper基本用法和抓取页面内容(不会编程也能爬取数据)
|
4月前
ElasticSearch-Head浏览器插件离线安装
ElasticSearch-Head浏览器插件离线安装
91 0
|
3月前
|
Web App开发 前端开发
Chrome 浏览器插件 V3 版本 Manifest.json 文件中 Action 的类型(Types)、方法(Methods)和事件(Events)的属性和参数解析
Chrome 浏览器插件 V3 版本 Manifest.json 文件中 Action 的类型(Types)、方法(Methods)和事件(Events)的属性和参数解析
152 0
|
30天前
|
人工智能 搜索推荐 Linux
一个集 AI + 工具 + 插件 + 社区为一体的Arc 浏览器风格AI客户端
一个集 AI + 工具 + 插件 + 社区为一体的Arc 浏览器风格AI客户端
178 0
|
1月前
|
前端开发 JavaScript 程序员
推荐给前端程序员的5款浏览器插件
推荐给前端程序员的5款浏览器插件
|
1月前
|
Web App开发 JavaScript 前端开发
分析网站架构:浏览器插件
分析网站架构:浏览器插件
39 1
|
4月前
|
Web App开发 安全 定位技术
Chrome浏览器书签同步插件floccus与坚果云的协同使用方法
Chrome浏览器书签同步插件floccus与坚果云的协同使用方法
|
4月前
|
人工智能 安全 测试技术
软件测试/人工智能|Edge浏览器实用插件推荐
软件测试/人工智能|Edge浏览器实用插件推荐
53 0