經過昨天一鍵插入所有貓咪到每個頁面後，
發現一打開新的頁面又是嶄新的開始，

那怎麼可以？
今天我們要學會如何在頁面載入時，
也插入貓咪的圖片。

今天會學到

• 如何使用 chrome 的 local storage API
• 在頁面剛打開時插入貓咪的圖

使用情境

以這次主題 (喝水的部分xD) ， 我們可能會需要紀錄現在目前的狀態，
比方說在正在喝水的狀態 、 正在上班的狀態、沒在上班的狀態，
那這部分就可以藉由 local storage 去存放狀態，
如果需要判斷的話就從 local storage 去拿現在目前的狀態。
或是 user 在 popup 設定的一些參數，也可以藉此去儲存以便拿取。

如果是想要無差別使用貓咪攻擊的話就沒差了。

Set local storage

基本上就是使用 chrome 所提供的 API ，帶入你想要的 Object 進去，
範例：

chrome.storage.local.set({'status': 'running'})

Get local storage

跟 set 差不多，差別是這邊要帶的是一個 Array

chrome.storage.local.get(['status'], (result)=>{
    console.log(result.status);
})

在每個頁面開啟時插入貓咪

其實主要只需要在 content-scripts 裡頭加上一些料就好了 XD
每個頁面打開時他就會自動先跑那個 scirpts

透過判斷狀態來決定要不要插入貓咪

chrome.storage.local.get(['status'], (result) => {
  if (result.status === 'drinking') {
    injectImg();
    zoomImg();
  }
});

(injectImg 和 zoomImg 可以參考上一篇實作)

無差別攻擊

其實就是把判斷拿掉xD

injectImg();
zoomImg();

需要注意的

在開發過程中發現， local storage 的這API，
並沒有支援使用 async ，只有 callback 形式，
所以如果需要需要自行刻一個或是用 promise all 之類的用法。
不然就會跟我遇到的問題一樣 Orz

(我絕對不會說我找這問題找了一小時多才發現)

以上是今天的分享內容
感謝你的觀看。
希望我們明天會再見面xD