結論
両方で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')
サンプル動画
