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插件(扩展)开发全攻略 - 我是小茗同学 - 博客园

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值