ブラウザ操作中の通信の内容をローカルファイルに自動で保存する

本記事は JavaScript Advent Calendar 2023 の4日目の記事だ。

3日目は @feo52 氏の 最初のレンダリング直前に起動するpagerevealイベント #JavaScript だった。
Window インターフェース に最初のレンダリング直前に呼ばれる pagereveal イベントを追加する提案の実装を Chrome で試してみる内容だ。これは確かに便利そうなイベントに感じる。
令和の IE こと Safari の存在のせいでなかなか Web 標準に組み込まれる敷居が高いものの、是非ワーキンググループでの議論が進んでいただきたいモノだ。
ところで、こういうのって CSS のワーキンググループでドラフトに載ったりするのね。詳しい流れはよく知らんけども。


いにしえの自分の回答がわかりにくい

さて、ブラウザが裏で呼んでいる API の内容をファイルに書き出したかったのだけれども、ファイルサイズが大きいからか開発者ツール経由ではうまく保存できなかった。
そこで、ブラウザ操作中の通信の内容をローカルファイルに自動で保存する方法がなにか無いかな~と探していたら、偶然にも以前に自分自身がスタック・オーバーフローで回答した puppeteer を使った方法についての内容がヒットしてしまった。

すっかり忘れていたのだが、今見返すとちょっとこのままだと使いづらそうなので、もうちょい使いやすくまとめてみる。

基本的には以前に書いた以下の記事と同じ考え方で、 Chrome DevTools ProtocolFetch Domain を直叩きして、特定の通信の内容を横取りしてローカルに保存している。

実際のコード

続きを読む

Android版 Firefox (Fenix) で、任意のアドオンを使えるようにする

この記事では、 Android 版 Firefox Nightly に対して、 TampermonkeyGreasemonkey などの人気のアドオン(拡張機能)を動作させる手順を紹介する。

Firefox とアドオン

Mozilla Firefox (以下 Firefox) といえば、アドオン(拡張機能)と共にあったと言っても過言ではないだろう。

デスクトップ版 Firefox で、処理速度を大幅に向上させた Firefox Quantum の登場とともに、 それまでに使えていたブラウザのアドオンの多くが使えなくなった。
そのために、ただでさえ下降気味だったシェアの低下が更に加速した (筆者調べ) のも、記憶に新しい。

そして 2020年8月、 動作がかなり重かった 旧来 の Firefox for Android (~ v68.11 コードネームFennec) を、 これまた処理速度を大幅に向上させた GeckoView 版 Firefox for Mobile (v79~ コードネーム Fenix) に更新した際にも、 Mozilla は歴史を繰り返した。
それまで使えていた多くのアドオンが Firefox Fenix では使用できなくなり、 Mozilla が認めたごくごく一握りのアドオンしかインストールできなくなってしまったのだ。

誤解して欲しくはないが、 Chrome 等と比べても UI が洗練されていて 動作が軽快な Firefox Fenix を、私はとても気に入っている。
それでもやはり、どうしてもアドオンを使いたいときがあるのだ。

どうやら、 Firefox Fenix に関しては、 技術的に旧来のアドオンが全く動かなくなった訳ではなく、 ポリシー上制限しているだけのようだ。何故そうしているのかわからないけど。

そのためか、 Firefox の実験的なビルドを提供する開発チャンネルである Firefox Nightly に対して、 任意のアドオンをインストールする手段が用意されている。

先に断っておくが、 Nightly 版を常用することはオススメしない
不安定だし、予期しない問題が発生する確率が高いからだ。

それでも、 Stable チャンネルの Firefox Fenix にはインストールできないけど、どうしても動かしてみたい拡張機能がある場合は、有力な選択肢となるだろう。

Firefox に任意のアドオンをインストールする手順

続きを読む

Selenium でページ全体のスクリーンショットを撮る (Python)

02/25 更新: Chrome で水平スクロールバーがスクリーンショットに写ってしまう問題を修正。

Selenium を使って自動テストを行っていると、表示された結果のスクリーンショットを撮って保存したい時がままある。

ところが、 Chrome や Firefox で Selenium のスクリーンショット機能を使うと、 ウィンドウに表示されている内容だけしか取得できない。
(ブラウザやそのバージョンによって動作が異なる)


この記事によると、これは Selenium の仕様らしい。

ブラウザごとの挙動の差はさておき、 ウィンドウサイズでの取得となってしまう Chrome と Firefox で、何とかページ全体のスクリーンショットを保存したい。
ここでは、 Selenium の Python Binding を使って、実現する方法を考えてみる。

続きを読む

PDF のページを好きなサイズの png 画像に変換する たった1つのステップ

document.location = document.getElementById('page1').toDataURL();

Firefox で PDF 開いて任意のサイズで表示し、 開発者コンソール (F12キー) で上記のコード実行すれば、png 画像になって表示される。
あとはその画像を「名前をつけて保存」すればいい。

続きを読む

Windows7 (64bit) で Ztop

個人的には必須アプリとなっているZtop
詳しい便利さは窓の杜に譲るとして、
これをWindows7 (もしかすると64bitだけかも)で使うと、ちょっと問題が起こる。

フォーカスがなくても、マウスの直下にあるウィンドウにホイールが送れる機能があるのだが、
(つまり最前面に出ていないウィンドウも、ホイールでスクロールできる)
この機能をONにすると、Firefoxのタブ切り替えが片方にしかできなくなる。

XPで使っていた頃はそんなこと起こらなかったので、Windows7か、64bitか、どちらかの問題だろう。

Ztop自体は64bitに対応しておらず、作者サイトの実験室なるページで64bit版がひっそり公開されている……のだが、これに切り替えても、問題は解決しない
※64bit版は通常(32bit)版と同時起動で使うことに注意。
 (64bitと32bitの両方のアプリで、ウィンドウメッセージをホックするためだろう。)

んじゃぁ、「ホイールを直下のウィンドウに送る」使わなければいいじゃない、ということになるが、
この機能はかなり多用していたので、外したくない。

そんなわけで、ちょこちょこ調べてみると、どうやら64bit環境で発生するこの問題の解決方法は、
「ホイールを直下のウィンドウに送る」をOFFにする。
「は?」と言われてしまいそうだが、ちょっと待って欲しい。
隠し機能で入っている、マウスボタンの機能で同様の機能を使えばいいようだ。
続きを読む