← 기사 목록
日本語https://zenn.dev/topics/ai/feed

認証付きWebページをAIナレッジ化するためにChrome拡張でPDF保存する話

추출된 키워드

25
AIナレッジ化·5Chrome拡張·5PDF·5認証付きWebページ·5Notion·4Google Drive·4Markdown·4AI·4メタ情報·3Notion Knowledge Hub·3activeTab·3SaaS·3hidden field·2Authorizationヘッダー·2localStorage·2Cookie·2ChatGPT·2Obsidian Vault·2GitHub·2Chrome Web Store·2OSS·2AI API·2Google Drive API·2Notion API·2HTML·2

원문

9,343
認証付きWebページをAIナレッジ化するためにChrome拡張でPDF保存する話

認証付きWebページをAIナレッジ化するためにChrome拡張でPDF保存する話

はじめに

AIに参照させたい情報ほど、認証の内側にある。

たとえば、SaaSの管理画面、クラウドサービスの設定画面、社内向けポータル、契約中サービスのドキュメント、管理者だけが見られるヘルプページなどです。これらは日々の運用や設計判断では重要ですが、検索エンジンからは見えず、AIにもそのまま渡しにくい情報です。

最近、自分の中で「チャットで得た知見」「運用中に調べた内容」「検証で分かったこと」をNotionやファイルとして残し、AIのナレッジとして再利用する流れを作りたいと考えています。その一方で、認証が必要なWebページの内容をどう安全に取り込むかが課題でした。

そこで、最低限動くChrome拡張を自作しました。

現時点では個人利用を前提にした試作で、リポジトリ名も公開していません。まだ一般公開する段階ではありませんが、作った背景や設計方針は同じ悩みを持つ人の参考になると思ったので、この記事にまとめます。

解決したかった課題

やりたかったことはシンプルです。

ブラウザで開いている認証済みページを、あとからAIが参照しやすい形で保存したい。

ただし、単にHTMLを丸ごと保存したいわけではありません。目的は、Webページをその時点の見た目に近い形でPDF化し、あとからAIや人間が参照できるナレッジとして残すことです。

具体的には、次のような形を目指しています。

  • 表示中のページをPDFとして保存する
  • URL、タイトル、取得日時などのメタ情報を残す
  • 認証が必要な画面の状態を、あとから参照できる形で保持する
  • Notion、Google Drive、ローカルフォルダなどに整理しやすくする
  • 将来的にはPDFをAIで要約・タグ付けできるようにする

一方で、認証付きページを扱う以上、何でも自動で収集するような設計にはしたくありませんでした。

なぜMarkdownではなくPDFなのか

当初、AIに渡すならMarkdown化がよさそうにも見えます。

しかし、認証付きWebページや管理画面では、Markdown化だけでは扱いにくい場面があります。

画面の状態を残したい

管理画面では、本文だけでなく、設定値、表、ステータス、ボタンの配置、警告表示、折りたたみ領域などが重要なことがあります。

Markdownに変換すると、画面上の文脈やレイアウトが失われることがあります。PDFであれば、表示時点の状態を比較的そのまま残せます。

証跡として扱いやすい

運用や検証では、「この時点でこう表示されていた」という記録が必要になることがあります。

PDFは、Markdownよりも証跡として扱いやすく、メール添付、Google Drive保存、Notion添付、社内共有にも向いています。

AIがPDFを読める場面が増えている

最近は、PDFをAIに読み込ませて要約したり、Q&Aしたりする使い方が一般的になっています。

そのため、最初からMarkdownへ構造化するより、まずPDFとして安全に保存し、必要に応じて後段でAIに解析させる方が運用に合う場合があります。

既存ツールでしっくりこなかった点

WebページをPDF化する方法自体は、ブラウザの印刷機能を使えば可能です。

ただ、自分の用途では次の点が気になりました。

毎回の操作が地味に面倒

ブラウザ標準の印刷機能でもPDF保存はできます。しかし、保存先やファイル名、ページタイトル、URLの記録などを毎回手動で整理するのは面倒です。

運用作業や調査の途中で何度も保存する場合、数クリックの手間でも継続しにくくなります。

メタ情報を残しにくい

PDFそのものだけでは、あとから見たときに「どのURLを、いつ、何の目的で保存したのか」が分かりにくいことがあります。

AIナレッジとして使うなら、ページタイトル、URL、取得日時、メモ、分類タグのような情報も一緒に残したくなります。

認証付きページを外部サービスに任せにくい

公開Webページであれば、URLを外部サービスに渡してPDF化する方法もあります。しかし、ログイン後のページではそうはいきません。

認証情報を外部サービスに渡すわけにはいきませんし、Cookieやトークンを扱う設計は避けたいところです。

そのため、「ブラウザで自分が今見ているページだけを、明示的な操作でPDF化する」という形が自然だと考えました。

なぜChrome拡張にしたか

認証済みページを安全に扱うには、ブラウザの現在タブから、ユーザー操作をトリガーにPDF化するのが分かりやすいです。

Chrome拡張であれば、次のような構成にできます。

  • ユーザーが拡張ボタンを押す
  • 現在表示しているタブだけを対象にする
  • ページタイトルやURLを取得する
  • 印刷・PDF保存の流れに乗せる
  • 保存時のファイル名やメタ情報を整理しやすくする
  • 必要に応じてNotionやGoogle Driveへの登録につなげる

この形なら、常時監視や自動巡回を避けられます。

特に重要なのは、「認証情報を扱う」のではなく、「ユーザーがすでにブラウザで表示している内容を、ユーザー操作によりPDFとして保存する」という考え方です。

初期版でできること

現時点の実装は、まだ最低限です。

ただし、次のような流れは動くようになっています。

  • Chromeで対象ページを開く
  • 拡張機能を実行する
  • ページタイトルやURLを取得する
  • 表示中のページをPDF保存する
  • 保存したPDFをあとからAIナレッジとして利用する

まだ実装の作り込みはこれからですが、実際に使ってみると「この方向はありそうだ」と感じました。

特に、管理画面やSaaSの設定ページを調べたあと、その場でPDFとして残せるのは便利です。

設計で気をつけたいこと

この種のツールは便利ですが、慎重に扱う必要があります。

Chrome拡張は、権限の与え方によっては非常に強いアクセス権を持ちます。認証済みページを対象にするなら、なおさらです。

自分用ツールであっても、次の方針は明確にしておきたいと考えています。

1. 自動収集しない

バックグラウンドで勝手にページを集めるのではなく、ユーザーが明示的に操作したときだけPDF化する設計にします。

AIナレッジ化では、集める量を増やすより、意図して選んだ情報を残す方が重要です。

2. 対象タブを限定する

可能な限り、現在アクティブなタブだけを対象にします。

すべてのWebサイトに常時アクセスできる権限は便利ですが、リスクも大きくなります。Chrome拡張では

activeTab
のような考え方を活用し、必要なときだけ一時的に対象タブへアクセスする設計にしたいところです。

3. 外部送信を明示する

将来的にNotion API、Google Drive API、AI APIと連携する場合でも、どの内容をどこへ送るかは明示すべきです。

少なくとも、次の情報はREADMEや画面上で分かるようにしたいです。

  • 取得する情報
  • 取得しない情報
  • PDFの保存先
  • 外部送信の有無
  • 送信前にユーザー確認があるか

4. 秘密情報を意図せず保存しない

PDF化するページには、個人情報、社内情報、アクセストークン、メールアドレス、契約情報などが含まれる可能性があります。

PDFは画面の状態を残しやすい一方で、不要な情報まで残してしまう可能性があります。そのため、保存前に対象ページを確認し、必要であれば表示内容を調整する運用が必要です。

また、フォームの値、hidden field、Cookie、localStorage、Authorizationヘッダーなどは、原則として取得・保存対象にしない方が安全です。

5. 公開版と個人利用版を分ける

個人用に便利な機能と、一般公開してよい機能は違います。

特定の業務環境や認証付きサービスに依存した処理を含む場合、そのままOSS公開するのは避けた方がよいです。

公開するなら、まずは機密要素を含まないサンプル版として切り出すのがよさそうです。

公開するかどうか

今回の拡張は、現時点ではprivateのままにしています。

理由は、機能が未完成だからというより、扱う領域が慎重さを求めるからです。

認証付きページをPDF化してAIナレッジ化するツールは、便利さとリスクが隣り合わせです。自分用には十分でも、他人に使ってもらうには、権限説明、プライバシーポリシー、保存先の明示、サンプルデータでの検証、READMEの整備が必要になります。

そのため、今の判断は次の通りです。

  • Chrome Web Store公開はまだしない
  • GitHubでの一般公開もまだしない
  • リポジトリ名も現時点では公開しない
  • まずはprivateで使いながら改善する
  • 技術ブログとして背景と設計方針を公開する
  • 将来的にサンプル版を別リポジトリで公開する

この順番が安全だと考えています。

今後やりたいこと

今後は、次のような改善を考えています。

PDF保存フローの改善

最初の課題は、保存時の手間を減らすことです。

ファイル名、タイトル、URL、取得日時、対象サービス名などを整理しやすくし、あとから見ても分かるPDFにしたいです。

たとえば、次のような命名規則が考えられます。

YYYYMMDD_service_title.pdf

また、PDFの1ページ目や別ファイルにメタ情報を残せると、あとから検索しやすくなります。

保存先の選択

保存先は複数考えられます。

  • ローカルフォルダ
  • Google Drive
  • Notion Knowledge Hub
  • Obsidian Vaultの添付ファイル
  • GitHubリポジトリの管理対象外ストレージ

自分の用途では、Notion Knowledge HubとGoogle Driveの組み合わせに可能性を感じています。

Notionは検索・整理・外部記憶として便利です。一方で、PDFファイル自体はGoogle Driveなどに置き、Notionにはメタ情報とリンクを置く構成もよさそうです。

AI要約とタグ付け

PDFを保存するだけでなく、AIで次のようなメタ情報を付けたいです。

  • 要約
  • キーワード
  • 関連システム
  • 重要度
  • 参照元URL
  • 作業メモ
  • 次に確認すべきこと

これができると、単なるPDF保管ではなく、運用ナレッジとして再利用しやすくなります。

ナレッジ作成フローとの統合

最終的には、次のような流れにしたいです。

  • 認証付きページを開く
  • Chrome拡張でPDF化する
  • PDFを保存する
  • AIで要約・タグ付けする
  • Notion Knowledge Hubにメタ情報とリンクを登録する
  • 後日、ChatGPTや他のAIから参照する

これは、単なるPDF保存ツールではなく、AI時代の個人・チーム向けナレッジ収集パイプラインに近いものです。

まとめ

認証付きWebページをAIナレッジ化するために、Chrome拡張でPDF保存する仕組みを試作しました。

現時点では最低限動く段階ですが、実際に使ってみると、次のような価値がありそうだと感じています。

  • AIに渡しにくい認証付き情報を、自分の管理下で保存できる
  • ブラウザで見ているページを、その場でPDFとして残せる
  • 画面の状態やレイアウトを証跡として残しやすい
  • NotionやGoogle Driveと組み合わせることで、外部記憶として活用できる
  • 運用・検証・設計の知見を蓄積しやすくなる

一方で、認証付きページを扱う以上、安易な一般公開は避けるべきだとも感じています。

まずはprivateで育てつつ、この記事のように背景や設計方針を公開する。その後、機密要素を含まないサンプル版を切り出してOSS化する。

この順番で進めるのが、今のところ一番よさそうです。

AIに読ませたい情報は、必ずしもインターネット上に公開されているわけではありません。

むしろ、本当に役立つ情報ほど、認証の内側や日々の作業の中にあります。

その情報を安全に、自分の管理下で、PDFとして保存し、AIが扱いやすいナレッジへ変換していくことは、今後ますます重要になると考えています。