起因

因為最近工作比較忙，經常忘記了喝水。作為一名前端開發人員，面對著瀏覽器工作是常態。所以這裏為了解決這個痛點，面向前端開發人員寫了一款瀏覽器插件。他的作用就是提醒喝水。
這裏將半個小時設置為一個周期，大概和番茄工作法的原理一樣。基本上集中註意力半個小時人也就累了。這個時候喝口水，舒緩一下緊張的神經。也作為一個休息的周期。為我們的工作繼續高效的進行奠定了節奏。

成果

這是我做的瀏覽器插件
插件下載地址

開發思路

下面順道介紹一下瀏覽器插件開發思路，編程不光要求理論還要有實踐，擼起袖子直接幹。

• 開始直接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插件開發指南