提醒我喝水chrome插件開發指南
阿新 • • 發佈:2018-02-05
工作 定時 raw 番茄 擴展 tabs scripts 插件開發 口水
起因
因為最近工作比較忙,經常忘記了喝水。作為一名前端開發人員,面對著瀏覽器工作是常態。所以這裏為了解決這個痛點,面向前端開發人員寫了一款瀏覽器插件。他的作用就是提醒喝水。
這裏將半個小時設置為一個周期,大概和番茄工作法的原理一樣。基本上集中註意力半個小時人也就累了。這個時候喝口水,舒緩一下緊張的神經。也作為一個休息的周期。為我們的工作繼續高效的進行奠定了節奏。
成果
這是我做的瀏覽器插件
插件下載地址
開發思路
下面順道介紹一下瀏覽器插件開發思路,編程不光要求理論還要有實踐,擼起袖子直接幹。
- 開始直接github找了一個瀏覽器插件代碼 下載到本地。
- 再配合和segmentfault的這篇文章
- 對照著練習。
- 分析自己的需求,就是半個小時通知我一次,那麽最簡單的就是一個後臺運行的定時器,每隔半個小時運行一次。
- 關鍵點在於後臺運行和通知。
- 代碼肯定是最簡單的定時器,對於前端開發人員肯定不用多說,so easy!
- 這裏主要在manifest.json裏面配置
後臺運行,關鍵代碼
// 參考代碼 "background":{//background script即插件運行的環境 "page":"background.html" // "scripts": ["js/jquery-1.9.1.min.js","js/background.js"]//數組.chrome會在擴展啟動時自動創建一個包含所有指定腳本的頁面 }, // 實際代碼 "background": { "scripts": [ "js/background.js" ] },
通知,那就需要瀏覽器的通知權限了,看了單詞,猜了一下那就是permissions這個了。
// 參考代碼 "permissions": [ //允許插件訪問的url "http://*/", "bookmarks", "tabs", "history" ], // 實際代碼 "permissions": [ "notifications" ],
- 這裏的notifucations這個參數是我參考人家寫的插件裏面找到的,當前我這是速成。
- 正規的進行開發學習可以參考官方文檔
- 如果英語不好的同學可以看下這個
360翻譯的文檔
可以參考這個看。結語
感興趣的可以下載插件進行使用- 插件地址
源碼地址
提醒我喝水chrome插件開發指南