拡張機能で要素をブロックする（PC版）
さっそくブラウザをダウンロードしてみましょう。LibreWolfを使います。
つぎのURLを検索バーへ入れてEnetrを押します。「Installation」の青いボタンが目印です。
https://librewolf.net/
引用：LibreWolf、LibreWolf Community
Debian（Linux）の場合：
sudo apt update
sudo apt install extrepo -y
sudo extrepo enable librewolf
sudo apt update
sudo apt install librewolf -y
このWebサイト上の画像はハーフトーン画像（C版・籠目網代式）が使われています。Chromium系（Chrome/Brave）では正しく表示されないことがあります。 Mozilla系(Firefox/LibreWolf)のブラウザをご利用ください。
ブラウザを開きます。
青色のオオカミの遠吠えが目印です。
※拡張機能にuBlockOriginがアドイン済み
ブラウザの初期設定
はじめに、拡張機能を使うための初期設定をしていきます。つぎのコマンドを検索バーに入れて Enterを押します。
about:config
１番目に、「Search preference name」と表示されている検索バーに次のように入力します。
xpinstall.signatures.required
「xpinstall.signatures.required」が表示されるので「true」から「false」に変更します。 左端にある左右の矢印がくっついたアイコンをクリックすると切り替えられます。
２番目に、検索バーに次のように入力します。
xpinstall.enabled
「xpinstall.enabled」が表示されるので「false」から「true」に変更します。 左端にある左右の矢印がくっついたアイコンをクリックすると切り替えられます。
３番目に、検索バーに次のように入力します。
extensions.autoDisableScopes
「extensions.autoDisableScopes」が表示されるので数値を「0」に変更します。 左端にある鉛筆アイコンをクリックすると編集できます。
４番目に、検索バーに次のように入力します。
extensions.enabledScopes
「extensions.enabledScopes」が表示されるので数値を「0」に変更します。 左端にある鉛筆アイコンをクリックすると編集できます。
５番目に、検索バーに次のように入力します。
privacy.clearOnShutdown.cache
「privacy.clearOnShutdown.cache」が表示されるので「true」から「false」に変更します。 左端にある左右の矢印がくっついたアイコンをクリックすると切り替えられます。
６番目に、検索バーに次のように入力します。
services.sync.prefs.sync.privacy.clearOnShutdown.cache
「services.sync.prefs.sync.privacy.clearOnShutdown.cache」が表示されるので「true」から「false」に変更します。 左端にある左右の矢印がくっついたアイコンをクリックすると切り替えられます。
７番目に、検索バーに次のように入力します。
browser.cache.disk.enable「browser.cache.disk.enable」が表示されるので「false」から「true」に変更します。 左端にある左右の矢印がくっついたアイコンをクリックすると切り替えられます。
８番目に、検索バーに次のように入力します。
privacy.resistFingerprinting
「privacy.resistFingerprinting」のうち、一番上に項目が表示されるので「true」から「false」に変更します。 左端にある鉛筆アイコンをクリックすると編集できます。※右上の「Show only modified preferences」で項目を絞って表示しています。
この設定は必須ではないのですが、このサイトでは中級編でカラーハーフトーン（C版・黒明彩式）を使用しているためcanvasを有効にしなくてはいけません。また、電子書籍サービスなどは canvasを利用して画像を描画していることもあるので、有効にすることをおすすめします。
さいごに、ブラウザ画面右上のハンバーガーメニュ＜Settings＜Privacy＆Securityとすすみ、 「Delete cookies and site data when LibreWolf is closed」のチェックを外します。
ブラウザをいちど閉じて、開き直して準備完了です。
拡張機能を追加する
つづいて、つぎのリンク（＝test.xpi）をクリックします。拡張機能へ追加するか聞かれるので 「Add」ボタンをクリックします。さらに、ポップアップがもう一度出ますので、 「OK」ボタンをクリックします。
ブラウザの「Extensions」（＝拡張機能）ボタンをクリックして、「テスト拡張機能」が追加されていれば 成功です。
この拡張機能はもう不要なので、Extensions＜設定＜Remove Extensionで拡張機能を削除し、つぎに進みましょう！
フォントをブロックする
では、いよいよ要素の削減をしていきます。 つぎのリンク（＝font.xpi）をクリックします。拡張機能へ追加するか聞かれるので 「Add」ボタンをクリックします。さらに、ポップアップがもう一度出ますので、 「OK」ボタンをクリックします。
ブラウザの「Extensions」（＝拡張機能）ボタンをクリックして、「フォントの削除」が追加されていれば 成功です。
では、例題として決済サービスの「Pay.jp」へ拡張機能オフで入ってみます。F12を押して
開発者画面を表示し、つぎのURLを検索バーへ入れてEnetrを押します。
https://pay.jp/plan
引用：Pay.jp、PAY 株式会社
フォント要素だけで通常の画像の約１．５枚ほどあります。１０ページ見ると５MBくらいになるということです。 こんどは拡張機能をオンにしてみます。
フォント要素のデータ通信量がゼロになりました。見た目もさほど影響がないのがわかります。
スタイルシートをブロックする
つづけて、スタイルシートもオフにしてみます。 つぎのリンク（＝css.xpi）をクリックします。拡張機能へ追加するか聞かれるので 「Add」ボタンをクリックします。さらに、ポップアップがもう一度出ますので、 「OK」ボタンをクリックします。
スタイルシートはWebサイトのレイアウト情報ですので、 ブロックすると見た目が大きく崩れます。しかし、情報収集をメインとしている人にとって 文字以外の装飾が邪魔なときもあります。スタイルシートのブロックはお好みですね。
ブラウザの「Extensions」（＝拡張機能）ボタンをクリックして、「CSSの削除」が追加されていれば 成功です。
では、例題として「一週間で身につくC言語の基本」というページへ拡張機能オフで入ってみます。F12を押して 開発者画面を表示し、つぎのURLを検索バーへ入れてEnetrを押します。
https://c-lang.sevendays-study.com/index.html
引用：一週間で身につくC言語の基本、 シフトシステム株式会社
スタイルシートの要素はそれほど大きくないことがほとんどですが、複数に分けて読み込まれていたり、１つのファイルが １００KBほどあるものもあります。積み重なればやはりデータ通信を食います。こんどは拡張機能をオンにしてみます。
スタイルシートの要素もデータ通信量がゼロになりました。ページによってはおおきくレイアウトが崩れたり、隠れていたメニューバーの 項目がびっしりと出てしまうことはあります。とはいえ、メインの情報はタイトルがあり、文章が固まっているので、だいたいたどれます。
スクリプトをブロックする（おまけ）
さいごに、スクリプトのブロックをしてみます。 つぎのリンク（＝script.xpi）をクリックします。拡張機能へ追加するか聞かれるので 「Add」ボタンをクリックします。さらに、ポップアップがもう一度出ますので、 「OK」ボタンをクリックします。
情報収集メインの場合には、メインの情報部分はhtmlやphpそのものに書かれていることが多く、スクリプトをオフにしても 問題ないことがあります。（＝静的ファイル）しかし、ヘッダーやフッター、メニューバーなどがスクリプトで読み込まれて いる場合、スクリプトをオフにするとページをたどることはできません。（＝動的ファイル）
ログインが必要なページではスクリプトをオンにするか、ブラウザのユーザーを分けて、スクリプトをオンにしたユーザーと、オフにしたユーザーを使い分けるほうがおすすめです。
ブラウザの「Extensions」（＝拡張機能）ボタンをクリックして、「JSの削除」が追加されていれば 成功です。
では、この状態で電子書籍販売サイトの「hont」で書籍検索をしてみます。
F12を押して 開発者画面を表示し、つぎのURLを検索バーへ入れてEnetrを押します。
https://honto.jp/
引用：honto、大日本印刷株式会社
ページが表示されたら、サイト内の検索バーに適当に文字を入れてみましょう。「地球 非電化」と 入れてみました。検索ボタンを押してみましょう。
ページをたどっていくと書籍一覧が表示されていることがわかります。このように、スクリプトなしでも書籍検索だけなら 利用できることがあります。
ユーザーを使い分ける※Linux版（おまけ）
さいごに、使う場面によってユーザーを使い分ける方法を紹介します。LibreWolfにはChromium系のようにユーザー切り替え機能が備わっていませんが、 設定することでユーザーごとのショートカットを作成できます。
１番目に、ユーザーを作成します。端末を起動して、つぎのようにコマンドを入力します。
librewolf -P
ユーザープロファイルが立ち上がるので、「Create Profile…」をクリックします。
つぎのような画面が立ち上がるので、「Next」をクリックします。
つぎのような画面が立ち上がるので、「Enter new profile name」の下のテキストバーにユーザー名を入力します。ここでは、 「情報収集」と入力しました。「Finish」をクリックすると、ユーザープロファイル画面に戻りますので、ユーザー名が追加されていることを 確認してプロファイルを閉じます。
２番目に、ショートカット用のファイルを作っていきます。ファイルマネージャーを起動して、右上のハンバーガーメニューから「隠しファイルを表示」を 選択します。
隠しファイル一覧が表示されるので、「.librewolf」フォルダをクリックします。
さきほど作成した、つぎのようなユーザー名を持つフォルダのプロパティを見ます。
[英数字ランダム].[ユーザー名]
例）z9is4n67.情報収集
おそらく、つぎのようになっていると思います。プロパティにはユーザー名のフォルダ がある場所までのディレクトリのみが表示されるので、ユーザー名のフォルダをくっつけた パスを控えておきます。
/home/パソコンのユーザー名/.librewolf/
↓※LibreWolfで作ったユーザー名のフォルダ名をくっつける
↓
例）/home/tarodata/.librewolf/z9is4n67.情報収集
メモ帳などを使い、つぎのように入力して保存します。今回は「librewolf_collection.desktop」としました。
[Desktop Entry]
Name=[好きな名前]
Exec=nohup librewolf --no-remote --profile "/home/[PCのユーザー名]/.librewolf/[英数字ランダム].[ユーザー名]"
Icon=librewolf
Type=Application
Categories=Network;WebBrowser;
例）
[Desktop Entry]
Name=LibreWolf - 情報収集
Exec=nohup librewolf --no-remote --profile "/home/tarodata/.librewolf/z9is4n67.情報収集"
Icon=librewolf
Type=Application
Categories=Network;WebBrowser;
ファイルマネージャーを開き、ホーム＜.local＜share＜applicationsと進みます。 さきほど作成したdesktopファイルをここに移動します。
端末を開いて、つぎのように入力します。
chmod +x ~/.local/share/applications/librewolf_collection.desktop
アプリケーション一覧を見てみると「LibreWolf - 情報収集」が追加されています。 好きな場所に移動して完了です。
お疲れ様でした！すこしはデータ通信量は軽くなりましたでしょうか？
しかし、開発者ツールを見てみると「honto」サイトは ２MBほどデータ送信されていることがわかります。そのほとんどが画像です。 ここまでは拡張機能とブラウザの機能でカバーできましたが、画像は受信される前に圧縮しなければなりません。 そこで、中級編では無料枠の外部サーバーを使い、画像を圧縮します。そして、拡張機能を使い圧縮した 画像のリンクに差し替えます。
無料枠を使うので永続的に画像を保存することはできませんが、この外部サーバーを使うことで、 PCやスマホの端末に一時保存される期間を操作することができます。これによって、一時保存された画像が 長く使われることでデータ通信を抑えることができるのです。ぜひ、気になる方は中級編へ！
※「進む」をクリックすると、「拡張機能で要素をブロックする ----（スマホ版）」へ移動します。 中級編へ進むかたは「目次」かこちらからお進みください。