目錄
寫在前面
插件默認使用舊版后台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更新，支持搜索、插入斗圖表情包。
點擊搜索出的圖片即可插入文章中，默認寬度30%，如下圖：
安裝
折騰過chrome插件的同學應該對安裝插件都不陌生，這里我就簡單說明一下:
- 在瀏覽器中輸入
chrome://extensions - 打開開發者模式
- clone倉庫
- 點擊加載已解壓的擴展程序,選擇clone下來的app文件夾
- 如果一切正常，打開新增隨筆時即可看到一個船新的markdown編輯器,沒有成功的同學可以在下面留言
這里再介紹一下設置主題。chrome的各版本下插件選項的位置不一樣，最新的chrome(我的是67.0.3396.99)需要在插件的左下角點開詳細信息，然后才能看到設置選項，老一點的版本，在詳細信息旁邊有個選項按鈕，下面是新版本chrome設置截圖
如何寫一個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（完）