昨天我們已經學會如何將範本文字儲存到使用者的帳號中，並且依照使用者編輯下次點擊打開也會是編輯後的結果。一定也不會忘記我們實作的時候，有先把原本想好的範本文字貼到筆記本上吧！

今天我們就來製作初始預設範本吧！
要做初始預設範本就要來用 background.js 啦！

什麼是 background.js

在 Manifest V3 之後，background.js 其實就是 Service Worker。
它的角色是整個 Extension 的「幕後管理員」，負責：

• 初始化資料（第一次安裝或更新時）
• 處理長期事件（例如排程、Alarm API）
• 接收並轉發不同組件的訊息

而初始化資料（第一次安裝或更新時就是我們要做的事！
要達成這個功能我們還要知道一個很重要的 API
那就是 chrome.runtime.onInstalled

什麼是 chrome.runtime.onInstalled

Chrome 提供了chrome.runtime API 擷取服務工作人員、傳回資訊清單的詳細資料，以及監聽並回應擴充功能生命週期中的事件。
其中 onInstalled 事件，可以在 Extension 安裝或更新的時候觸發。
因此我們就是要使用這個 API 來完成我們的初始化範本！

實作

1. 我們在之前建立的 background.js 中，先建立一個參數儲存我們初始範本

     const defaultReviewTemplate = `Hello {REVIEWER_NAME}，這是最新的 {MR_LINK}，再麻煩你，謝謝`;
   

2. 接著，使用chrome.runtime.onInstalled

   chrome.runtime.onInstalled.addListener(async () => {
      //這邊就是 Extension 第一次安裝或更新的時候會執行的程式碼囉
   });
   

3. 我們要在一開始先去 chrome.storage 抓看看使用者有沒有儲存過範本，如果沒有就幫他把初始範本存到 chrome.storage 中

    chrome.runtime.onInstalled.addListener(async () => {
        const {
            reviewTemplate
        } = await chrome.storage.sync.get(['reviewTemplate']);
   
        // 當現有模板為空時，寫入預設模板
        if (!reviewTemplate) {
            chrome.storage.sync.set({
                reviewTemplate: defaultReviewTemplate
            });
        }
    });
   

實際測試

• 至 chrome://extensions/ 找到 Extension 移除並重新載入
• 點選 Extenstion icon，我們就會看到初始範本囉~
• 也可以編輯一下，看看昨天的功能有沒有正常執行！

參考來源

• runtime.onInstalled - Chrome Developers
• Service Workers (Background Scripts) - Chrome Developers

現在我們已經會儲存範本了，接下來就可以來整合文字囉~ 明天見！