chrome header 获取_逻辑练习，用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什么的)。

---

逻辑

1. 插件的页面输入内容要同步到网页的输入框里面，而且由于网页的输入框是富文本，所以得是Markdown2HTML化之后的HTML字符；
2. 网页启动时候，由于content/index.js加载早于富文本生成，所以想办法获取到富文本的标签；
3. 网页启动时候，如果有草稿，得把草稿内容HTML2Markdown给插件输入框；
4. 基于3，得提示用户在传HTML2Markdown之前，打开popup页面(插件页面)，不然传给鬼了(插件页面打开关闭都是重新运行页面)。

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

问题1

popup.js

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

问题2，3，4

content/index.js

没错，灵魂是哪个alert，YES！

---

效果

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

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