資訊專欄INFORMATION COLUMN
摘要：提示插件可以重寫默認的比如打開新時。這是在插件中定義的，因此不能后面做更改。把你的插件提交到的子版塊中。從圖中藍色點開始到后面的兩天曲線變化。曲線中間的那個小凸起，是二月份在發布的時候產生的。關于在插件中如何使用的教程在這里。
本文作者：Kristian Ivanov
編譯：胡子大哈翻譯原文：http://huziketang.com/blog/posts/detail?postId=58dcb330a58c240ae35bb8d9
英文連接：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 就會注入了，它會通過發送一個消息并且接收返回的響應來檢查腳本是否準備好。如果響應不是我所想要的，我就強行注入。
提示 2Chrome 插件可以重寫默認的 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 視頻，也允許使用圖片。
實用技巧 4Reddit 如果沒有很大的效果和反饋，Product Hunt 可以給你帶來更好的效果。這個社區的體驗更好，因為你的插件在這里會被更多人看到。在這里不會像 Reddit 的子欄目中有那么多發布的東西。Product Hunt 在 Twitter 上也很活躍。為了更直觀地展示，這里是 Janus Workspace 在 Product Hunt 上的用戶數增長圖。從圖中藍色點開始到后面的兩天曲線變化。
曲線中間的那個小凸起，是二月份在 Reddit 發布的時候產生的。
實用技巧 5Typeform.com 可以制作反饋表，當用戶卸載插件的時候，它會生成一個 url，請求用戶填寫為什么他會卸載插件的反饋。它的使用很簡單，不需要你操作什么也不需要后臺。這里要意識到你會收到很多的回復，可能會有一些蹩腳的英語，一些已根本不懂的語言或者一些類似于 “ok”、“puf”、“No Me Gusta” 這樣的詞。但是里面也會有很多有價值的回復——“它沒有自動捕捉，太棒了！”，“預設窗口分布非常容易管理?！?，“從歷史輸入記錄中提取記錄，簡直太方便了”。
實用技巧 6Google Analytics 可以應用在你的插件里。關于在插件中如何使用 Google Analytics 的教程在這里。用 Google Analytics 的數據觀察板可以看到有那么多的朋友在使用你的插件，這真的是一件很快樂的事情。
結束語這篇文章記錄了我最近開發的兩個項目，總結了項目過程中的一些經驗。我不認為自己在開發 Chrome 插件方面是專家，不過我相信把這些東西記錄下來，對于剛剛接觸 Chrome 插件開發的開發者會有所幫助。
我最近正在寫一本《React.js 小書》，對 React.js 感興趣的童鞋，歡迎指點。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/82383.html
摘要：找了一下網上應用商店，其實已經有很多款類似插件，但往往太過陳舊或者性能較差，不能夠滿足個人需求，估自己搗鼓了一個插件。 代碼已經在github更新了 https://github.com/abc-club/c... 請移步github。另外喜歡的話請star。求star求star求star 本文已同步到 https://github.com/abc-club/f... 背景 很多網站都...
摘要：手把手教你做個人火的時候，隨便一個都能賺的盆滿缽滿，但是，個人沒有服務端，沒有美工，似乎就不能開發了，真的是這樣的嗎秘密花園經典的中文手冊。涵蓋前端知識體系知識結構圖書推薦以及入門視頻教程，全的簡直不要不要的了。 JavaScript 實現點擊按鈕復制指定區域文本 html5 的 webAPI 接口可以很輕松的使用短短的幾行代碼就實現點擊按鈕復制區域文本的功能，不需要依賴 flash。...
摘要：特意對前端學習資源做一個匯總，方便自己學習查閱參考，和好友們共同進步。 特意對前端學習資源做一個匯總，方便自己學習查閱參考，和好友們共同進步。 本以為自己收藏的站點多，可以很快搞定，沒想到一入匯總深似海。還有很多不足&遺漏的地方，歡迎補充。有錯誤的地方，還請斧正... 托管: welcome to git，歡迎交流，感謝star 有好友反應和斧正，會及時更新，平時業務工作時也會不定期更...
摘要：官網地址聊天機器人插件開發實例教程一創建插件在系統技巧使你的更加專業前端掘金一個幫你提升技巧的收藏集。我會簡單基于的簡潔視頻播放器組件前端掘金使用和實現購物車場景前端掘金本文是上篇文章的序章，一直想有機會再次實踐下。 2道面試題：輸入URL按回車&HTTP2 - 掘金通過幾輪面試，我發現真正那種問答的技術面，寫一堆項目真不如去刷技術文章作用大，因此刷了一段時間的博客和掘金，整理下曾經被...
摘要：前端每周清單專注前端領域內容，以對外文資料的搜集為主，幫助開發者了解一周前端熱點分為新聞熱點開發教程工程實踐深度閱讀開源項目巔峰人生等欄目。它能夠為我們提供類似于預處理器命名空間等多方面的輔助。 前端每周清單專注前端領域內容，以對外文資料的搜集為主，幫助開發者了解一周前端熱點；分為新聞熱點、開發教程、工程實踐、深度閱讀、開源項目、巔峰人生等欄目。歡迎關注【前端之巔】微信公眾號（ID：f...
閱讀 4693·2021-11-18 13:23
閱讀 896·2021-09-22 15:24
閱讀 1920·2021-09-06 15:00
閱讀 2619·2021-09-03 10:30
閱讀 1278·2021-09-02 15:15
閱讀 2056·2019-08-30 15:54
閱讀 3030·2019-08-30 15:44
閱讀 1449·2019-08-29 15:12
