Chrome のプラグインを作る！ その１ 拡張機能のテンプレを作る

こんばんは！
天気が悪いとテンションもモチベーションも下がります。
ブログの更新頻度も落ちそうですが、本ブログは毎週投稿を目標としています。

ブログを一週間更新していないと叱ってくれるプラグインがあればいい。
そんな思いから、Chrome ブラウザのプラグイン制作、始めました。

ポイント

• JavaScript をブラウザの起動ページにフックする
• JavaScript におけるコンソール、アラート
• JavaScript における時刻の取得

開発・実行環境

下記の環境でコードを実行し、動作を確かめた。

ブラウザ Google Chrome
バージョン: 77.0.3865.120（Official Build） （64 ビット）

PC
プロセッサ: Intel(R) Core(TM) i5-5200U CPU @2.20GHz
メモリ: 8.00 GB
OS: Windows 8.1 (64bit)

コード

とりあえず、こちらの記事[1]を参考にさせていただき、手っ取り早く環境を整えた。
アイコンはここには載せないが、適当なものを用意した。

JavaScript によるプラグインのひな型

window.onload = function() {
  // Who am I.
  console.log('Chrome Plugin Test');

  // Get current time and display it to console.
  var time = new Date();
  const options = {
    year: 'numeric',
    month: 'narrow',
    day: 'numeric',
    hour: 'numeric',
    minute: 'numeric',
    second: 'numeric',
    timeZoneName: 'short'
  };
  const timeFromat = new Intl.DateTimeFormat('ja-JP', options);
  console.log(timeFromat.format(time));
  alert(timeFromat.format(time));

  // Get time object members.
  var year = time.getYear() + 1900;
  var month = time.getMonth() + 1;
  var date = time.getDate();
  var weekDay = time.getDay();
  var hour = time.getHours();
  var min = time.getMinutes();
  var sec = time.getSeconds();
  console.log(year);
  console.log(month);
  console.log(date);
  console.log(weekDay);
  console.log(hour);
  console.log(min);
  console.log(sec);
}

とりあえず以下のことを同時にやった
①プラグインから呼び出される JavaScript の関数を実装
後述のマニフェストでこのファイルを指定しておく。

②コンソールにログを出力
コンソール出力には console.log を呼ぶ。
先に F12 キーを押してデバッグ画面を出しておく。

③ローケル時刻の取得
Intl.DateTimeFormat について。
Intl は国際化 API の名前空間という。
ローケルに依存した処理がここにまとまっているらしい[2]。
Intl.DateTimeFormat はローケル時刻のフォーマットを扱うクラスのコンストラクタである。
コンストラクタの引数は、ローケルの指定と、オプションが多数。
表示形式はオプションを追加することで変更できる[3]。
注意点として、year は 1900 年オリジン、month は 0 オリジンである。

（C 言語といった手続き型言語ではフォーマットを引数とした関数を呼び出すところだが、JavaScript はオブジェクト指向だけあって、フォーマットをオブジェクトにしてしまったということなのだろうか）

④アラートの表示
alert を呼べばOK

マニフェスト

{
  "name": "Chrome plugin test",
  "description" : "Base Level Extension",
  "manifest_version": 2,
  "version": "1.0",
  "browser_action": {
    "default_icon": "icon_32.png"
  },
  "content_scripts": [
    {
      "matches": ["https://www.google.com/", "https://www.google.com/"],
      "js": ["content_scripts.js"]
    }
  ]
}

とりあえず参考[1]に従いコピペ編集した。
www.google.com にアクセスすると、スクリプトが実行される。
ブラウザの起動ページをここに設定しておけば、ブラウザの立ち上げをフックすることに近いのではないだろうか。

実行結果

わーい、動いた！
よしよし、ちゃんとアラートが出力されたぞ。


コンソール出力もばっちりだ。
なんかエラーが出てるが、ようわからんし、とりあえず現段階では無視でいいか

まとめ

最低限、JavaScript、マニフェスト、アイコンの3ファイルを用意するだけでプラグインが作れることが分かった。

感想

ものすごく敷居が低く、1時間もかからずに実装できたと思う。
分かりやすい入門記事を書いてくださった Qiita 投稿者の方には本当に感謝です。

JavaScript を扱ったは今回が初めてだが、雰囲気分かるものだなと思った。
オブジェクト指向という点では、C++ のノリがどこまで通じるのか、だな。

付録

特になし。

参考文献

1. 外部に公開しないミニマムなchrome拡張機能を作るのは1時間も使わずにできる
2. Intl
3. Intl.DateTimeFormat