tags: ItIron2022 Javascript

前言

昨天我們接觸到擴充套件popup的功能，今天讓我們利用另外兩個常見的功能讓瀏覽器定期提醒你要補充水份吧！ 沒意外的話我們就已經帶過幾個最常見的擴充套件功能，明天開始就會進入其他主題囉！

預期成果

我們為了不要結石需要多喝水，因此這次我們的目的是在你使用瀏覽器時定期向你推送通知提醒你喝水！ 如下圖所示，每隔一段時間瀏覽器會自動跳出通知，非常的簡單直白！

Getting started

Step 1: 專案結構

同樣請你建立資料夾、manifest.json、background.js並下載以下的圖片

Step 2: 修改manifest.json

請在manifest.json中寫入以下的內容，這次我們會用到兩個新的permissions，除此之外並不需要其他的額外設定！

{
  "name": "Water Intake Reminder",
  "description": "It's a simple extension to remind you to drink more water.",
  "version": "1.0.0",
  "manifest_version": 3,
  "background": {
    "service_worker": "background.js"
  },
  "action": {},
  "icons": {
    "16": "./32x32.png",
    "32": "./32x32.png",
    "48": "./32x32.png",
    "128": "./32x32.png"
  },
  "permissions": ["notifications", "alarms"]
}

Step 3: 修改background.js

老樣子！動手前先想清楚你要做什麼！ 由於我們希望這個套件定期透過瀏覽器發送通知，我們必須先想辦法實現定期這個功能，你也許會直覺想到以下的語法。

setTimeout(()=> {
 // do something
}, 1000)

但很遺憾的是在chrome extension background中他是利用service worker去執行，因此並不是一般我們熟知的瀏覽器環境，裡面沒有你認識的window & document這樣的物件，常見的setTimeout或alert都無法在background script中運作．

好在google chrome本身有提供新的api讓我們使用，這邊我們可以用chrome.alarms方法來達到定期/定時的效果，alarms則又分為監聽與建立等操作，你需要先建立alarms的監聽器他才會對後續你創建的alarms有所反應，跟我們之前監聽tabs的updated事件其實是一樣的概念！

大致上虛擬碼會是這樣的結構，非常的單純，不需要把alarm想得太難，他就只是一個計時用的鬧鐘，時間到了就會執行你要的操作，與setTimeout/setInterval差異並不大。

建立監聽alarm事件的監聽器
  若有alarm產生，則發送瀏覽器通知

定期發送alarm

理解這些之後我們就看一下這次要寫入background.js的內容吧！

chrome.alarms.create({ periodInMinutes: 45 });

chrome.alarms.onAlarm.addListener(() => {
  chrome.notifications.create({
    type: "basic",
    iconUrl: "./32x32.png",
    message: "Drink some water, my friend",
    title: "Water Time!",
  });
});

首先要注意的是chrome.alarms.create的方法，根據傳入的參數它會有不同的執行結果。
我們看一下官網的說明截圖

大致上來說，三種不同屬性的說明如下

• delayInMinutes: 延遲n分鐘之後發送alarm
• periodInMinutes: 每n分鐘發送alarm
• when: 在指定的時間發送alarm，注意要以毫秒為單位

我們這次需要它不斷的重複，自然是選用periodInMinutes囉！

創建通知的部分相對單純一些，google chrome有提供相當多的屬性讓你選擇，但其實只要傳入type、message與title就可以正常運作了，type的種類分為以下四種

詳情一樣可以看官方文件決定你要用哪一種囉！

Step 4: 載入並實際使用擴充套件

懶得重複了，忘記的朋友請自己去看第一天的文章，我不兇，我只是懶。

總結

今天我們利用了chrome提供的alarm以及notification功能達到了定期發送通知的效果，實際上兩個api是非常常見的組合，應用範圍很廣，比方說有人會用來監控股票的價格並在達到某個價格後發出通知、或是哪個推特又更新了之類，妥善運用的話有機會是不錯的工具！

短時間內擴充套件的應用就到此為止，雖然這四天大多數的套件都很廢，但我們確實透過這些廢套件講了一些相當基本但應用範圍很廣的技巧，你可以從中發想適合自己的套件做練習，再次強調，這幾天的教學只是給你個開門磚而已? 明天我們就從新的主題開始吧！

文章中的範例程式碼可以在這邊取得，歡迎自行取用

轉職Q & A

Danny, 我已經確定想要轉職了，但我聽說還要選擇前端或後端?我自己沒有任何美術天份、沒有美感這種東西，那我是不是直接選後端就好?

我懂你，我也沒有美感這種東西，我也不是非常喜歡切版，比起在那邊弄css/html，我更喜歡玩弄一些js的邏輯，但我最終還是選擇前端工程師作為我踏入工程師職場的第一份工作，主要有以下的原因，基本上都是個人當時的認知

• 現在前端的生態已經慢慢以各種框架為主，不再將所有邏輯都交給後端處理，前端也有相當多的邏輯可以玩
• 稍具規模的團隊都會有設計師，美感這種事情給他們煩惱就好，你的工作只是要有足夠的能力實現他們的設計即可，設計與前端開發是完全不同的技能組，把前端工程師當設計師用我覺得有點慣?
• 前端的領域變化得更快，兩年一大變，我認為這種快速變化的環境更適合我這樣沒背景的轉職者，只要你學得夠快你就有足夠的競爭力，相對的比較沒有這麼要求背景

綜上，即便我對自己美感能力的評價極低，我現在還是以前端工程師的身份在職場上打滾，所以不要因為美感這種東西就決定你的職涯方向，何況只要你越往高階的地方走，前後端其實你都需要有基本概念，一開始好好先選一邊鑽研進入職場就行了！

本文章同步發布於個人部落格，有興趣的朋友也可以來逛逛~!