Chrome Extension demo 说明

Chrome Extension demo 说明

因为工作中的需要，所以就开发了一个 Chrome 扩展（插件），这个扩展的主要功能包括如下几点
- 划词翻译
- i18n yaml 文件的导入
- 翻译内容的保存，yaml 文件的导出

项目地址 GitHub。GitHub - Felix-Prince/crx-i18n-extension: 基于 react 开发的 Chrome 翻译 extension

总结一下开发过程中使用的技术以及遇到的问题
使用的技术
1. 翻译使用的是 translation.js
2. 读取文件 FileReader
3. yaml 转 json js-yaml 这个包
4. 语言包的导出使用的是 FileSaver.js 这个插件包

遇到的问题
1. 用的是 create-react-app 这个脚手架搭建的项目，而这个是一个 SPA，webpack 的入口只有一个，但是因为 Chrome 插件的有多个不需要在页面中直接引入的文件，比如 background.js 、content-script 等，因此也就导致了无法直接在这些个文件中使用 import 导入的方式，解决方式有两种，一种是直接在页面文件中通过 script 的方式引入，第二种就是修改 webpack 的入口，改为多入口
2. 数据的读取、导出、修改，这里直接使用了 Chrome 的本地存储，读取的数据直接本地存储，然后在本地存储中进行修改和读取，但是毕竟本地存储的大小是有限的，所以这样的方式是不合理的，最好的方式还是通过接口请求的方式去处理，（网上有说大小差不多是 5M 的样子，也不是特别大）

参考文章
https://wizardforcel.gitbooks.io/chrome-doc/content/1.html
https://developer.chrome.com/extensions
写一个chrome翻译插件 - 个人文章 - SegmentFault 思否
使用React.js开发Chrome插件 | UncleChen的博客
【干货】Chrome插件(扩展)开发全攻略 - 我是小茗同学 - 博客园