從開發 2 個 Chrome 插件中學到的（對新手的 4 個提示和 6 個技巧）

本文做者：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 感興趣的童鞋，歡迎指點。