Chrome拡張機能を作ろう


こんにちは。MS部の山本です。

突然ですが、みなさんは「chrome拡張機能」使ってますか？
chrome拡張機能とは、Google Chrome ブラウザに便利な機能を追加したり、
好みにカスタマイズしたりできる追加プログラム的なもののことです。

見ているページのキャプチャを撮ってURLで共有したり、
Chatworkをちょっと使いやすくしたり、
ワンクリックで履歴をクリアしたり、
…などなど、私は業務中毎日のようにお世話になっています。

そんな拡張機能を比較的簡単に自作できると知りまして、
自分用に試作してみました。

作ったもの

Googleカレンダーの予定をリストとしてテキスト化する拡張機能
img_01
試作とは言いつつも、せっかく作るのであれば実用的なものにしたいので
日々の日報をそのままカレンダーから抽出できるようなものを想定してみました。

用意するもの

  • Google Chrome ブラウザ
  • テキスト編集ソフト（メモ帳でOK）

必要なファイル

  • manifest.json
  • JavaScriptファイル
  • （任意）HTMLファイル、CSSファイル、画像ファイル

各ファイルを作成

manifest.json

拡張機能の名前やバージョン、対象URLなどの基本情報や設定を記述します。
フォーマットに沿って入力するだけなので簡単です。
マニフェスト ファイル形式

JavaScriptファイル

JavaScriptファイルは、主に挙動面を担います。
今回の機能では

  • Googleカレンダー内の指定のテキストを取得する
  • 取得したテキストをポップアップ内のテキストエリアに成形して出力する

…などをやってもらいました。

最低限ここまでの2ファイルがあれば「取得したテキストをコピペ」までは機能します。
後述では、機能に応じて必要になる見た目の部分を作成していきます。

（任意）HTMLファイル、CSSファイル

HTMLとCSSファイルは、それぞれ見た目部分の骨組みと装飾を担います。
クリックするのみで機能する、Clear Cacheのような拡張機能には必要ないのですが、
今回は、抽出されたテキストを表示、コピペするためのポップアップ部分を作成します。
img_02

画像ファイル

最後に、Chrome上や管理画面で表示される際のアイコンを画像として作成します。

自分のブラウザに作成したファイルを読み込む

  1. chromeを開く
  2. 右上の三点リーダー＞拡張機能＞拡張機能を管理
  3. 右上にある「デベロッパー モード」をクリック
  4. 「パッケージ化されていない拡張機能を読み込む」をクリック
  5. 先ほど作成したファイル一式を格納したフォルダを選択

完成！

画面収録-2024-07-16
無事動きました！
これで、日々の予定作成と日報がちょっぴり楽になります。

今回はフロント中心のシンプルなものですが、
APIやGASの理解があるともっと複雑なものが作れそうなので、今後も色々と試してみたいと思います。

次はSS部中村さんです。
よろしくお願いいたします！

+:-:+:-:+:-:+:-:+:-:+:-:+:-:+:-:+:-:+:-:+:-:+:-:+:-:+:-+:-+:-+:-+:-+

ブログを見ていいね！したくなった方はこちら…
－ジオブレインfacebook－
http://www.facebook.com/GeoBrainCorporation

もっとジオブレインの仕事内容を知りたくなった方はこちら…
－ジオブレインHP－
https://www.geo-brain.com/

+:-:+:-:+:-:+:-:+:-:+:-:+:-:+:-:+:-:+:-:+:-:+:-:+:-:+:-+:-+:-+:-+:-+

banner


Related posts