【完全無料】Web情報をワンクリックでGoogleドキュメントに保存するChrome拡張機能【Google Doc Clipper】
こんにちは、まじんです。
先日、NI-WORKさんのこのYouTube動画を見ました。
内容を要約すると、Geminiの「Gem」の代わりに、Googleドキュメントにプロンプトを保存して、ファイル添付で呼び出すという方法。
動画内で、NI-WORKの丹羽さんがこの手法を 「ぐっさんスキル」 と命名されていました（考案者のぐっさんこと山口さんに敬意を込めて）。
これがめちゃくちゃ合理的なんですよね。
Gemはフォルダ管理ができない → ドキュメントならGoogleドライブで自由に整理できる
Gem間を渡り歩くと会話がリセットされる → ドキュメントなら1つの会話で複数スキルを連続呼び出しできる
サイドパネルからGemを呼び出すのが面倒 → ドキュメントをファイル添付するだけ
で、この動画を見て思ったんです。
「ぐっさんスキルが最適解なら、Webで見つけたプロンプトやテキストを、ワンクリックでGoogleドキュメントに保存できたら最強じゃない？」
そうして作ったのが、今回のChrome拡張機能 『Google Doc Clipper』 です。
Google Doc Clipperとは？
Webページの内容を、ワンクリックでGoogleドキュメントに保存するChrome拡張機能です。
📄 記事全体をMarkdown→リッチテキストに変換してGoogleドキュメントに保存
✂️ テキストを選択して、その部分だけを保存することも可能
🖱️ 右クリックメニューから即保存（ポップアップを開く必要すらない）
📁 保存先フォルダをGoogleドライブ上で自由に指定
🖼️ 画像も一緒にGoogleドキュメントに埋め込み
NI-WORK考案の 「ぐっさんスキル」 と組み合わせると、こうなります：
① Webで良いプロンプトやTipsを見つける
② 右クリック →「Google Doc Clipperで保存」
③ Googleドキュメントとして自動保存される
④ Geminiのチャットやサイドパネルでそのドキュメントをファイル添付
⑤ 自分専用の「ぐっさんスキル」として即発動！
プロンプトの発見 → 保存 → 活用が、ワンストップで繋がります。
なぜ作ったのか
NotebookLM-Diaryの時もそうでしたが、今回も
「既存のツールには"惜しい"が多すぎる」 という動機からです。
Webページの内容を保存したいとき、皆さん何を使ってますか？
ブックマーク → リンク切れしたら終わり
Evernote / Notion → Google Workspaceとの連携が弱い
コピペしてドキュメントに貼り付け → 毎回手作業、書式も崩れる
Googleドキュメントに直接保存できれば、Geminiとの連携もドライブ管理もシームレスなのに。
そんなツールが無かったので、作りました。
🚀 主な機能
📋 ページ全体をワンクリック保存
ポップアップの「保存」ボタンを押すだけ。記事のタイトル、本文、画像がGoogleドキュメントに保存されます。
Markdown変換を挟んでいるので、見出し・箇条書き・太字などの書式がきちんと反映された状態で保存されます。コピペで起きがちな「書式ぐちゃぐちゃ問題」とは無縁です。
✂️ 選択テキストだけを保存
ページ全体は要らない、この部分だけ保存したい。そんな時はテキストを選択した状態でポップアップを開けば、選択範囲だけが保存対象になります。
🖱️ 右クリックで即保存
テキストを選択 → 右クリック →「Google Doc Clipperで保存」。
ポップアップを開く必要すらありません。 デフォルトの保存先フォルダにサクッと保存されます。大量に保存したい時に重宝します。
📁 保存先フォルダの管理
GoogleドライブのフォルダURLを登録するだけで、保存先を自由に切り替えられます。
プロジェクトごとにフォルダを分けられる
⭐ デフォルトフォルダを設定すれば右クリック保存も一発
GASの初回接続時に「Google Doc Clipper」フォルダが自動作成される
📋 保存履歴
ヘッダーの📋ボタンから、直近20件の保存履歴を確認できます。保存したドキュメントにワンクリックでアクセス可能。
⚡ オプション
保存後にドキュメントを開く … ONにすると、保存完了後にGoogleドキュメントが新しいタブで自動的に開きます
スマートタイトル … 選択テキストの先頭行を自動的にドキュメントのタイトルにします
🎬 解説動画
セットアップ～基本的な使い方をサクッと動画にまとめました。
文字で読みたい方は、このまま下にスクロールしてください👇
📦 導入方法
今回は 完全無料 で配布します。
GASとChrome拡張機能の2つをセットアップしてください。
動画でも手順を紹介していますが、以下にテキストでも説明します。
ステップ1：GASをデプロイする
以下のGASコードをコピーして、Google Apps Scriptに新規プロジェクトを作成
コードを貼り付けて保存
「デプロイ」→「新しいデプロイ」→「ウェブアプリ」を選択
「アクセスできるユーザー」を「自分のみ」に設定してデプロイ
表示されるWebアプリURLをコピー
ステップ2：Chrome拡張機能をインストール
以下のZIPファイルをダウンロード
Chromeで `chrome://extensions/` を開く
右上の「デベロッパーモード」をON
ZIPファイルをそのままブラウザにドラッグ&ドロップ
ステップ3：初期設定
インストールされた拡張機能のアイコンをクリック
⚙️ 設定画面を開く
GASのWebアプリURLを貼り付けて「接続テスト」
成功すると、Googleドライブに「Google Doc Clipper」フォルダが自動作成されます
これだけでセットアップ完了です。
💡 活用アイデア
1. 「ぐっさんスキル」の量産
冒頭で紹介したNI-WORKさんの方法と組み合わせると最強です。
Webで見つけた有用なプロンプトを片っ端からGoogle Doc Clipperで保存。保存先を「ぐっさんスキル」フォルダにしておけば、Geminiのサイドパネルからいつでもファイル添付で呼び出せます。
2. 記事のスクラップブック
気になるnote記事やブログ記事を保存しておけば、後から参照したい時にドライブ検索で一発。リンク切れの心配もありません。
3. NotebookLMのソース収集（有料記事にも！）
記事をGoogleドキュメントに保存しておけば、NotebookLMにドライブから直接ソース追加できます。URLソースよりも安定して中身を読み込んでくれます。
そしてこれ、購入済みの有料note記事でかなり威力を発揮します。
有料note記事のURLをNotebookLMのソースに追加しても、ログインの壁があるのでエラーになりますよね。
でも、Google Doc Clipperで購入済みの記事をGoogleドキュメントに保存しておけば、全文を確実にNotebookLMのソースとして登録できます。
（動画リンクや添付ファイルは取得できません）
自分が購入した有料記事の知見をNotebookLMで横断的に分析する、なんて使い方もできるわけです。
※ あくまで自分が購入した記事を、自分のドライブに保存する用途です。保存したドキュメントを第三者に共有・配布する行為は著作権の侵害になりますのでご注意ください。
4. 競合分析・リサーチ
競合サービスのWebページや、参考にしたい事例を丸ごとGoogleドキュメントに保存。チームのドライブフォルダに保存先を設定すれば、そのまま共有資料にもなります。
⚠️ 対応していないページ・既知の制限
このツールは万能ではありません。あらかじめ以下の制限をご理解ください。
うまく動作しないページ
Googleドキュメント / スプレッドシート等 … Google Workspaceのアプリページには専用のエラー画面が表示され、本文を取得できません
X（旧Twitter） … ポストの本文がJavaScriptで動的に描画されるため、テキストを正しく取得できないことがあります
ログイン必須のページ … ログイン後に表示されるコンテンツは、拡張機能からはアクセスできない場合があります
SPA（シングルページアプリケーション） … React/Vue等で構築された一部のサイトでは、DOMの動的描画タイミングにより本文が取得できないケースがあります
Chrome内部ページ … `chrome://` や拡張機能の管理画面など、ブラウザ内部のページには対応していません
画像について
一部のサイトではセキュリティ制限（CORS）により、画像がGoogleドキュメントに埋め込まれない場合があります。本文テキストは正常に保存されます
画像が非常に多い記事では、保存に時間がかかることがあります
GASの制限
GASには1回の実行あたり6分のタイムアウトがあります。超長文のページでは稀にタイムアウトが発生する可能性があります
通常のブログ記事やnote記事であれば、問題なく動作します。（遭遇できていないエラーはあるかもですが…） うまくいかない場合は、テキストを選択してから保存する方法をお試しください。
🔧 技術的な話（興味がある方向け）
構成
APIキーは不要です。GASが自分のGoogleアカウントの権限で動くので、OAuth認証もいりません。
Webページの中身をどうやって取得しているか
Mozilla製の Readability.js を使って、Webページから記事本文を抽出しています。広告やナビゲーションを除外して、きれいな本文だけを取り出します。
抽出したHTMLは Turndown でMarkdownに変換し、GAS側でGoogleドキュメントのリッチテキストとして再構築しています。
画像の処理
記事内の画像は、Chrome拡張機能側でCanvasに描画してBase64に変換し、GAS側でGoogleドキュメントに埋め込んでいます。CORSで取得できない画像はスキップします。
📜 ライセンス・注意事項
利用について
・個人利用の範囲でご自由にお使いください
・改変・カスタマイズ自由
・コードの全文を公開しています
・YouTube・セミナー・コミュニティ等での紹介は大歓迎です（事前連絡不要、この記事へのリンクを貼っていただけると嬉しいです）
禁止事項
・商用での再配布・販売
免責事項
・本ツールは「現状のまま」提供します
・使用によって生じた損害について、開発者は責任を負いません
・Chrome/Google Workspace のアップデートで動作しなくなる可能性があります
・保存したコンテンツの著作権は元の著作者に帰属します。私的利用の範囲でご利用ください
✍️ おわりに
NI-WORKさんの動画を見て「これだ」と思ったアイデアが、1日で形になりました。
GASとChrome拡張機能の組み合わせは、NotebookLM-Diaryの時にも感じましたが、Google Workspaceユーザーにとって最強の自動化基盤だと思っています。
APIキー不要、完全無料、コード全公開。
ぜひ使ってみて、感想をコメントやXで教えてください！
チームまじんからのお願い
もし「便利そう！」「使ってみたい！」と思っていただけたら、以下の応援アクションをしていただけると嬉しいです。
STEP 1: この記事への「スキ♡」
STEP 2: noteで「まじん」をフォロー
STEP 3: X（Twitter）での拡散
皆さんの感想や「こんな使い方してるよ！」という報告、お待ちしています！
それではまた次回の記事でお会いしましょう。
