amakanのブラウザ拡張を更新して再申請した

https://amakan.net/ のこの辺の改善の続き。

https://github.com/amakan/amakankan

amakan のブラウザ拡張である amakankan のコードを幾つか更新して、Chrome ウェブストアと Mozilla アドオン開発者センターに再申請した。ブラウザ拡張の開発に携わる予定のない人は「大変そう」と思いながら一瞥してもらえると良いと思う。

Yarn を導入した

npm パッケージ管理に yarn を導入した。以前、Firefox アドオンを申請したとき、審査担当者に「添付されたソースコードを見てみたけど、手元の環境ではインストールできなかったよ。悪いけど npm-shrinkwrap を導入してくれる？」と言われたことがある。

  • 自分は macOS で開発している
  • macOS ならインストールできるはずである
  • 審査担当者は別の OS を利用している可能性が高い
  • npm-shrinkwrap はクロスプラットフォームでの利用に問題を抱えている…

ということで、当時はそこで何度かやりとりして上手くいかず、アドオンの登録を諦めていたという事情もあった。今は yarn を導入するのが明らかに正解だと思うので、普通にこれを導入した。

Docker を導入した

クロスプラットフォームという話題が出たように、複数の OS で利用される Web ブラウザ拡張の開発においては、様々な OS が関わる可能性が高い。開発環境の OS に依存する問題に悩まされるのを避けるためにも、Docker を導入した。また Windows を利用している開発者の方が、ベルアラートというサービスからのインポート機能を追加するために Pull Request を送ってくれたりしていたので、何となくこの辺りで Docker を使うように移行しておいたほうが良かろうと考えた。

CircleCI を導入した

これまで TravisCI を利用していたが、慣れているということと、Docker を利用するのが比較的簡単ということから、CircleCI に移行した。当たり前だが CI の中でも開発環境同様に Docker イメージを利用するようにした。

npm-run-all を導入した

これまで npm run watch:a & npm run watch:b のような力強いコードを書いていたが、流石に問題が起きがちで困るだろうなとも思っていたので（しかし実際に問題が起きたことはなかった）、この手の並列実行したいタスクは npm-run-all で管理するようにした。

Webpack を導入した

これまで Browserify を利用していたが、複数のエントリポイントと複数の生成物が必要となっている現状や自分の Webpack に対する習熟度を鑑みて、Webpack に移行した。

Crx を導入した

Chrome と Firefox のブラウザ拡張をつくるには、ソースコードを zip 形式で圧縮する必要がある。これまでは macOS で利用できる zip コマンドでこれを用意するようにしていたが、これは公式の Node.js 用の Docker イメージでは利用できない。そこで、crx という Chrome 拡張のパッケージング用のライブラリに付いている CLI ツールでこれを賄うことにした。zip 圧縮のためだけにしか利用していないので少し無駄の多い使い方ではある。

https://github.com/oncletom/crx

生成されるコードを最適化した

Webpack に移行して webpack-bundle-size-analyzer で簡単に解析できるようになったので、コンパイル時に不要なコードを取り除くなどして、ブラウザ拡張の容量を最適化した。最適化前までは 数百kB だったが現在は 140kB 程度。

Firefox 用にコードを修正した

Chrome 拡張としては妥当でも 現在の Firefox 拡張では動かないコードというのは結構あるもので、手元の Firefox で拡張をインストールして動かしてみながらトライアル & エラーを重ねた。

通常の Firefox では署名されていない（つまり公式の方法で配布されているものではない野良の）アドオンはインストールできないので、Firefox Developer Edition を利用し、about:config を操作して、署名されていないアドオンをインストールできるように設定を加える必要がある。Firefox にはアドオンのデバック機能が付いているので、アドオンを動かしてみて意図通り動かなかったときに、これを利用してエラーの内容をコンソールから確認することができる（このデバッガ、少し動作が重くて怪しいが動くことには動くのでそれだけでもありがたい）。

今回発見された問題点は大きなものは 2 つで、1つは content script にて window.fetch の URL にパスのみの URL を渡したときに Firefox ではエラーとなってしまう件。Chrome 拡張の場合、これは開いているページの URL のホストで補ってくれたが、Firefox ではどうやら正確に指定する必要がある模様。もう1つは、manifest.json の permission の項目に background というものが（もはや）存在しないということ。

開発者用にドキュメントを追加した

前述したベルアラート対応や、以前の TSUTAYA LOG 対応、ブクログ対応、読書メーター対応、Amazon 対応などは、すべて自分以外の開発者の人達が実装してくれたものである（よく考えると自分では何も対応していないことになる…）。自分が利用していないサービスに対応するというのは、使い方も分からずデータも持っていないという理由からかなり難しいので、こういうように利用している人に対応してもらえると非常に助かる。

今後もそういう人達に助けてもらえると嬉しいので、開発者用のドキュメントを少しずつ増やしていくことにした。最初の一歩として、README に（簡単にではあるが）ビルド方法などを記述した。あまり記述量を増やしても管理できずに質が下がってしまいそうだけど、ソースコードの変更に合わせて少しずつ変えていったりしている。

Chrome ウェブストアに再申請した

v0.7.0 が「取り下げられている」という状態だったので、新しいバージョンのソースコードをアップロードし、プライバシーポリシーなどを含めて少し説明文を書き加え、新しいバージョンを申請した。現在は（一度取り下げられているので）担当者による審査待ちというステータスになっている。Firefox アドオンと違って、担当者と直接言葉をやり取りするようなフォームや項目が一切提供されていないので、公開が取り下げられた直接的な理由などは判断できず、繰り返すとアカウントごと削除される場合もあるようで、緊張する。

Mozilla アドオン開発者センターに再申請した

Firefox アドオンの方も再申請してみた。Firefox アドオンは人間によるレビューのフローが必ずあり、ものによっては「ソースコードが minimize されているので元々のソースコードをくれ」と言われる場合もあるので、対応する必要がある。くまなく調べればバージョンごとにソースコードをアップロードできるようになっていることが分かるので、オリジナルのソースコードを zip か何かで圧縮したものをアップロードしておくと、この余分なやり取りが省略できてスムーズである。

前に申請したアドオンに新しいバージョンを追加するという形式で進めようとしたが、

  1. 新しいバージョンを追加しようとすると「AMO ID が異なる」と言われる
  2. 新しいアドオンを別途作成しようとすると「既に同じ AMO ID のアドオンが存在する」と言われる

という状態に陥ったので、既存のアドオンはなくなく削除して、更にその状態でも「既に同じ AMO ID のアドオンが存在する」と言われるようだったので、manifest.json に別の ID を指定して再作成した。

ところで『Mozilla アドオン開発者センター』という名前が正しいのかどうか分からず、どうもあのサイトの名前がはっきりしないので、毎回アクセスするたびに「Firefox アドオン 申請」などでググって個人のブログ記事などを辿りながらようやく辿り着いている。

ブラウザ拡張でスクレイピングを行うことについて

amakankan では、ブラウザ拡張からアクセスできる cookie を利用して、他のサービスにログインした状態でスクレイピングを行い、そのデータを同じく cookie を利用しながら amakan に登録する、という方法で読んだ本の一括登録を行っている。これはブラウザ拡張以外の方法でも実現できるとは思っていて、例えば履歴をインターネットに公開しているタイプのサービスなら、amakan にユーザ名を教えてもらってサーバ側でスクレイピングしてあげるとか、moneyforward みたいにパスワードを教えてもらって、そのパスワードで同じくサーバ側でスクレイピングしてあげるというような方法もあるかもしれない（もはや信頼とメリットとの問題になりそう）。

Amazon の本のページから amakan の本のページに移動する機能について

これブックマークレットでも出来るので、わざわざブラウザ拡張入れてもらうよりブックマークレットを宣伝した方が良いかもしれない。