fineReader，简单CHROME扩展的开发过程

做扩展之前

前几天看在线文章看的眼晕，因为有些网站的排版实在是差。用火狐还好，自带优化阅读的功能，但支持部分网站。谷歌没有，我也不能老是复制粘贴到记事本里调整后阅读，于是想做一个页面，用来辅助阅读。

刚开始的想法很简单，做一个页面，可以把粘贴来的文字，通过JS+CSS处理变得美观一些。
所以刚开始的页面是这样的 https://html50.github.io/fineReader
我想让文字排版，首行空两个，于是使用JS替换原始段落的\n为

,但是遇到一个小问题，浏览器解析时，总是自动补全不完整的HTML，自动闭合了

，导致第一行总是没法优化到。想了半天没办法，我在执行优化函数前，强制的给原始段落加了一个0行的换行才解决。

---

做个扩展？

网页写完了，用着还凑合，但是每次操作很麻烦啊，要先复制，再切换页面，再粘贴。我就想能不能在切换到优化页的时候，自动把粘贴板的内容放到textarea内，完成自动优化。得到的答案一致是浏览器没有能力操作粘贴。我又想，不能操作，那可以模拟键盘Ctrl + V吧，发现只有监听按键的方法，没有模拟按键。我想着也许扩展有相应的API可以操作粘贴，于是开始动手。
看了几篇博文，参考谷歌扩展手册，先把第一个页面转换成了扩展，POPUP式最简单的那种，开发过程很简单，只是要注意JS不能放在HTML内部，只能引用文件执行。但是发现谷歌API同样不存在可以操作粘贴的方法。好像这个思路陷入了死胡同。想了又想，我想到之前写的统计文字的JS里有类似SELECTION的东西，好像可以选取当前用户拖选的文字，于是查到window.getSelection()这个方法，这样就不需要复制粘贴了，进而把插件重新设计，做成了这么一个小插件。

这个扩展使用的是注入到每一个页面的方法，这样保证在任何时候点击扩展，都可以调用。然后添加一个设置页面，用户可以自定义颜色，文字大小等，用到了HTML5的存储功能，然后发现，存储的数据无法读取，扩展的设置内容只存在了扩展所在路径这个域内，其他任何网页与扩展的所在域不同，无法读取数据。换用谷歌提供的存储APIchrome.storage.sync，问题解决。

---

小结

谷歌扩展的开发还是很简单明了的，只要以手册为主，明白了运行原理，写好JS就可以。这次的扩展制作学习了不少JS，也学会制作简单的扩展，下次遇到问题便可以借助扩展更方便的解决问题了。

下载地址：https://github.com/html50/fineReader
PS:由于我没申请谷歌开发者，扩展以crx安装后，再次运行CHROME会被自动停止。