使用Chrome插件来补充一些写作软件没有Markdown的坑

场景

技术者写文章,基本少不了Markdown了,但是很多自媒体平台(大而全那种),往往都是坑爹的富文本编辑器(还很多是魔改UEditor,人家官方三年没更新了喂)。

类似这种:

这是很麻烦的一件事,尤其是那些没有代码块的编辑器,没错,说的就是你,头条!这种坑爹玩意儿,就得让程序员手动粘贴代码过来,然后遇到排版不友好的,呵呵,对,说的还是你,头条!于是吧,我就想着,奶奶个熊,没有我就自己写个插件来搞吧。

事实上,我自己的网站上有自己依赖marked做的一套编辑器,还挺好用,但是由于图床问题,还是得每次把富文本粘贴到头条后,删除图片,重新上传,没办法,穷是本命。咳咳,最后做出来了,但是发现,没卵用……喵的,Markdown有代码块,人家富文本还是不支持啊……总之写出来分享下方案与思路。

框架

manifest.json 配置

这里主要是看下content_scripts,这个说是scripts,你也可以看到,是可以塞一些css进去的,不过这里就看js。util.js主要提供一个编辑时候使用的函数,作用是避免每次编辑触发input都转义Markdown2HTML,也就是debounce消抖了。

核心如下(附带throttle节流):

然后是turndown.js,这个是marked.js的反向。marked是把Markdown2HTML,那么turndown就是把HTML2Markdown了。这种东西当然是轮子了,安全好用(npm)。

至于content/index.js,就是核心页面插入的js(不是注入inject,这俩有差,这里不细说),就是document有了就运行的函数,一般都是document_start。这个等下结合插件的js说。

这个文件最后就是看popup.html,这个文件名随意区,作用是点击插件显示的那个小窗户,拿FeHelper看就是这样的:

看下内容:

常规内容,长这样:

就一个输入框和header,没了,监听这个输入框变化。

然后引入js,marked.js就不用说了,popup.js就是这个页面核心js了,下面细说。

到这里,功能页面与资源齐全了(不算icon什么的)。

逻辑

插件的页面输入内容要同步到网页的输入框里面,而且由于网页的输入框是富文本,所以得是Markdown2HTML化之后的HTML字符;

网页启动时候,由于content/index.js加载早于富文本生成,所以想办法获取到富文本的标签;

网页启动时候,如果有草稿,得把草稿内容HTML2Markdown给插件输入框;

基于3,得提示用户在传HTML2Markdown之前,打开popup页面(插件页面),不然传给鬼了(插件页面打开关闭都是重新运行页面)。

一共上面4个核心问题处理,这个简易版插件就完成了(虽然没什么卵用)。

问题1

popup.js

具体都是chrome插件的api,主要看逻辑即可。

问题2,3,4

content/index.js

没错,灵魂是哪个alert,YES!

效果

bug是有的,因为我也没去优化,反正也没用。而且头条这富文本标签挺奇葩的,得去魔改下marked.js才行。

主要是分享下逻辑,以及熟悉下chrome的api。

有兴趣的,可以扒拉源码研究下,没准哪个平台你有兴趣可以做一个完整版的~

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20190901A00SID00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券