Chrome Extension

One Click Page Extractor

表示中のWebページから、読み取りやすい本文、H1〜H3見出し、本文内リンク、ページ内のURL一覧を取り出し、Markdown・プレーンテキスト・URLリストとして保存できるChrome拡張。

ニュース記事、調査ページ、競合サイト、仕様ページ、長いブログ記事を、AIに渡す前の素材や自分用メモとして扱いやすくするための小さな抽出ツールである。

What it saves

ページの情報を、あとで使いやすい形に落とす

本文Markdownをダウンロード

ページタイトル、URL、抽出時刻、H1〜H3見出し、本文、本文内リンクをまとめて保存する。AI要約、記事メモ、ナレッジ化の前処理に向く。

本文テキストをダウンロード

装飾やページ周辺のノイズを落としたテキストを保存する。引用候補の整理、会議前の読み込み、社内メモへの貼り付けに使いやすい。

URL一覧をリンクタイトル付きでダウンロード

ページ内にあるリンクを、リンクテキストとURLのセットで一覧化する。参考資料、引用元、調査先候補を後で見返せる形にできる。

Use cases

こういう時に使う

AI要約に渡す前の素材化

Webページをそのままコピーすると、ナビ、広告、関連記事、フッターまで混ざりやすい。本文と見出しを先に抽出しておくと、AIに渡す情報が整理される。

調査ページの一次保存

あとで読むページを、タイトル、URL、抽出時刻つきで保存できる。ブラウザタブを開きっぱなしにせず、調査ログとして残せる。

参考リンクの棚卸し

記事や仕様ページに含まれるリンクを一覧化できる。引用元確認、競合調査、リンク集作成、社内共有用のURL整理に使える。

長い記事の構造把握

H1〜H3の見出しを抜き出すため、ページ全体が何をどの順番で説明しているかを先に見られる。読む前の全体把握に向く。

Web制作・SEO調査のメモ

競合ページや参考ページの本文構造、見出し、リンクを保存しておける。スクリーンショットだけでは残しにくいテキスト情報を扱える。

社内資料化の下ごしらえ

外部ページの内容を、Markdownやテキストとして手元に保存できる。要点整理、議事録への引用、調査報告の材料にしやすい。

How it works

中で何をしているか

この拡張は、ユーザーがポップアップのボタンを押した時だけ現在タブに抽出スクリプトを実行する。常時ページを監視したり、閲覧履歴を保存したりする作りではない。

  1. 1. 現在タブを確認

    chrome.tabs.query でアクティブなタブを取得し、ページタイトルをポップアップに表示する。対象は http: / https: / file: のページで、Chrome Web Storeなど拡張が触れないページは除外する。

  2. 2. content.jsを実行

    chrome.scripting.executeScript で現在タブに content.js を注入する。ユーザー操作時だけ実行されるため、全サイトへの常時アクセス権限は持たない。

  3. 3. 本文候補を探す

    articlemain[role="main"].entry-content などを順番に探し、見つからない場合は document.body を対象にする。

  4. 4. 不要要素を落とす

    scriptstylenavfooterheaderaside などを除外し、非表示要素や広告らしいID・classを持つ要素も取り除く。

  5. 5. 見出し・本文・リンクを整形

    H1〜H3見出し、正規化した本文テキスト、本文内リンク、ページ全体のリンクを取り出す。canonical URLがあればそれを優先し、なければ現在URLを使う。

  6. 6. Blobでファイル保存

    Markdownまたはテキストをブラウザ内でBlob化し、chrome.downloads.download で保存する。ファイル名はページタイトルを正規化し、日付を付ける。

Program structure

配布物の中身

manifest.json

Manifest V3 の設定ファイル。拡張名、バージョン、ポップアップ、アイコン、権限 activeTab / scripting / downloads を定義している。

popup.html

拡張アイコンを押した時に開く画面。現在ページタイトル、3つのダウンロードボタン、処理ステータスを表示する。

popup.css

ポップアップ画面の見た目を定義するCSS。外部フォントやCDNには依存せず、拡張内のローカルCSSだけで表示する。

popup.js

ボタンクリック、現在タブ取得、抽出スクリプト実行、Markdown・テキスト・URL一覧の生成、ダウンロード処理を担当する。

content.js

実際にページ上で本文候補を探し、不要要素を削除し、見出し・本文・リンクを取り出してポップアップ側へ返す。

README.md

使い方、プライバシー方針、権限説明、初期版でしないことをまとめた説明ファイル。

Output formats

3つの保存形式

Markdown タイトル、Source URL、抽出時刻、Headings、Content、LinksをMarkdown構造で保存する。ChatGPTなどに渡す前の整理済み素材として使いやすい。
Plain text タイトル、URL、抽出時刻、本文、本文内リンクをプレーンテキストで保存する。メール、議事録、社内メモ、テキストエディタに貼りやすい。
URL list ページ全体のリンクを重複排除し、リンクタイトルとURLの一覧として保存する。参考URLの棚卸しや調査リンク集の作成に向く。
Visual guide

画面と出力のイメージ

実物スクリーンショットの代替として、既存サイトのトーンに合わせた静的図解を掲載している。

拡張ポップアップ画面のイメージ。
# ページタイトル ## H2 見出し 本文テキスト... ### H3 見出し - https://example.com/ - 参考リンクタイトル
本文テキスト・URL一覧の出力例。
01ZIPを展開
02chrome://extensions/ を開く
03デベロッパーモードをON
04展開したフォルダを読み込む
インストール手順の図解。
Privacy

ブラウザ内で処理し、外部に送らない

外部APIなし

抽出処理のために外部APIへ通信しない。

外部送信なし

ページ本文、リンク、閲覧中の情報を外部サーバーへ送信しない。

CDNなし

外部CDNやリモートJavaScriptに依存しない配布物である。

データ収集なし

利用データ、閲覧履歴、抽出結果を収集・保存しない。

ブラウザ内で処理

表示中のタブを対象に、手元のChrome内で抽出と保存を行う。

閲覧履歴保存なし

訪問ページの履歴や抽出履歴を拡張側で保存しない。

権限は最小限

activeTab / scripting / downloads のみ。

リモートコードなし

拡張本体にリモート実行コードを含めない。

Limitations

できることと、できないこと

この拡張は、表示中のDOMから読み取れるテキストとリンクを抽出する。ページ構造が特殊なサイト、ログイン後の動的画面、無限スクロール、JavaScriptで後から読み込まれる領域では、見えている内容の一部だけが保存される場合がある。

画像本体の一括保存、HTML完全保存、PDF化、Notion連携、ChatGPT/API連携、自動要約、クラウド保存、履歴保存、複数ページ一括処理は初期版では行わない。

chrome:// ページ、Chrome Web Store、ブラウザが拡張機能からのアクセスを制限しているページでは抽出できない。

Install

開発者モードで読み込む

  1. ZIPをダウンロードする。
  2. ZIPを展開する。
  3. Chromeで chrome://extensions/ を開く。
  4. デベロッパーモードをONにする。
  5. 「パッケージ化されていない拡張機能を読み込む」をクリックする。
  6. 展開した one-click-page-extractor フォルダを選択する。

これはChrome Web Store版ではなく、開発者モードで読み込む配布版である。

会社PCではZIPやJavaScriptがセキュリティで止まる場合がある。その場合はソースTXT版を使って復元する。