chrome拡張機能 - アウトプットをあれこれと

今回のとりあえずやってみるはchromeの拡張機能。普段からadblock系やVue.js Devtoolsをブラウザに導入して使っているけど、その作り方に関する知識はまったくのゼロ

今回はchrome公式ドキュメントをGetting Started Tutorialをやってみて、chrome 拡張機能のお作法を学んでみる。 (お作法全体を振り返りません、自分がポイントだと思うところを書きだすだけなので、チュートリアルとして利用しないで。。)

最終的にはオリジナル拡張機能を作る予定なので、記事をシリーズ化して今後まとめていこうかなと。

persistentオプション

バックグラウンドスクリプトに対して設定できるオプション persistentは持続的なという意味

persistent: trueにすると、バックグラウンドスクリプトが常に"アクティブ"でメモリ上にロードされている
一方、persistent: falseにすると、バックグラウンドスクリプトがイベント発火時にメモリにロードされるイメージ

persistent: falseにすることが推奨されていて、つまりイベント駆動のバックグラウンドスクリプトにしなさいという話らしい
(参照: Migrate to Event Driven Background Scripts)

  chrome.storage.sync.set({color: '#3aa757'}, function() {
    console.log("The color is green.");
  });

上記のコードでバックグランドの変更色を設定している。この情報は普通のdevtoolでは確認できないようで、consoleから確認するしか術がないようだ。

chrome://extensions/ → バックグランドページ(どの拡張機能のリンクをたどってもよい) → consoleタブ

上記でたどり着いたconsoleから、

chrome.storage.sync.get(null, function (data) { console.info(data) });

を実行すると、設定した値が確認できる