我的需求是這樣的，平時使用有道來寫筆記（分享方便 ），同時如果有些文章覺得比較適合公開的話會考慮放到部落格園進行分享。嘗試了找了一些方法發現能在瀏覽器裡拷貝有道的文章並貼上到部落格園的編輯器裡。但這種方法對於圖片有個缺陷就是文章裡的圖片是使用有道的連結，我不想因為有道連結可能失效從而影響我整篇文章的閱讀。        但是翻遍了網際網路也沒找到方便的自動上傳的工具（有些可能因為寫的比較早不能匹配現在的外掛或域名了），所以只能自己開發來解決了。好在程式設計師有個習慣就是分享原始碼，於是打算在 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星好評 :) ，關於產品化的工作歡迎留言評論