iT邦幫忙

2021 iThome 鐵人賽

DAY 6
1
自我挑戰組

只不過是想強迫自己定時喝個水有必要那麼麻煩嗎之我想寫一個 Chrome Extension 強迫我喝水系列 第 6

[拯救上班族的 Chrome 擴充套件] 當朋友問我說,為什麼我的頁面怎麼開都是貓咪,你有頭緒嗎? 我 __ __ 怎麼會知道。

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

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

今天會學到

  • 如何使用 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();
  }
});

(injectImgzoomImg 可以參考上一篇實作)

無差別攻擊

其實就是把判斷拿掉xD

injectImg();
zoomImg();

需要注意的

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

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

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


上一篇
[拯救上班族的 Chrome 擴充套件] 你渴望貓咪嗎?那就把貓咪插入到每個頁面吧!
系列文
只不過是想強迫自己定時喝個水有必要那麼麻煩嗎之我想寫一個 Chrome Extension 強迫我喝水6

尚未有邦友留言

立即登入留言