本文作者：Kristian Ivanov
編譯：鬍子大哈翻譯原文：huziketang.com/blog/posts/…
英文連線：Lessons From Building 2 Chrome Plugins
轉載請註明出處，保留原文連結以及作者資訊
簡介
最近我以前開發的一個 Chrome 外掛開始流行起來，主要得益於被 Product Hunt 推薦了（你可以在這看到），所以我決定把當時開發時候總結的一些 tips 和技巧發出來。我開發這個外掛主要是因為看了這篇文章，也送給你們：作為開發者我是如何跟上時代腳步的。
再多一點簡介
Chrome 外掛可以使你的程式可以接觸到更多人（我從各種統計報告中觀察到，Chrome 的市場份額都超過了 50%），如果這裡我說錯了，請在評論中指出，感謝！Chrome 非常穩定，並且它的 API 在 Windows 和 Linux 下的使用方法都是一樣的，就像 Android 可以應用於不同裝置上一樣。
關於外掛開發
Chrome 外掛指令碼可以在多種場合下執行：
- 後臺——後臺指令碼可以一直執行。把 persistent 設定成 false 會生成 事件頁；
- 瀏覽器上——當使用者點選了瀏覽器中外掛圖示時執行；
- 作為內容指令碼——內容指令碼是來自於外掛中的指令碼。注入到當前活動的網頁中，瀏覽器允許它們某種程度的使用瀏覽器資源。
在以前，互動的方式是傳遞訊息，要麼通過 chrome.runtime.sendMessage(...)，要麼通過 chrome.tabs.sendMessage(...)。
提示 1
內容指令碼是在 manifest 檔案中註冊的，這就是說當 Chrome 開啟了匹配的網頁會自動注入指令碼。或者你也可以用程式操控注入。兩種都可以，但是請記住，通過 manifest 註冊的內容指令碼會在網頁載入之後注入，而在使用者安裝外掛之前已經開啟的網頁，不會注入。所以選擇程式自動注入或者結合兩種方式一起使用會比較好。
使用純程式自動注入可以通過 chrome.tabs 監聽來實現，使用 chrome.tabs.executeScript( null, {file: 'example.js});。
我個人的做法是，在 manifest 檔案中描述內容指令碼。那麼正常情況下 Chrome 就會注入了，它會通過傳送一個訊息並且接收返回的響應來檢查指令碼是否準備好。如果響應不是我所想要的，我就強行注入。
提示 2
Chrome 外掛可以重寫預設的 Chrome url（比如開啟新 tab 時）。這是在外掛 manifest 中定義的，因此不能後面做更改。
你還可以對開啟新 tab 加監控。檢查 url，如果不是你想要的 url，可以使用 chrome.tabs.update(data, {url: 'yourUrl'}); 重寫 url 並對其重定向。這個過程也非常快，和定義在 menifest 沒什麼區別。
提示 3
在 Chrome 外掛中使用的都是相對路徑，如果你需要用絕對路徑，可以使用：chrome.runtime.getURL( 'your.html' );。
提示 4
最後一點很重要的是，MDN 文件 中關於瀏覽器外掛的介紹在某些方面要比 Chrome 更加詳細，裡面有很多的例項。
比如這裡是關於 webRequest 的 MDN 和 Chrome 文件的比較，自己來感受吧！
關於開發完以後需要做什麼
你把外掛上傳到 Chrome 商店以後，什麼都不會發生。因為那裡會有上萬的外掛，不要期待著某個人會偶然發現你的外掛，然後愛上了它，又把它分享給他的朋友。
實用技巧 1
首先在你開發外掛之前檢查下確認名字是免費的，開發完以後也要檢查。幾周之前，Darkness （漂亮的黑色系主題）的作者聯絡到我，因為我的一個外掛也命名為 Darkness。當我在寫我的外掛的時候，他已經發布了。so，在你開發完成以後再檢查一次，即便你在剛開始開發的時候是免費的。
實用技巧 2
利用 Reddit。把你的外掛提交到 Reddit 的子版塊中。例如： /r/chrome, r/SideProject, /r/Feedback 和 thread。找到一切可以使用你外掛的場景，提交上去。即便它只給你帶來了 20 個使用者，這 10 - 20 個使用者會給你很多反饋，讓你更加了解使用者是怎樣使用你外掛的，幫助你改善。
實用技巧 3
說到收集使用者反饋，人們對你外掛的感受和你自己是不一樣的。一些你認為顯而易見的、很容易理解的東西對使用者來講並不是這樣。所以如果你的條件允許，儘量使用視訊來講解，而不是圖片，這將會節省你很多你解釋的時間。Chrome 商店允許上傳 YouTube 視訊，也允許使用圖片。
實用技巧 4
Reddit 如果沒有很大的效果和反饋，Product Hunt 可以給你帶來更好的效果。這個社群的體驗更好，因為你的外掛在這裡會被更多人看到。在這裡不會像 Reddit 的子欄目中有那麼多釋出的東西。Product Hunt 在 Twitter 上也很活躍。為了更直觀地展示，這裡是 Janus Workspace 在 Product Hunt 上的使用者數增長圖。從圖中藍色點開始到後面的兩天曲線變化。
曲線中間的那個小凸起，是二月份在 Reddit 釋出的時候產生的。
實用技巧 5
Typeform.com 可以製作反饋表，當使用者解除安裝外掛的時候，它會生成一個 url，請求使用者填寫為什麼他會解除安裝外掛的反饋。它的使用很簡單，不需要你操作什麼也不需要後臺。這裡要意識到你會收到很多的回覆，可能會有一些蹩腳的英語，一些已根本不懂的語言或者一些類似於 “ok”、“puf”、“No Me Gusta” 這樣的詞。但是裡面也會有很多有價值的回覆——“它沒有自動捕捉，太棒了！”，“預設視窗分佈非常容易管理。”，“從歷史輸入記錄中提取記錄，簡直太方便了”。
實用技巧 6
Google Analytics 可以應用在你的外掛裡。關於在外掛中如何使用 Google Analytics 的教程在這裡。用 Google Analytics 的資料觀察板可以看到有那麼多的朋友在使用你的外掛，這真的是一件很快樂的事情。
結束語
這篇文章記錄了我最近開發的兩個專案，總結了專案過程中的一些經驗。我不認為自己在開發 Chrome 外掛方面是專家，不過我相信把這些東西記錄下來，對於剛剛接觸 Chrome 外掛開發的開發者會有所幫助。
我最近正在寫一本《React.js 小書》，對 React.js 感興趣的童鞋，歡迎指點。