停止耍廢!Chrome extension再挑戰!(30Days challenge-3)

前言

這已經不是我第一次寫google套件了，上一個作品距今約6個月! 時間可真快~!
這次的成品一樣相當的簡單，很多時候你不需要太複雜的技術就能幫到你:D

專案介紹

我希望弄一個套件去提醒我，每當我打開youtube或是netflix的時候就出現一個倒數計時器，時間一到就跳出視窗詢問我是否要繼續耍廢!如果選擇否則關掉視窗，選擇是則重新開始一次倒數計時。
概念相當的簡單，我們先複習一下要怎麼寫一個簡單的chrome套件，IT邦的很多文章真的都很棒~!幫我省了不少時間研究。

專案需求

• 任何程式碼編輯器，我自己是VScode的愛用者。
• 一個manifest.json檔案，不要懷疑，自己寫一個。
• 3種不同大小的的icon

manifest.json

{
  "manifest_version": 2, //套件框架版本，現行chrome要求至少2以上
  "name": "go-to-work",
  "version": "1.7", //版本號，必填，且一定要是這樣的格式
  "description": "Stop browsing other pages!Go to work!",
  "icons": {   //要準備三種不同大小的icon，可以去iconfinder.com找
    "128": "icon128.png",
    "48": "icon48.png",
    "16": "icon16.png"
  },
  "browser_action": {  //出現在瀏覽器右上角的圖示，就像你所有的套件一樣
    "default_icon": "icon16.png"
  },
  "background": {  //運行的腳本
    "scripts": [
      "eventPage.js"
    ],
    "persistent": false
  },
  "permissions": [ //要使用的權限，這次是要監控分頁，所以選擇tabs
    "tabs"
  ]
}

eventPage.js

//監控開出新分頁
chrome.tabs.onCreated.addListener(function (tab) {
  checkUrl(tab.url);
});
//監控分頁更新
chrome.tabs.onUpdated.addListener(function (tabId, changeInfo, tab) {
  if (changeInfo.url !== undefined) {
    checkUrl(changeInfo.url);
  }
});
//監控現行分頁
chrome.tabs.onActivated.addListener(function (activeInfo) {
  chrome.tabs.get(activeInfo.tabId, function (tab) {
    checkUrl(tab.url);
  });
});

//下方為程式碼
var count = 10; //計數器
var time = 10;  //所設定的時間
var myTimer;    //每秒執行一次的 function

//檢查是否是耍廢的分頁之一
function checkUrl(url) {
  var regex = new RegExp('^https://www.netflix.com/ |^https://www.youtube.com/');
  //若是耍廢的分頁，則先恢復倒數計時，並執行倒數
  if (regex.test(url)) {
    if (myTimer !== undefined) {
      clearTimeout(myTimer);
    }
    count = time
    myTimer = countDown();
  } else {
    //若不是耍廢的分頁，則停止倒數計時
    if (myTimer !== undefined) {
      clearTimeout(myTimer);
    }
  }

  function countDown() {
    count--;
    chrome.browserAction.setBadgeText({ text: count.toString() });
    if (count > 0) {
      myTimer = setTimeout(countDown, 1000);
    }
    else {
      if (confirm("準備好要面對現實了嗎?")) {
        chrome.tabs.query({ active: true, currentWindow: true }, function (tabs)      { 
          chrome.tabs.remove(tabs[0].id)
        })
      } else {
        alert('哼!隨便你!反正10秒後我會再問一次!')
      };
      count = time;
      myTimer = setTimeout(countDown, 1000);
    }
  }
}

此時你的專案結構應該會像這樣

載入套件

這樣前置動作就完成了，接著請你前往chrome://extensions/
選擇左上角的載入未封裝套件，這樣你第一個chrome套件就完成囉!

專案預覽

參考文章

chrome.tabs官方文件
蘿拉拉的鐵人挑戰賽心得