昨天我們已經成功從 Merge Request 的頁面中取得我們需要的資訊了，今天就來處理另一個重要的資訊吧─範本文字！

我們先前先暫時設定了一個範本文字寫在 popup.html 的 textarea 中

但我們希望範本文字

• 第一次安裝會提供範本
• 使用者可以自己調整內容，並且儲存後即使更換瀏覽器也會同步
  所以我們會需要用到 Chrome Storage！
  也就是我們在 manifest.json 的 permision 中有寫的 storage

{
  "manifest_version": 3,
  "name": "MR 通知文字小工具",
  ...
  "permissions": [
    "storage", 
  ...
  ],

什麼是 chrome.storage？

chrome.storage 是一個專門給 Extension 使用的儲存 API，支援兩種模式：

• chrome.storage.local：存在使用者本機，速度快、容量大（約 5MB）。
• chrome.storage.sync：會跟 Chrome 登入帳號的雲端同步，能跨裝置共用設定（每個 key/value 大約 100KB 限制）。

因此我們這次選擇使用 chrome.storage.sync。

今天我們先來學習完成怎麼從 popup.html 的儲存和讀取存起來吧！

實作範例

1. 我們在 App.vue 新增 script 區塊，並加上以下程式

    <script setup>
    import { ref, onMounted, watch } from 'vue';
   
    const templateContent = ref('')
   
    // 取得 storage 中的模板
    async function fetchData() {
      let {
        reviewTemplate
      } = await chrome.storage.sync.get(['reviewTemplate']);
   
      templateContent.value = reviewTemplate
    }
   
    // 由於每次重新打開 popup，就等同打開新視窗，所以使用 onMounted 重新取得資料
    onMounted(() => {
      fetchData()
    })
   
    // 處理使用者輸入並儲存模板
    watch(templateContent, (newVal) => {
      chrome.storage.sync.set({ reviewTemplate: newVal })
    }, { deep: true })
    </script>
   

   說明：chrome.storage 用法跟 localstorage 很類似

   • chrome.storage.sync.get(...)：取得特定 key 的數值
   • chrome.storage.sync.set(...)：儲存數值至特定的 key 中

2. 把參數綁到 textarea 上(這裡我們先把 textarea 原本的範本文字剪下貼到記事本中，明天再補上！)

    <textarea class="w-full h-20 border-1 border-gray-600 rounded p-2" rows="5" v-model="templateContent"></textarea>
   

實際測試

• 點選 Extenstion icon，我們會先看到空白範本文字(初始範本文字我們明天處理)
• 我們在 textarea 輸入文字
• 關閉 Extension 後再打開會發現輸入的文字仍然存在並沒有被清除，那就是成功囉！

💡:如果想要重新測試的話，就要把 Extension 移除重新載入，就會獲得乾淨溜溜的空白範本囉~

參考來源

• chrome.storage - Chrome Developers

那我們明天就來寫初始範本文字吧！