[拯救上班族的 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();
  }
});

(injectImg 和 zoomImg 可以参考上一篇实作)

无差别攻击

其实就是把判断拿掉xD

injectImg();
zoomImg();

需要注意的

在开发过程中发现， local storage 的这API，
并没有支援使用 async ，只有 callback 形式，
所以如果需要需要自行刻一个或是用 promise all 之类的用法。
不然就会跟我遇到的问题一样 Orz

(我绝对不会说我找这问题找了一小时多才发现)

以上是今天的分享内容
感谢你的观看。
希望我们明天会再见面xD