導入

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 がページを保存する前または後に実行できます。

1. SignleFile の場合:

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

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

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

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

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

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

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

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

 (() => {
 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);
 });
要素をクリアします();
 });
 })();