週末デッドエンド

勉強と日記と怪文書

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(stringobject) というデータを取得。取得できたら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日目。断酒はすこぶる順調。だが、最近寝付きが悪い。遅寝遅起き。 昨日走ったのでちょっとだけ筋肉が疲労

今日は皆既月食だったので、塾の個別指導を少し中断して生徒と観察した。

Chrome拡張機能の説明を読んだ。

明日から、アイコンを押したら時間が表示されるシンプルな拡張機能を作ろうと思う。