撸一个增强博客园markdown编辑器的chrome插件

目录

写在前面


插件默认使用旧版后台https://i1.cnblogs.com/

从开博到现在,在博客园混了快两年了,一直希望能为园友做点贡献。最近写博客的时候,作为markdown的忠实粉丝,感觉博客园textareamarkdown编辑器不是很好用,干脆撸了一个增强版的chrome编辑器,支持自动生成目录。效果见截图:

除了保留了原有的好用的拖拽上传图片外,借助codemirror,提供了代码高亮,缩进,显示行号等常用的编辑器功能,还能自动生成目录。更源码放在github上了cnblogs-mdEditor,欢迎体验,fork和star~,觉得不错麻烦点一下右下角的大拇哥👍。

2018-11-28日更新:支持emoji插入

2018-12-6日更新:支持高亮设置中的自定义css,详情见github

2019-1-15更新,应大家要求,已发布到chrome应用商店传送门>>

2019-1-26更新,支持基本的字体加颜色功能

2019-1-31更新,支持搜索、插入斗图表情包。

uploading-image-916183.png

点击搜索出的图片即可插入文章中,默认宽度30%,如下图:

安装

折腾过chrome插件的同学应该对安装插件都不陌生,这里我就简单说明一下:

  1. 在浏览器中输入chrome://extensions
  2. 打开开发者模式
  3. clone仓库
  4. 点击加载已解压的扩展程序,选择clone下来项目里的app文件夹
  5. 如果一切正常,打开新增随笔时即可看到一个船新的markdown编辑器,没有成功的同学可以在下面留言

这里再介绍一下设置主题。chrome的各版本下插件选项的位置不一样,最新的chrome(我的是67.0.3396.99)需要在插件的左下角点开详细信息,然后才能看到设置选项,老一点的版本,在详细信息旁边有个选项按钮,下面是新版本chrome设置截图
屏幕快照 2018-07-26 下午10.41.44.png

如何写一个chrome插件

这是一个很大的题目,我就根据自己的经验,写简单点,带还不了解的同学入门,不对的地方还望大佬指正。根据官网文档的说法,一个chrome插件可能会包括以下列出的一个或者多个部分:

  • Manifest
  • Background Script
  • UI Elements
  • Content Script
  • Options Page

manifest.json是一个json文件,也是chrome插件的配置文件。定义了Chrome 插件的名称,版本号,所需权限(如储存,跨域)等信息。举个🌰

...
  "content_scripts": //当页面地址符合matches时,注入下面js和css文件并在页面加载完成式执行
    [
      {
          "matches": ["https://i.cnblogs.com/*"],
          "js": ["scripts/jquery.js","scripts/codemirror.js","scripts/markdown.js","scripts/marked.js","scripts/cnblogs.js"],
          "css": ["styles/3024-night.css","styles/codemirror.css"],
          "run_at": "document_end"
      }
    ],
  "options_ui": {//配置设置页面
    "chrome_style": true,
    "page": "options.html"
  },
  "permissions": [// 权限字段,储存,跨域,web请求,跨域都需要在这里配置
    "storage",
    "clipboardRead",
    "clipboardWrite",
    "activeTab",
    "webRequest",
    "*://*.cnblogs.com/"
  ],
...

Background script运行于后台,用于监听插件所需要的浏览器事件信息,并调用相应的逻辑。

UI elements包括一个弹窗(popup),一个新的标签页所要显示的html页面或者在右键快捷菜单中添加一栏。相应的配置字段如下:

...
"default_popup": "popup.html",
"chrome_url_overrides" : {
   "newtab": "override_page.html"
},
...

上面两个字段的值都是相对于json的相对路径。只要相对路径写对,就可以像写网页一样开发插件的UI界面了。打个比方,借助popup.html可以开发一个插件,用于获取github每天新出现的受欢迎的项目,传送门:

Content Script就是针对某一部分特定的网页添加相关功能,比如本文提到的这个插件。在manifast.json中配置content_scripts,即可在特定的时机向特定的网页注入你的插件代码和样式。

Options Page是插件为插件用户提供的设置页面,它也是一个普通的html页面,对应于manifast.json中的options_ui字段,来设置设置页面的相对路径。

总结

整体而言,写一个chrome插件还是比较容易的,借助chrome提供的api,可以作出让自已有成就感的插件。有梯子的同学可以到官方文档查看更详细的教程,或者看看园子里这篇干货

欢迎大家提issue和PR(完)

posted @ 2018-07-28 12:33  饭特稠  阅读(2685)  评论(14编辑  收藏  举报