Webページを保存するときに「失われる」のですか？8k Starのオープンソース拡張機能、ワンクリックで完全なWebページを保存

【はじめに】：ブラウザに付属のウェブページ保存機能を使用すると、画像が失われることが多く、関連ファイルも多数保存されます。最近、これらの問題を完全に解決できる人気のあるオープンソースツールがGitHubにあります。

序章

SingleFileは、完全なWebページを単一のHTMLファイルにすばやく保存するブラウザー拡張機能およびCLIツールです。

Chrome、Firefox（デスクトップおよびモバイル）、Edge、Vivaldi、Brave、Waterfox、Yandex、Operaなどの主要なブラウザと互換性があります。

プロジェクトアドレス：

https://github.com/gildas-lormeau/SingleFile

インストール

SingleFileは次の場所にインストールできます。

Firefox：https://addons.mozilla.org/firefox/addon/single-file
Firefoxモバイル：https：//blog.mozilla.org/addons/2020/09/29/expanded-extension-support-in-firefox-for-android-nightly/
Chrome：https://chrome.google.com/extensions/detail/mpiodijhokgodhhofbcjdecpffjipkle
Microsoft Edge：https://microsoftedge.microsoft.com/addons/detail/efnbkdcfmcmnhlkaijjjmhjjgladedno
zipファイルをダウンロードしてディスクに解凍し、https：//github.com/gildas-lormeau/SingleFile/archive/master.zipの手順に従って手動でインストールすることにより、手動でダウンロードすることもできます。
- Firefox：https://extensionworkshop.com/documentation/develop/temporary-installation-in-firefox/
- Chrome：https://developer.chrome.com/extensions/getstarted#manifest
- Microsoft Edge：https://docs.microsoft.com/en-us/microsoft-edge/extensions-chromium/getting-started/part1-simple-extension#run-your-extension-locally-in-your-browser-while -サイドローディングの開発

使いやすい

ページが完全に読み込まれたら、拡張ツールバーの[シングルファイル]ボタンをクリックしてページを保存し、ボタンをもう一度クリックして、ページの処理中に操作をキャンセルします。

拡張ツールバーまたはWebページの[シングルファイル]ボタンを右クリックしてメニューを開くと、次の情報を保存できます。
- 現在のタブのコンテンツ
- 選択したコンテンツ
- 選択したフレーム
ワンクリックで複数のタブを処理して保存することもできます。
- 選択したタブ
- 固定されていないタブ
- すべてのタブ
メニューで[ページに注釈を付けて保存...]を選択します。
- テキストを強調表示できます
- メモを追加
- コンテンツを削除する
自動保存が有効になっている場合、ページが読み込まれるたびにページが自動的に保存されます
ファイルがダウンロードされた後、保存パスはブラウザ構成のダウンロードフォルダになります

SingleFileのコマンドラインインターフェイス

SingleFileはコマンドラインから開始でき、Webページに挿入されたスタンドアロンスクリプトとしてNode.jsを介して実行されます。

Dockerでインストールする

DockerHubからインストール

docker pull capsulecode/singlefile
docker tag capsulecode/singlefile singlefile

手動インストール

git clone --depth 1 --recursive https://github.com/gildas-lormeau/SingleFile.git
cd SingleFile/cli
docker build --no-cache -t singlefile .

走る

docker run singlefile "https://www.wikipedia.org"

結果を実行してファイルにリダイレクトします

docker run singlefile "https://www.wikipedia.org" > wikipedia.html

手動インストール

ChromeまたはFirefoxがインストールされており、実行可能ファイルがPATH環境変数を介して検出できることを確認してください
Node.jsをインストールします
SingleFileをダウンロードしてインストールする方法は3つあります。
- グローバルダウンロードとインストール

npm install -g "gildas-lormeau/SingleFile#master"

手動でダウンロードして解凍します

unzip master.zip .
cd SingleFile-master
npm install
cd cli

gitソースのインストール

git clone --depth 1 --recursive https://github.com/gildas-lormeau/SingleFile.git
cd SingleFile
npm install
cd cli

走る

文法：

single-file <url> [output] [options ...]

ヘルプを表示：

single-file --help

例
- ページの内容を指定したファイルに保存

single-file https://www.wikipedia.org wikipedia.html

URLのリストをlist-urls.txtファイルに保存します

single-file --urls-file=list-urls.txt

ユーザースクリプトとの統合

シングルファイルがページを保存する前または後に、ユーザースクリプトを実行できます。

SignleFileの場合：

拡張機能を使用している場合は、オプションページから設定をエクスポートし、JSONファイルを編集し、userScriptEnabled：falseをuserScriptEnabled：trueに置き換え、変更したファイルをSingleFileにインポートして非表示のオプションを有効にします。
CLIツールを使用する場合は、オプション--browser-scriptを使用して、スクリプトパスをSingleFileに渡します。

ユーザースクリプトでカスタムイベントをディスパッチします。

dispatchEvent(new CustomEvent("single-file-user-script-init"));

ユーザースクリプトでカスタムイベントsingle-file-on-before-capture-requestをリッスンします。このリスナー関数は、ページが保存される前に呼び出されます。

addEventListener("single-file-on-before-capture-request", () => {
  console.log("The page will be saved by SingleFile");
});

ユーザースクリプトでカスタムイベントsingle-file-on-after-capture-requestをリッスンします。このリスナー関数は、ページが保存された後に呼び出されます。

addEventListener("single-file-on-after-capture-request", () => {
  console.log("The page has been processed by SingleFile");
});

たとえば、このスクリプトは、保存する前にページから画像を削除し、ページの処理後に画像を復元します。

(() => {
  const elements = new Map();
  const removedElementsSelector = "img";
  dispatchEvent(new CustomEvent("single-file-user-script-init"));
  addEventListener("single-file-on-before-capture-request", () => {
    document.querySelectorAll(removedElementsSelector).forEach(element => {
      const placeHolderElement = document.createElement(element.tagName);
      elements.set(placeHolderElement, element);
      element.parentElement.replaceChild(placeHolderElement, element);
    });
  });

  addEventListener("single-file-on-after-capture-request", () => {
    Array.from(elements).forEach(([placeHolderElement, element]) => {
      placeHolderElement.parentElement.replaceChild(element, placeHolderElement);
    });
    elements.clear();
  });
})();

-EOF-