この記事は何
Chrome extentionとして「一年の何%経過したかを表示する」拡張を作成したくなったので作成します。元旦から36日経過→10%経過と表示したいです。既存の拡張で完全に同じ機能を持つものが見当たらなかった＋Chtome extentionの作成方法を知りたかったのがモチベです。
作成したもの
chrome拡張としてインストールできます。特定日時まで後何日か・何日経過したかをchromeタスクバーに常に表示します。
Chrome extentionsの作成方法
作成についての基本的な要素は、以下のページを読み進めることで理解します。
- Getting Started Tutorial - Google Chrome：背景の色を帰る拡張を作成しながら必要なファイルについて理解できる
- https://developer.chrome.com/extensions/samples: 基本的な拡張の作成例を検索・ダウンロードできる
日本語記事は以下が参考になります。
公開するまでの流れ
公式の以下のドキュメントを参照して詰まることはなかった。開発者用アカウント購入に$5必要。
注意するべき点は、開発者用アカウント購入後にアクセスできるデベロッパーダッシュボードの[アカウント] > [住所] 欄に記入された情報はストアに表示される点。
開発時に調べたこと
以下は上記のページを踏まえての自分の調べた内容のメモです。
javascriptによる操作
拡張機能サンプルを読み込みChrome上で実行することができたので、はじめに manifest.json にてアプリの説明や名前を書き換える。
background.js内部で時刻にアクセスするための方法について調べる。
- Date.prototype.getMinutes() - JavaScript | MDN
- alarms.create() - Mozilla | MDN
- Date.prototype.getFullYear() - JavaScript | MDN
Date(now.getFullYear(), 0, 0) と現在時刻との差分から経過日数がわかるようなので、そのようにする。
chromeのブラウザ上のアイコン表示を変更したい、 chrome.browserAction.setBadgeText 等から変更できる。
chrome.browserAction - Google Chrome
オンマウス時のツールチップは chrome.browserAction.setTitle から変更できる。ただ、時間を見るためにわざわざオンマウスする機会がなさそうだったので設定しなかった。
chrome.browserAction - Google Chrome
chromeでは setBadgeTextColor のような処理は直接はできないようだった。
Chrome Extension Badge - Text Color - Stack Overflow
チェックボックス で選択肢を表示して、選択した内容をローカルで保存しておきたいので拡張機能から開いたHTMLページにてクリックされた内容を chrome.storage.sync.set で保存して、background.js 内部で値を使用する箇所で chrome.storage.sync.get で値を取り出す。
定期的に時計を更新したいが、これには chrome.alarms.createを用いた。
css
チェックボックス などを表示するページはhtmlで記述する必要あり。
bootstrap等のファイルを追加して、追加したファイルを manifest.json に追記する。
"background": {
"scripts": ["background.js"],
"css": ["css/style.css", "css/bootstrap.min.css"],
"persistent": false
},
