そうだChrome拡張つくってみよう

2020-11-27 Web 岐大祭2020

普段使っている大学の LMS（教員が講義資料を配布したり学生が課題を提出したりするのに使われる Web アプリ）にちょっと不便だなーという点があったので、それを解決する Chrome 拡張機能を思いつきでつくってみた。開発から ChromeWeb ストアへの公開まで一通りやったので、その流れやつくったものについて紹介する。

完成品

Drag and Drop Extension for AIMS という名前で ChromeWeb ストアにて公開している（名前が長いので何とかしたい）。

今回作ったのは課題を提出するページにて、学生が課題の PDF ファイルなどを提出ページにドラッグ&ドロップするだけでアップロードできるようにするという拡張機能。ドラッグ&ドロップでアップロードすること自体はブラウザの標準機能でも一応可能だが、それでもこの拡張機能が必要な理由は以下の比較を見ていただければわかるだろう。

拡張なしの素の状態

素の状態でドラッグ&ドロップする場合、赤枠の狭い範囲にしかドロップできない上にファイルをドラッグしても「ファイルを選択」ボタンの色がほんの僅かに変化するだけで非常にわかりにくい。筆者自身もこの拡張機能を作ろうと思った段階では標準機能でドラッグ&ドロップできることを知らなかった。

拡張を使わない場合のスクリーンショット

拡張機能を導入後

課題提出の画面を開くと画像のような枠が追加される。ここにファイルをドラッグすると…

拡張機能導入後のスクリーンショット1

このように枠が水色に変化しドロップできることがわかりやすい。

拡張機能導入後のスクリーンショット2

そもそも拡張機能って何するの

筆者自身も拡張機能でできることを完全に把握しているわけではないが、語弊を恐れずざっくり言えば「ユーザーがブラウザで開いた任意の Web サイトの HTML に対して自作の CSS や JS を実行して HTML を操作できるモノ」だと思う（実際にはもっと色々なことができるらしい）。今回作った拡張機能の場合は、

https://aims2.gifu-u.ac.jp/courses/*にマッチする URL の Web サイトで、
submission_attachmentというクラスを持つ要素が存在する場合、
その要素の中に、予め用意したファイルをドロップするための枠にあたる要素を追加する
追加した要素にドラッグ&ドロップした際の CSS の切り替えやファイルを扱う処理を行う EventListener を追加する

といった処理を JavaScript で記述することで実現している（正確には 1 は後述する manifest.json に、2〜4 は JS に記述している）。

拡張の開発

ファイルを用意する

manifest.json

拡張機能の名前や JS, CSS, アイコン画像等のパス、どの URL の Web サイトで拡張機能を動かすのか、ユーザーに要求する権限などを記述する json ファイル。

アイコン画像

拡張機能を追加した際にアドレスバーの横に表示されるアイコン。 16, 48, 128px 四方の 3 種類用意すると良い。とりあえず Inkscape で適当に作った。

contents.js

上記の処理をここに記述している。ファイル名は何でも良い。

style.css

JS で追加するドロップ枠部分のスタイルを指定している。

以上の 4 点（JS と CSS は拡張機能の内容によって有無が変わる）を用意すれば最低限自分の手元のデバイスで動作させることができる。自分専用の拡張機能の場合はここまでで完成でも良いだろう。

ストアに掲載する

作成した拡張機能を他の人にも使ってもらいたい場合は ChromeWeb ストアに掲載する必要がある。以前はここ以外の Web サイトからインストールできる API が用意されていたようだが 2018 年に廃止された。掲載方法についても詳しく解説している記事が豊富なため詳細な手順は割愛し、「意外とそれらの記事で触れられていないものの個人的に気になると思ったポイント」のみお伝えする。

ストア掲載にはお金がかかる

ChromeWeb ストアに掲載するにはデベロッパー登録が必要となり、最初に 5 ドルの登録料を支払う必要がある。 1 アカウントにつき 1 回だけ請求されるのでどれだけ拡張機能を公開しても追加費用は発生しない。以前は URL 限定公開や非公開の場合は登録料が不要だったため、その頃の記事には料金不要と書いてあったりするので注意されたい。ちなみに支払いに PayPal は利用できなかった。

拡張機能のアップロード

用意した各種ファイルはまとめて zip に固めてアップロードする。

ストアでの公開方法

公開方法は一般公開、URL 限定公開、指定ユーザーにのみ利用可能（非公開）の 3 パターンを任意に切り替えできる。非公開にした場合は、自分で指定した Google アカウントの持ち主のみ拡張機能を利用できる。 1 人ずつアカウントを指定する以外にも、自分が所有する Google グループや GoogleWorkspace のドメイン内にのみ公開することもできる。

公開方法に関わらず審査が入る

公開には審査が必要となる。初回はもちろん、拡張機能の中身や Web ストアでの設定を変更する場合（公開方法の切り替えを含む）も審査が行われる。審査は今回開発した極めて小規模なものでも毎回 2〜3 日かかった。審査に出している最中は Web ストアの設定や掲載する情報の編集はできない（審査中は実質作業が止まるため、審査提出は計画的に）。

公開後の Web ストア上の URL

審査を通過すると ChromeWeb ストアに拡張機能が掲載されるのだが、その掲載ページの URL がどこにあるのかわからず探したので一応紹介。「ストアの掲載情報」という項目名からしてこの下のほうにリンクがありそうだが無い。実はデベロッパーダッシュボード内のタイトル部分がそのまま Web ストアへのリンクとなっている。

デベロッパーダッシュボード

まとめ

審査が入ったり登録料が必要だったりと Web ストアの申請周りの敷居が少々高いのがデメリットではあるが、日々のちょっとした不便の解消に週末 DIY 的な感覚でやってみると案外楽しいので是非オレオレ拡張機能をつくってみてはいかがだろうか。

Prog-G

岐阜大学プログラミングサークル