給博客園編輯器完善個插件及簡單產品化工做

      個人需求是這樣的，平時使用有道來寫筆記（分享方便 ），同時若是有些文章以爲比較適合公開的話會考慮放到博客園進行分享。嘗試了找了一些方法發現能在瀏覽器裏拷貝有道的文章並粘貼到博客園的編輯器裏。但這種方法對於圖片有個缺陷就是文章裏的圖片是使用有道的連接，我不想由於有道連接可能失效從而影響我整篇文章的閱讀。

 

     可是翻遍了互聯網也沒找到方便的自動上傳的工具（有些可能由於寫的比較早不能匹配如今的插件或域名了），因此只能本身開發來解決了。好在程序員有個習慣就是分享源碼，因而打算在 https://github.com/skayzhang/cnblogs-PicPlugin 的基礎上修改來解決。固然以前沒有寫過Chrome插件得從新學，用了兩個半天的時間完善插件併發布到Chrome應用市場方便後續其餘人員使用。同時分享Chrome插件從開發開發布。

 

插件信息

簡介

將編輯器中的外鏈圖片自動上傳到博客園中，支持Markdown和TinyMCE編輯器。

 

Chrome 插件市場地址

https://chrome.google.com/webstore/detail/cnblogs-remote-image-uplo/mnpinmcpoapihjgphgdadakmibpdljlo

 

百度網盤下載地址

https://pan.baidu.com/s/1X_iqLQhWuDTlfQPfk_bdvg

 

Chrome市場截圖

 

使用截圖

 

Chrome插件從開發

基礎

Chrome 插件開發基礎介紹： https://www.cnblogs.com/liuxianan/p/chrome-plugin-develop.html

 

源碼文件結構

• manifest.json，用來配置全部和插件相關的配置，必須放在根目錄
• content-scripts.js，實現經過配置的方式輕鬆向指定頁面注入JS和CSS
• background.js ，幾乎能夠調用全部的Chrome擴展API（除了devtools），並且它能夠無限制跨域，也就是能夠跨域訪問任何網站而無須要求對方設置CORS

 

建議直接下載一個框架或現成的代碼來進行開發調試

 

插件調試

加載插件

在Chrome的插件管理中直接加載一個未打包的插件（打開插件的源碼目錄）。若是腳本更新請直接點擊插件頁面的刷新圖標而不是點那個Update...

 

content-Scripts.js的調試

默認狀況下打開開發者工具的源碼選項裏是當頁面的文檔系統，所以須要點擊右邊的箭頭打開Content Scripts。再打到你的插件打開源碼進行斷點調試。

 

background.js的調試

background.js的調試是打開插件詳情，點擊background page的連接，在彈出的窗口中可斷點調試

 

發佈到應用市場

註冊開發者

打開Chrome應用商店，在配置菜單中打開開發者中心，須要繳納5美圓的驗證費用以後即時開通。

 

上傳和發佈應用包

開發者帳戶開通後點擊添加新內容，按要求上傳源碼的ZIP文件及截圖，介紹等信息

 

提交以後可能有一個審覈時間，大概2天左右便可看到已發佈的插件。

 

總結

       Chrome 插件的開發並不複雜，在這裏主要是想講一個思惟。程序員不少會寫或者分享一些功能或代碼，但卻不多有人會把它作成產品或宣傳。而做爲一個使用者來講仍是太複雜，我本身也花一天時間來找可是沒有找到合適的。以上我作的工做其實主要就是把前人分享的代碼再產品化的過程，讓須要使用的人能夠很是簡單的經過點擊幾步就能使用。同時寫這篇文章也是宣傳的過程讓更多的人知道而且使用。這個可能就是不少開發作產品化最後失敗的緣由，就是沒有作到產品和市場。而這些工做與代碼開發比起來同樣重要。

 

仍是感謝分享代碼的同窗，須要使用的可直接到Chrome插件市場下載，並但願能給予5星好評 :) ，關於產品化的工做歡迎留言評論。