給部落格園編輯器完善個插件及簡單產品化工作
- 2019 年 10 月 13 日
- 筆記
我的需求是這樣的，平時使用有道來寫筆記（分享方便 ），同時如果有些文章覺得比較適合公開的話會考慮放到部落格園進行分享。嘗試了找了一些方法發現能在瀏覽器里拷貝有道的文章並粘貼到部落格園的編輯器里。但這種方法對於圖片有個缺陷就是文章里的圖片是使用有道的鏈接，我不想因為有道鏈接可能失效從而影響我整篇文章的閱讀。
但是翻遍了互聯網也沒找到方便的自動上傳的工具（有些可能因為寫的比較早不能匹配現在的插件或域名了），所以只能自己開發來解決了。好在程式設計師有個習慣就是分享源碼，於是打算在 https://github.com/skayzhang/cnblogs-PicPlugin 的基礎上修改來解決。當然之前沒有寫過Chrome插件得重新學，用了兩個半天的時間完善插件並發布到Chrome應用市場方便後續其他人員使用。同時分享Chrome插件從開發開發布。
插件資訊
Chrome 插件市場地址
https://chrome.google.com/webstore/detail/cnblogs-remote-image-uplo/mnpinmcpoapihjgphgdadakmibpdljlo
百度網盤下載地址
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星好評:)
