從開(kāi)發(fā) 2 個(gè) Chrome 插件中學(xué)到的（對(duì)新手的 4 個(gè)提示和 6 個(gè)技巧）

20171112 發(fā)布于2019-08-20 15:37 / 1524人閱讀

摘要：提示插件可以重寫(xiě)默認(rèn)的比如打開(kāi)新時(shí)。這是在插件中定義的，因此不能后面做更改。把你的插件提交到的子版塊中。從圖中藍(lán)色點(diǎn)開(kāi)始到后面的兩天曲線變化。曲線中間的那個(gè)小凸起，是二月份在發(fā)布的時(shí)候產(chǎn)生的。關(guān)于在插件中如何使用的教程在這里。

本文作者：Kristian Ivanov
編譯：胡子大哈

翻譯原文：http://huziketang.com/blog/posts/detail?postId=58dcb330a58c240ae35bb8d9
英文連接：Lessons From Building 2 Chrome Plugins

轉(zhuǎn)載請(qǐng)注明出處，保留原文鏈接以及作者信息

簡(jiǎn)介

最近我以前開(kāi)發(fā)的一個(gè) Chrome 插件開(kāi)始流行起來(lái)，主要得益于被 Product Hunt 推薦了（你可以在這看到），所以我決定把當(dāng)時(shí)開(kāi)發(fā)時(shí)候總結(jié)的一些 tips 和技巧發(fā)出來(lái)。我開(kāi)發(fā)這個(gè)插件主要是因?yàn)榭戳诉@篇文章，也送給你們：作為開(kāi)發(fā)者我是如何跟上時(shí)代腳步的。

再多一點(diǎn)簡(jiǎn)介

Chrome 插件可以使你的程序可以接觸到更多人（我從各種統(tǒng)計(jì)報(bào)告中觀察到，Chrome 的市場(chǎng)份額都超過(guò)了 50%），如果這里我說(shuō)錯(cuò)了，請(qǐng)?jiān)谠u(píng)論中指出，感謝！Chrome 非常穩(wěn)定，并且它的 API 在 Windows 和 Linux 下的使用方法都是一樣的，就像 Android 可以應(yīng)用于不同設(shè)備上一樣。

關(guān)于插件開(kāi)發(fā)

Chrome 插件腳本可以在多種場(chǎng)合下運(yùn)行：

后臺(tái)——后臺(tái)腳本可以一直執(zhí)行。把 persistent 設(shè)置成 false 會(huì)生成事件頁(yè)；

瀏覽器上——當(dāng)用戶點(diǎn)擊了瀏覽器中插件圖標(biāo)時(shí)運(yùn)行；

作為內(nèi)容腳本——內(nèi)容腳本是來(lái)自于插件中的腳本。注入到當(dāng)前活動(dòng)的網(wǎng)頁(yè)中，瀏覽器允許它們某種程度的使用瀏覽器資源。

在以前，交互的方式是傳遞消息，要么通過(guò) chrome.runtime.sendMessage(...)，要么通過(guò) chrome.tabs.sendMessage(...)。

提示 1

內(nèi)容腳本是在 manifest 文件中注冊(cè)的，這就是說(shuō)當(dāng) Chrome 打開(kāi)了匹配的網(wǎng)頁(yè)會(huì)自動(dòng)注入腳本。或者你也可以用程序操控注入。兩種都可以，但是請(qǐng)記住，通過(guò) manifest 注冊(cè)的內(nèi)容腳本會(huì)在網(wǎng)頁(yè)加載之后注入，而在用戶安裝插件之前已經(jīng)打開(kāi)的網(wǎng)頁(yè)，不會(huì)注入。所以選擇程序自動(dòng)注入或者結(jié)合兩種方式一起使用會(huì)比較好。

使用純程序自動(dòng)注入可以通過(guò) chrome.tabs 監(jiān)聽(tīng)來(lái)實(shí)現(xiàn)，使用 chrome.tabs.executeScript( null, {file: "example.js});。

我個(gè)人的做法是，在 manifest 文件中描述內(nèi)容腳本。那么正常情況下 Chrome 就會(huì)注入了，它會(huì)通過(guò)發(fā)送一個(gè)消息并且接收返回的響應(yīng)來(lái)檢查腳本是否準(zhǔn)備好。如果響應(yīng)不是我所想要的，我就強(qiáng)行注入。

提示 2

Chrome 插件可以重寫(xiě)默認(rèn)的 Chrome url（比如打開(kāi)新 tab 時(shí)）。這是在插件 manifest 中定義的，因此不能后面做更改。

你還可以對(duì)打開(kāi)新 tab 加監(jiān)控。檢查 url，如果不是你想要的 url，可以使用 chrome.tabs.update(data, {url: "yourUrl"}); 重寫(xiě) url 并對(duì)其重定向。這個(gè)過(guò)程也非常快，和定義在 menifest 沒(méi)什么區(qū)別。

提示 3

在 Chrome 插件中使用的都是相對(duì)路徑，如果你需要用絕對(duì)路徑，可以使用：chrome.runtime.getURL( "your.html" );。

提示 4

最后一點(diǎn)很重要的是，MDN 文檔中關(guān)于瀏覽器插件的介紹在某些方面要比 Chrome 更加詳細(xì)，里面有很多的實(shí)例。

比如這里是關(guān)于 webRequest 的 MDN 和 Chrome 文檔的比較，自己來(lái)感受吧！

關(guān)于開(kāi)發(fā)完以后需要做什么

你把插件上傳到 Chrome 商店以后，什么都不會(huì)發(fā)生。因?yàn)槟抢飼?huì)有上萬(wàn)的插件，不要期待著某個(gè)人會(huì)偶然發(fā)現(xiàn)你的插件，然后愛(ài)上了它，又把它分享給他的朋友。

實(shí)用技巧 1

首先在你開(kāi)發(fā)插件之前檢查下確認(rèn)名字是免費(fèi)的，開(kāi)發(fā)完以后也要檢查。幾周之前，Darkness （漂亮的黑色系主題）的作者聯(lián)系到我，因?yàn)槲业囊粋€(gè)插件也命名為 Darkness。當(dāng)我在寫(xiě)我的插件的時(shí)候，他已經(jīng)發(fā)布了。so，在你開(kāi)發(fā)完成以后再檢查一次，即便你在剛開(kāi)始開(kāi)發(fā)的時(shí)候是免費(fèi)的。

實(shí)用技巧 2

利用 Reddit。把你的插件提交到 Reddit 的子版塊中。例如： /r/chrome, r/SideProject, /r/Feedback 和 thread。找到一切可以使用你插件的場(chǎng)景，提交上去。即便它只給你帶來(lái)了 20 個(gè)用戶，這 10 - 20 個(gè)用戶會(huì)給你很多反饋，讓你更加了解用戶是怎樣使用你插件的，幫助你改善。

實(shí)用技巧 3

說(shuō)到收集用戶反饋，人們對(duì)你插件的感受和你自己是不一樣的。一些你認(rèn)為顯而易見(jiàn)的、很容易理解的東西對(duì)用戶來(lái)講并不是這樣。所以如果你的條件允許，盡量使用視頻來(lái)講解，而不是圖片，這將會(huì)節(jié)省你很多你解釋的時(shí)間。Chrome 商店允許上傳 YouTube 視頻，也允許使用圖片。

實(shí)用技巧 4

Reddit 如果沒(méi)有很大的效果和反饋，Product Hunt 可以給你帶來(lái)更好的效果。這個(gè)社區(qū)的體驗(yàn)更好，因?yàn)槟愕牟寮谶@里會(huì)被更多人看到。在這里不會(huì)像 Reddit 的子欄目中有那么多發(fā)布的東西。Product Hunt 在 Twitter 上也很活躍。為了更直觀地展示，這里是 Janus Workspace 在 Product Hunt 上的用戶數(shù)增長(zhǎng)圖。從圖中藍(lán)色點(diǎn)開(kāi)始到后面的兩天曲線變化。

曲線中間的那個(gè)小凸起，是二月份在 Reddit 發(fā)布的時(shí)候產(chǎn)生的。

實(shí)用技巧 5

Typeform.com 可以制作反饋表，當(dāng)用戶卸載插件的時(shí)候，它會(huì)生成一個(gè) url，請(qǐng)求用戶填寫(xiě)為什么他會(huì)卸載插件的反饋。它的使用很簡(jiǎn)單，不需要你操作什么也不需要后臺(tái)。這里要意識(shí)到你會(huì)收到很多的回復(fù)，可能會(huì)有一些蹩腳的英語(yǔ)，一些已根本不懂的語(yǔ)言或者一些類似于 “ok”、“puf”、“No Me Gusta” 這樣的詞。但是里面也會(huì)有很多有價(jià)值的回復(fù)——“它沒(méi)有自動(dòng)捕捉，太棒了！”，“預(yù)設(shè)窗口分布非常容易管理。”，“從歷史輸入記錄中提取記錄，簡(jiǎn)直太方便了”。

實(shí)用技巧 6

Google Analytics 可以應(yīng)用在你的插件里。關(guān)于在插件中如何使用 Google Analytics 的教程在這里。用 Google Analytics 的數(shù)據(jù)觀察板可以看到有那么多的朋友在使用你的插件，這真的是一件很快樂(lè)的事情。

結(jié)束語(yǔ)

這篇文章記錄了我最近開(kāi)發(fā)的兩個(gè)項(xiàng)目，總結(jié)了項(xiàng)目過(guò)程中的一些經(jīng)驗(yàn)。我不認(rèn)為自己在開(kāi)發(fā) Chrome 插件方面是專家，不過(guò)我相信把這些東西記錄下來(lái)，對(duì)于剛剛接觸 Chrome 插件開(kāi)發(fā)的開(kāi)發(fā)者會(huì)有所幫助。

我最近正在寫(xiě)一本《React.js 小書(shū)》，對(duì) React.js 感興趣的童鞋，歡迎指點(diǎn)。