2021-05-26 Wed. Chrome Extensions
勉強
Getting started - Chrome Developersを読んで調べたことを書く。
Service Worker
service worker とはウェブページやユーザーの操作なしに走るスクリプトのこと:
"service worker is a script that your browser runs in the background, separate from a web page, opening the door to features that don't need a web page or user interaction." Migrating from background pages to service workers - Chrome Developers
service worker を記述したbackground.js
を manifest ファイルに登録する。
background.js
の中身
拡張機能をインストール・更新してすぐに読み込まれる変数(color
)を用意しておく。そして、インストールされたら(chrome.runtime.onInstalled
イベントが起こったら)その変数に値を格納するイベントリスナー(イベントが起こったら走る関数)を用意。
このとき、ユーザーデータを保持・取得・追跡するために storage API ( chrome.storage - Chrome Developers ) を使う。この API も manifest ファイルの "permissions"
に登録。
storage.sync.set
メソッドで拡張機能にデータを保存できる。
console.log
中の%cgreen
などについては console - Web API | MDN を参照。
let color = '#3aa757'; chrome.runtime.onInstalled.addListener(() => { chrome.storage.sync.set({ color }); console.log('Default background color set to %cgreen', `color: &{color}`); });
ユーザーインターフェース
html に記述して manifest ファイルに登録 (popup.html
とする )。Chrome のツールバーに表示されるアイコンは"action"
フィールドに登録する。
ツールバーのアイコンを押したときにこの html が走る。
html にボタンを設置して、ボタンに色を付けるためにpopup.js
を用意。
chrome.storage.sync.get(keys, callback)
: storage から keys
(string
かobject
) というデータを取得。取得できたらcallback
が発動する。callback
は省略可。
// Initialize button with user's preferred color let changeColor = document.getElementById("changeColor"); chrome.storage.sync.get("color", ({ color }) => { changeColor.style.backgroundColor = color; });
今回はここまで。次は Layer Logic のセクションから。
日記
断酒15日目。断酒はすこぶる順調。だが、最近寝付きが悪い。遅寝遅起き。 昨日走ったのでちょっとだけ筋肉が疲労。
今日は皆既月食だったので、塾の個別指導を少し中断して生徒と観察した。
明日から、アイコンを押したら時間が表示されるシンプルな拡張機能を作ろうと思う。