やってみる

アウトプットすべく己を導くためのブログ。その試行錯誤すらたれ流す。

Chromeのタブが多すぎるのでHTMLファイル化して保存する拡張機能を作った

 思ったより簡単だった。

成果物

 開いているタブを全てHTMLファイルの<li>にしてダウンロードする拡張機能

 ダウンロードした後、タブを閉じて減らせば、タブ多すぎ問題が解決できる。

インストール

  1. ソースコードをダウンロードする
  2. src/1ディレクトリ配下のパスを見つける
  3. Chromeブラウザを起動する
  4. 次のメニュー項目を選ぶ(設定その他のツール拡張機能
  5. パッケージ化されていない拡張機能を読み込むボタンを押下する
  6. 2のパスを選択して開くボタンを押す
git clone https://github.com/ytyaru/ChromeExtension.TabToHtml.20250226171841
cd ChromeExtension.TabToHtml.20250226171841/src/1

使い方

  1. Chromeブラウザの拡張機能アイコンをクリックする
  2. 拡張機能Tab to Htmlをクリックする
  3. 画面に沿って操作する

  1. ダウンロードボタンを押下する
  2. chrome-tabs-...htmlというファイルがダウンロードされる
  3. 2を開く
  4. タブで開いているサイト一覧が表示される

書式

 出力する書式は自由に入力できる。出力できるデータは以下3つである。

キーワード 意味
{{title}} サイトの<title>
{{url}} サイトのURL
{{favIconUrl}} サイトのファビコンURL

 上記キーワードを使って出力する内容とその位置を指定する。

 プリセットはHTML,Markdown,CSV,TSV,TXTの5つだ。プルダウンメニューから選択できる。たとえばHTMLだと以下のようになっている。

<li><a href="{{url}}" target="_blank" rel="noopener noreferre"><img src="{{favIconUrl}}" width="16" height="16">{{title}}</a></li>

 この書式はテキストエリアに表示され、自由に変更できる。

出力

 出力先はファイルとクリップボードの二種類ある。

ボタン 出力先
ダウンロード ファイルに出力する
コピー クリップボードに出力する

タブ多すぎ問題

 ブラウザのタブが余裕で100個を超えてしまう。メモリ超過でフリーズする場合がある。

 こうなる原因は、次のような事態が頻発するからだ。

  1. 判らないことがある
  2. ブラウザでググる
  3. 説明内容に判らないことがある
  4. 新しいタブでググる
  5. 説明内容に判らないことがある
  6. 新しいタブでググる(以下無限ループ)

 世の中、判らないことが多すぎる。そして複雑怪奇であり膨大な前提知識が求められる。それらを必死に調べてインプットしているうちに、PCのメモリが足りなくなる。

 フリーズしてしまい作業が中断・停止され、タイムロス。いい加減にしてくれ💢

  • 私の脳内メモリも足りずにオーバーフローしている
  • 私の怒りも天元突破して爆発する

 また、次のような用途で保存しておきたいとか、すぐ閲覧できる状態にしておきたいことが良くある。

  • よく使う
  • 明日読む
  • いつか読む
  • いつかやる
  • 気になる
  • 覚えておきたい(忘れたくない)

 メモ帳にURLテキストだけを貼っても、それが何なのかパッと見判らない。メモるのも面倒くさい。URLだけ見ても内容が連想できない。URLとタイトルを100タブ以上コピーする作業は現実的じゃない。仕方なく放置する。

 こうして次々とタブが溜まっていく。当然、なるだけ消すようにしている。それでも溜まり続けるのだ。

 「いつかやる」の負債ばかりが溜まっていくようだ。見ているだけで気が滅入る。かといってイザURLを見てみると忘れたくない内容のためタブ削除できない。ぐぬぬ

 そしてついに今の作業のタブが画面の端から先になって見えなくなる! タブ間の移動や視認ができない! あ”あ”あ”あ”あ”! タブ死

対策パターン

  1. PCのメモリを拡張する
  2. ブラウザのProfileを分ける
  3. SBS(ソーシャル・ブックマーク・サービス)を使う
  4. ブラウザ拡張機能を使う
  5. ブラウザ拡張機能を作る

1. PCのメモリを拡張する

 私の使用するマシン、ラズパイはメモリ拡張できない。仮にメモリ拡張して500個のタブを開けたとしても、画面に表示できなくなってタブ選択できなくなり不便な状態になってしまう。

 フリーズは回避できても、タブ選択できなければ意味がない。

2. ブラウザのProfileを分ける

 ブラウザのProfileを分けて、用途別に閲覧サイトの担当を分ける。

 これにてProfileごとに開くタブ数が減らせる。

 残念なことに既にやった上で100件を越えているのだ。これ以上Profileを細分化しても使い分けることができなくなったり、重複して余計にディスクが削られるという問題が出そう。

3. SBS(ソーシャル・ブックマーク・サービス)を使う

 WebサービスにURLを保存させる。これにてタブを減らせる。

 ただしアカウント作成・管理・サ終・サ変などの対応に追われる。いつサ終するかも判らず信頼のおけるデータベースとして利用できない。使いたい時にサ終していたとか、アカウントが消されていたとか、ログインできなくなっているとか、保存数に上限がある等。とかくWebサービスにありがちで信用できない。

4. ブラウザ拡張機能を使う

 既存のブラウザ拡張機能Googleストアからダウンロードする。

 その中にはタブ数を減らすためのツールがたくさんある。

 だが、ダウンロードしようとすると怒られるのだ。

 私のブラウザが古いから更新しろと言うのだ。

 ラズパイのOS更新はしばしばブートしなくなって大変な目に合う。それを避けるためにOS更新はやらないようにしている。また、クリーン・インストールしないとブラウザ更新できない場合も多い。あまりにも大変すぎるので絶対やりたくない。

 それだけ苦労して新しくてしても、やがて時間経過によって再びインストールできなくなるのだ。勘弁してくれ。

5. ブラウザ拡張機能を作る

 仕方ないので自分でブラウザ拡張機能を作る。ソースコードから読み込む機能があるため、自分で書いた拡張機能を読み込ませて動作させる。

 これならバージョンが古いとか、ブラウザ更新しろとか怒られない。

 つまりGoogleストアはインストールを妨害する仕組みでしかない。なにそれいらん。

拡張機能の概要

 今、ブラウザで開いている全てのタブを保存する。

 保存形式はHTMLである。<ul>リストに<a>でリンクする。ついでにファビコン画像を<img>で表示する。

 これをHTMLファイルにしてダウンロードできるようにする。ついでにクリップボードにHTMLテキストを保存できるようにする。

将来の拡張

  • 出力先
    • BolueTooth
    • WebAPI(オンラインストレージ等)
    • ブラウザ内

 いちいちファイル出力するのではなく、ブラウザ内で保存しておき、それをHTML形式で閲覧できる画面を用意したい。また、検索・絞込できるようにしたい。でも大変そうなので今回はHTMLファイル出力までとする。

 ようするに、タブではなく<li>にしたい。一つのタブで開くHTML内にある<li>要素に集約したい。これならタブ一つで済む。これでタブ多すぎ問題は解決できるはず。

 ブラウザでリンクをクリックする等では「新しいタブで開く」が、こうした挙動全般をすべて「HTML内<li>に追加する」に変更したい。そんなことが可能なのかどうかは知らないが。