　このページでは、拡張機能についての概要と、ブラウザに拡張機能を読み込ませるまでの手順を書いている。

はじめに

　パソコンでChromeを使いSNSをするのは構わなくても、問題は必要以上にやってしまうこと、そしてそれが日常的に起こること。限られた時間をそうして無意識に空費してしまう。自身もその問題に悩んでおり、どうにか解決したくて、昔は利用時間に制限を設けられる「WasteNoTime」という拡張機能を使っていたが、今年の６月から使用不可になってしまった。
　そこで、自分で「WasteNoTime」のような拡張機能を作成するということに至った。

拡張機能とは

　端的に言ってしまえば、ブラウザに機能を追加させるプログラムのこと。
基本的にはHTMLやJavaScriptといった言語を使い作成されている。一般的にはGoogleウェブストアで拡張機能をインストールして使用するものだと思うが、個人が一から作成することも可能。自分が拡張機能の世界に興味があったのもあり、今回を良い機会と解釈して自身の手で一から拡張機能を作成していく。

事前準備

拡張機能を作成するにあたって、事前に知っておかなければならない知識が二つある。一つはmanifest.jsonファイル、二つ目はchrome API。

manifest.json
最初にmanifest.jsonの概要について。このファイルは、拡張機能の構成とバージョン等の情報、読み込むリソースファイルの定義をする。

chrome API
chrome APIとは、Chrome拡張機能の開発のためGoogleが提供しているAPI。ページ情報を取得したり、ページ読み込みの際にイベントを発生させたり、Web Storageとは違うデータ保存など、拡張機能がブラウザに対して柔軟な対応が出来るようになる。細かな解説については、実装の段階で追々していく。

拡張機能の開発に必要な知識を収集し終わったら、次はどのような拡張にするかをまとめる。作成する拡張機能に関しては「WasteNoTime」という前身がいるが、自分で一から学ぶということも肝心なので、一旦忘れて自身が望む機能を淡々と列挙していく。

拡張機能の目的は利用状況の把握とSNSの抑制が一番であることを忘れずに考えていく。

ブラウザの利用状況の把握が出来る。
特定ページに対して必要以上にしないよう、制限時間を設けられるようにする。
深夜にSNSを利用してしまうことを防ぐため特定時間帯にも制限がかかるようにする。
重要なページには制限の影響が掛からないようにする。
制限時間などは、こちら側から自由に設定できるようにする。

細かい所ではまだあるが、取り敢えず重要な機能面のみはこのくらい。

manifest.json

拡張機能の開発には、まずmanifest.jsonファイルを作成する。前述したように、拡張機能に必要な情報やファイルをここで全て設定する。自分の欲しい拡張機能を実現するために記述したソースコードが下記のものになる。

manifest.json

{
  "name": "もう無駄な時間なんてしない",
  "description": "任意のサイトへの制限時間の設定と閲覧時間の記録",
  "version": "1.0",
  "manifest_version": 3,
  "options_page" : "Time_setting.html",
  "permissions":[	"storage","tabs"],
  "icons":{
          "16" :"images/icons16.png",
          "32" :"images/icons32.png",
          "128":"images/icons128.png"},
  "action": {
  	"default_popup": "popup.html",
  	"default_title": "もう無駄な時間なんてしない",
  	"default_icon": {
          "16" :"images/icons16.png",
  		"32" :"images/icons32.png",
  		"48" :"images/icons48.png",
  		"128":"images/icons128.png"}},
  "background": {	
          "service_worker": "scripts/service_worker.js"
  },
  "content_scripts":[{
  		"run_at":"document_end",
  		"matches":["https://*/*"],
  		"js":["scripts/content_script.js"]
  	}],
  "web_accessible_resources":[{
  		"resources":["lockscreen.html"],
  		"matches":["https://*/*"]
  }]
}

特に重要な箇所がpermissions、action、background、content_scripts、web_accessible_resourcesの5つ。

permission
拡張機能で使用可能にするchrome APIを指定する。今回はデータ保存のstorage、ブラウザの閲覧履歴の読み取りを許可するtabsの2つを使用。

action
拡張機能をインストールした際に追加されるツールバーアイコンの設定。主にdefault_popupが重要な部分で、アイコンをクリックした際に表示するページを指定する。

background
ここでは拡張機能の背後で常に動いてくれるservice workerのJSファイルを定義する。定義できるファイルは一のみ。

content_scripts
ここには特定ページで実行されるJSファイルの設定をする。全てのページの利用時間を記録させるため、特定ページを指定するmatchesに["https:///"]を定義。

web_accessible_resources
特定ページから拡張機能内のファイルにアクセスすることができるようにする。こちらも["https://*/"]を定義。

危うい権限　「アクセスしたウェブサイト上にある自分の全データの読み取りと変更」

今回の拡張機能には、全てのサイトの利用時間を取りたいため、["https://*/"]を設定した。しかし、この権限はやろうと思えばユーザー側のページで何でもできるようになる。ページからこちらの情報を入手したり、勝手にテキストボックスに書き込むといった事も可能。

拡張機能にこの権限を付与できるのは、manifestのmathesに["http://*/"]、["https://*/*"]、["<all_urls>"]、["*//*/*"]の四つ（自身が確認した限り）。

そのため、manifestにこの権限を記述するのは可能ならば控えた方が良い。
また、インストールする際もこの権限が採用されている拡張機能は本当に信用できる所からなのかを確認してからインストールするのが望ましい。

　その後はmanifestで読み込むファイルを作成していく。画像ファイルなどは割愛する。ここまでが出来たら、一先ずmanifest.jsonが読み込めるかを確認する。読み込むには、ブラウザ右上のをクリックし、拡張機能を管理をクリック。拡張機能ページを開けたら、右上のトグルボタンをクリックし、デベロッパーモードにします。その後、表示されるパッケージ化されていない拡張機能を読み込むボタンクリックし、manifest.jsonのあるファイルを選択する。問題なく読み込めたら、画像のようなものが追加される。

　エラーが表示された場合、manifestの記述ミスか読み込むリソースファイルが存在しないかのどちらか。

最後に

　取り合えずこの記事はここまでで終了。次から本格的な実装に入っていく。実装順番としては、下記のような感じ

利用時間の記録を取る機能
特定時間帯の制限
特定ページに対する制限時間
そしてそれら制限の機能を弄れる設定ページ
最後に、利用時間を可視化するグラフを作成する

関連する記事

利用状況把握拡張機能① - 拡張機能の概要とmanifestの読み込み　←現在の記事
利用状況把握拡張機能② - storageとContent Script、Service Workerの役割
利用状況把握拡張機能③ - メッセージ送信と制限処理
利用状況把握拡張機能④ - 拡張機能のdefault_popup
利用状況把握拡張機能⑤ - オプションページとグラフ①
利用状況把握拡張機能⑥ - オプションページとグラフ②
利用状況把握拡張機能⑦ - ソースコード