2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

backgroundでの状態(変数)を変更しcontent_scriptsでも使うChrome WebExtensionコード例

Posted at

結論

両方でchrome.storage.localを使い、つど値を確認する。

chrome.storage.localはコールバックで動く。
プロミス化したければ
chrome.storageを同期的に扱う(ES7 async/await) - Qiita
のコードが参考になる。(試してませんがさすがにもうフラグは必要ないですよね)

動作検証環境

  • Chrome 69

概要

アドオンのアイコンクリックやオプション画面の操作により、それぞれのページで動作するスクリプトの動作を変更したかった。

ただし、メッセージパッシング方式は複雑になる予感があったため、採用したくなかった。

なのでextensionのストレージ機能を使い、双方がこれを参照・書き換える方式にしてみた。

コード例はアイコンクリックで機能自体のオン・オフ(bool)が切り替わるとともに、各ページで実行されるcontent_scriptsでもその変更が観測できるような小さいサンプルである。

使用API

chrome.storage - Google Chrome

参考

javascript - Remember state chrome extension - Stack Overflow

コード

background.js

/**
 * 初回実行時の状態格納
 */
chrome.storage.local.get(['isRun'], (result) => {
  console.log('bg result', result)
  if (!result.hasOwnProperty('isRun')) {
    chrome.storage.local.set({'isRun': true })
  }
  changeIcon(result.isRun || true)
})

/**
 * アイコンをクリックで状態を反転
 */
browser.browserAction.onClicked.addListener(tab => {
  chrome.storage.local.get(['isRun'], (result) => {
    chrome.storage.local.set({'isRun': !result.isRun })
  })
})

/**
 * 現在の状態がわかるように、値が変わったらアイコンのオン・オフを切り替える
 */
chrome.storage.onChanged.addListener((changes, namespace) => {
  console.log('changes', changes)
  for (key in changes) {
    if (key == 'isRun') {
      changeIcon(changes['isRun'].newValue)
    }
  }
})

/**
 * アイコンの切り替え 
 */
function changeIcon(isRun) {
  if (isRun) {
    browser.browserAction.setTitle({title: 'Click Capture : ON'})
    browser.browserAction.setIcon({path: 'icon/switch.svg'})
  } else {
    browser.browserAction.setTitle({title: 'Click Capture : OFF'})
    browser.browserAction.setIcon({path: 'icon/switch-off.svg'})
  } 
}

// chromeのための初期化
browser.browserAction.setIcon({path: 'icon/switch.svg'})
content_scripts.js
console.log('content start')
chrome.storage.local.get(['isRun'], (result) => {
    console.log('result', result)
})
console.log('content end')

サンプル動画

change.gif

2
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?