Web ページを正しく保存するのに苦労していませんか? 8,000 個のスターを獲得したオープンソース拡張機能を使用すると、1 回のクリックで Web ページ全体を完璧に保存できます。

導入

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

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

プロジェクトアドレス:

https://github.com/gildas-lormeau/シングルファイル

インストール

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

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-developing-it-side-loading

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/
クローム: https://chrome.google.com/extensions/detail/mpiodijhokgodhhofbcjdecpffjipkle
マイクロソフトエッジ: https://microsoftedge.microsoft.com/addons/detail/efnbkdcfmcmnhlkaijjjmhjjgladedno
または、zip ファイルを手動でダウンロードし、ディスクに解凍して、次の手順に従って手動でインストールすることもできます: https://github.com/gildas-lormeau/SingleFile/archive/master.zip

使い方は簡単

ページが完全に読み込まれたら、拡張ツールバーの「SingleFile」ボタンをクリックしてページを保存します。ページの処理中にもう一度ボタンをクリックすると、操作がキャンセルされます。

現在のタブの内容
選択されたコンテンツ
選択したフレーム

拡張ツールバーまたは Web ページ上の SingleFile ボタンを右クリックしてメニューを開くと、作業内容を保存できます。
1 回のクリックで複数のタブを処理して保存することもできます。
選択したタブ
未修正タブ
すべてのタブ
メニューから「ページに注釈を付けて保存...」を選択します。
テキストを強調表示できます
コメントを追加する
削除されたコンテンツ
自動保存が有効になっている場合、ページは読み込まれるたびに自動的に保存されます。
ダウンロードされたファイルは、ブラウザの設定で指定されたダウンロードフォルダーに保存されます。

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

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

Dockerを使用してインストールする

Docker Hubからインストール

 docker pull カプセルコード/ 単一ファイル
docker タグcapsulecode / singlefile singlefile

手動インストール

 git clone --depth 1 --recursive https://github.com/gildas-lormeau/SingleFile.git
 cd 単一ファイル/cli
 docker build --no-cache -t singlefile 。

走る

 docker で単一ファイル "https://www.wikipedia.org" を実行します

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

 docker で単一ファイル "https://www.wikipedia.org" > wikipedia.html を実行します。

手動インストール

グローバルダウンロードとインストール

Chrome または Firefox がインストールされており、実行可能ファイルが PATH 環境変数経由で見つかるかどうかを確認します。
Node.jsをインストールする
SingleFile をダウンロードしてインストールするには、次の 3 つの方法があります。

 npm インストール-g " gildas-lormeau/SingleFile#master"

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

 master.zip を解凍します。
 cd シングルファイル- マスター
npm インストール
cd cli

ソースコードからGitをインストールする

 git clone -- 深さ1 -- 再帰https://github.com/gildas-lormeau/SingleFile.git
 cd シングルファイル
npm インストール
cd cli

走る

文法：

 単一ファイル< url > [ 出力] [ オプション... ]

ヘルプを表示:

 単一ファイル-- ヘルプ

ページのコンテンツを指定したファイルに保存する

単一ファイル https://www.wikipedia.org wikipedia.html

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

単一ファイル --urls-file=list-urls.txt

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

ユーザースクリプトは、SingleFile がページを保存する前または後に実行できます。

SignleFile の場合:

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

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

 dispatchEvent(新しいCustomEvent("単一ファイルユーザースクリプト初期化"));

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

 addEventListener("キャプチャ前の単一ファイルリクエスト", () => {
 console.log("ページはSingleFileで保存されます");
 });

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

 addEventListener("キャプチャ後の単一ファイルリクエスト", () => {
 console.log("ページはSingleFileによって処理されました");
 });

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

 (() => {
 const 要素 = 新しい Map();
 const 削除された要素セレクター = "img";
 dispatchEvent(新しいCustomEvent("単一ファイルユーザースクリプト初期化"));
 addEventListener("キャプチャ前の単一ファイルリクエスト", () => {
 document.querySelectorAll(削除された要素セレクター).forEach(要素 => {
 const placeHolderElement = document.createElement(要素.タグ名);
 elements.set(placeHolderElement, 要素);
 element.parentElement.replaceChild(placeHolderElement、要素);
 });
 });

 addEventListener("キャプチャ後の単一ファイルリクエスト", () => {
 Array.from(elements).forEach(([placeHolderElement, element]) => {
 placeHolderElement.parentElement.replaceChild(要素、placeHolderElement);
 });
要素をクリアします();
 });
 })();

DUICUO