user【週刊】今日から始めるAI生活

誰でもManusで拡張機能が作れる時代。Substackの記事をMarkdownで取り出せるツールを配布＋制作の全プロセスを公開します！

コードが書けなくても、ManusがあればChrome拡張機能は作れます。前回のnote版・X記事版は18,000クレジット（約16,000円）かかりましたが、今回のSubstack版は1,200クレジット（約1,000円）で完成。コスト差を生んだ「頼み方の秘訣」と、完成した拡張機能の配布・全指示プロンプトをこの記事でまとめてお渡しします
user
テツメモ｜tetumemo
2026/05/20

こんにちは！テツメモです。

先週の記事では、「みんなのニュースレター」で2年間発信してきた私が、なぜ今さらSubstackも始めるのかを書きました。その中で、note記事とXの記事形式をMarkdownで保存できるChrome拡張機能を配布しましたね。皆さん使っていただけたでしょうか？　

正直、あれはかなり自分用に作った道具です。

noteに書いた記事をSubstackへ移したい。Xの記事形式で書いた長文も、ただ流して終わりにしたくない。せっかく書いた記事資産を、もう一度ニュースレターとして届け直したい。

でも、手作業で移すのは面倒です。

記事本文をコピーして、見出しを直して、リンクを貼り直して、画像を確認して、Markdownに整えて、Substackに貼る。

1本だけならできます。でも、何本もやるとなると、かなりしんどい。そこで作ったのが、前回配布したChrome拡張機能でした。

そのおかげで先週Xに投稿した記事もSubstackやnoteへ簡単に展開することができました。

■X記事

■Substack

image
image

■note記事

ただ、記事を書き終わったあとに、もうひとつ思ったんです。「これ、noteやXからSubstackへ持っていく方向だけじゃなく、Substack側の記事もMarkdownで取得できたら便利なのでは？」と。

たとえば、本丸がSubstackの人もいますよね。

そんな自分がSubstackに書いた記事を別の場所に再利用したいとき。バックアップを取りたいとき。過去記事を整理したいとき。あるいは、Substackで書いたものをnoteやX記事に展開し直したいとき、、、Substackの記事をMarkdownで取り出せたら、発信の流れがかなりラクになります。そして、この「もしかして作れるのでは？」を、今は非エンジニアでも試せるようになりました。

今回の主役は、Chrome拡張機能そのものというより、Manusを使って、自分だけのChrome拡張機能を作る体験です。コードが書けなくてもいい。専門的な「manifest.json」なども何かわからなくてもいい。アイコンのサイズを知らなくてもいい、、、けどChrom拡張機能が作れるっ！そんな体験をしてほしいと思いました。

正直なところ、前回の記事に「Manus×拡張機能のつくり方」も掲載しようと思ったのですが、文量がいつものように多くなりすぎてしまったので今回、あらためて紹介しようと思った次第です。

💡Manusについては過去記事が多くありますので、一部紹介しておきます。

image.png.webp

🔗Manusで1,000クレジットGETできる招待コード

Chrom拡張機能って、まずは自分の小さな課題を見つけてManusに「こういうことができる小さな道具がほしい」と自然な言葉で伝える。この対話の積み重ねで、あなただけの痒いところに手が届くツールが完成します。

とは言ってもいきなりゼロからつくるのも大変ですから、その”つくる”材料として、前回作ったnote版とX記事版の拡張機能zipを添付する。そして、「この構成を参考に、Substackの記事をMarkdownで取得する拡張機能を作って」と頼む。これだけで、かなり現実的なところまで進められます。

Untitled_Clipping_051926_120621_AM.jpg.webp

実際に今回は、その流れで substack-markdown-downloader-v1.3 まで作りました。Manusとのやり取りも残っているので、有料エリアでは「完成品の配布」だけでなく、どんな指示を出し、どこで詰まり、どう直したのかも紹介しますので、まずは疑似体験してみてくださいね。

もちろん、完璧に一発で完成するとは限りません。

Chrome拡張機能は、見た目以上に細かい部品が多いです。ページから情報を読む部分、ボタンを出す部分、ファイルを保存する部分、Chromeに拡張機能として認識してもらう設定、アイコン、説明書。意外とやることがあります。

でも、そこまで含めてManusに任せられるのが便利なんです。

前置きがかなり長くなっちゃいましたが、この記事ではChrome拡張機能をほぼ知らない人に向けて、

  • Chrome拡張機能とは何か
  • 自分用ならStore公開しなくても使えること
  • なぜ非エンジニアのVibe Coding題材にちょうどいいのか
  • Manusに何を頼めばよいのか
  • 前回のnote版・X記事版から、Substack版へ広げる考え方
  • 有料エリアで配布するSubstack用拡張機能と、Manus指示プロンプト

をまとめていきます。今回の記事で一番伝えたいのは、これです。

Chrome拡張機能は、エンジニアだけのものではありません。自分の毎日の作業を少しラクにする、自分だけの小さな道具です。

📝この記事で手に入るもの

今回の記事で手に入るものは、大きく3つあります。

1つ目は、Chrome拡張機能に対するハードルを下げること

Chrome拡張機能と聞くと、なんだか開発者向けの難しいものに見えますよね。私も最初はそうでした。

Chrome Web Storeに公開されているものを使う側であって、自分で作るものだとは思っていませんでした。でも、自分用に使うだけなら話は少し変わります。前回の記事でも紹介したのでざっくり復習程度の説明になりますが、、、

Chromeには、手元のフォルダに入っている拡張機能を読み込んで使う方法があります。

Chromeの拡張機能管理画面で「デベロッパーモード」をオンにして、「パッケージ化されていない拡張機能を読み込む」を押す方法です。

Untitled_Clipping_051326_121251_AM.jpg.webp

これはGoogleの公式ドキュメントでも案内されている、開発やテストのための読み込み方法です。

つまり、Chrome Web Storeに公開しなくても、自分のブラウザにだけ小さな道具を追加できます。ここが大きいです。

公開しなくていい。審査を通さなくていい。世界中の人に使ってもらう前提で作らなくていい。まずは自分だけが使えればいい。

この前提になると、Chrome拡張機能は一気に身近になります。

2つ目は、Manusに頼むときの考え方

Untitled_Clipping_051926_120506_AM.jpg.webp

非エンジニアがつまずきやすいのは、「何を頼めばいいかわからない」ことです。コードを書けないことより、仕様を言葉にできないことのほうが大きいかもしれません。

たとえば「Substackの記事をMarkdownで保存したい」と言っても、AI側からするとかなり粗いです。

どのページで使うのか。何を取得したいのか。タイトル、著者、公開日、URL、本文、画像、リンク、引用をどう扱うのか。コピーだけでいいのか、ファイルとしてダウンロードしたいのか。取得できないときはどう表示するのか。

こういう細かいことを、少しずつ言葉にしていきます。でも、最初から完璧な仕様書を書く必要はありません。

むしろManusの良いところは、こちらが自然な言葉で方向性を伝えると、必要なファイルや構成をまとめて作ってくれるところです。

3つ目は、発信運用を少しラクにする視点

私は今、note、X記事、ニュースレター、Substackなど、いくつかの場所で発信しています。それぞれの場所には、それぞれの良さがあります。

Xは速く届く。noteは広く届いて記事として読まれやすい。Substackは登録者に届けやすい。ニュースレターは読者との関係が積み上がる。

でも、発信場所が増えるほど、運用は大変になります。

同じ内容をそのまま貼るだけではなく、場所ごとに少し整える必要があるからです。そこで記事を簡単にダウンロードできるツールがあると便利です。

画像

Markdownは、文章の見出しやリンク、箇条書きなどをシンプルな記号で表せる書き方です。

ざっくり言えば、いろいろな場所へ持っていきやすい文章の中間形式です。note記事をMarkdownで取り出す。X記事をMarkdownで取り出す。Substack記事もMarkdownで取り出す。

こうなると、発信場所をまたいだ再利用がやりやすくなります。今回のChrome拡張機能づくりは、そのための小さな実験です。

🧑‍🤝‍🧑この記事を読んでほしい人

今回の記事は、エンジニア向けのChrome拡張機能開発講座ではありません。むしろ、次のような人に読んでほしい内容です。

  • note、X記事、Substackなど複数の場所で発信している人、これからしたい人。
  • 過去記事を別の場所へ移す作業が面倒だと感じている人
  • 👑Chrome拡張機能に興味はあるけれど、自分には無理だと思っている人
  • Manusで何か作ってみたいけれど、最初の題材に迷っている人
  • CodexやClaude Codeにも興味があり、いつか自分用ツールを育ててみたい人

逆に、Chrome Web Storeで本格的に公開する拡張機能を作りたい人には、少し物足りないかもしれません。今回はあくまで、自分用の小さな道具を作る話です。

でも、私はこの小ささが大事だと思っています。発信運用で本当に効くのは、大きなシステムよりも、毎日少しだけ面倒な作業を減らしてくれる道具だったりします。そして小さなツールが作れる経験ができれば、あとはそれをコツコツ大きくしていくだけです。まずは”つくる楽しさ”というはじめの一歩を一緒に体験しましょう！

🎙️ニュースレターの内容をAI音声でキャッチアップ！

記事の内容を、有料購読エリアの概要も含めて紹介しています。　

ぜひこちらも一緒にフォローしていただき、”ながら聴き”も楽しんでみてください♪

spotify show

🧩 Chrome拡張機能は「自分だけの小さな道具」をブラウザに足すもの

01_chrome_extension_concept.png.webp

まず、Chrome拡張機能とは何か。難しく言えば、Chromeブラウザに機能を追加するための小さなプログラムです。

でも、非エンジニア向けに言うなら、もっとシンプルです。自分だけの小さな道具を、ブラウザに足せるもの。

これくらいの理解で十分です。たとえば、Webページを開いているときに、

  • 今見ているページのタイトルとURLをコピーしたい
  • 記事本文だけを抜き出したい
  • ページ内の画像URLをまとめたい
  • よく使う入力文をワンクリックで入れたい
  • 表示中の情報をMarkdownに変換したい

こういうことをChrome上で実行できるようにするのが、Chrome拡張機能です。スマホにショートカットを置く感覚に少し近いかもしれません。

毎回手でやっている操作を、小さなボタンにまとめる。それをChromeの右上に置いておく。

必要なページを開いたら、ボタンを押す。これだけです。

前回配布したnote版とX記事版の拡張機能も、考え方はとてもシンプルです。noteの記事ページを開く。拡張機能のボタンを押す。タイトル、著者、公開日、本文、画像、リンクなどを読み取る。Markdown形式に整える。ファイルとして保存する。

画像

Xの記事形式も同じです。Xの記事ページを開く。拡張機能のボタンを押す。記事の本文やURLを読み取る。Markdownとして保存する。

やっていることだけ見ると、かなり地味です。でも、この地味さが大事です。

発信運用で本当に時間を奪うのは、派手な作業ではありません。コピーして、貼って、整えて、保存して、また開いて、確認して、少し直す。

こういう小さな手作業の積み重ねです。Chrome拡張機能は、その小さな手作業を減らすのに向いています。

そして、自分用の拡張機能なら、完璧なサービスにする必要はありません。「ちょっとした課題を解決する拡張機能をつくる」→「改善する」→「使う」→「さらに改善する」→「愛着のある拡張機能に育つ」という自分だけの開発サイクルを回すことができちゃいます。

これだけでも十分価値がありますよね。

Store公開しなくても、自分だけで使える

ここは、最初に知っておくとかなり気がラクになります。Chrome拡張機能は、必ずChrome Web Storeで公開しないと使えないわけではありません。

image.png.webp

🔗Chromウェブストア

もちろん、多くの人に配布したい場合は、Store公開を考える必要があります。審査や説明、権限の整理、プライバシー対応なども必要になります。でも、自分用に試すだけなら、手元のフォルダをChromeに読み込ませて使えます。

手順はざっくりこうです。

  1. 拡張機能のフォルダを用意する
  2. Chromeで chrome://extensions を開く
  3. 右上の「デベロッパーモード」をオンにする
  4. 「パッケージ化されていない拡張機能を読み込む」を押す
  5. 拡張機能のフォルダを選ぶ

これでChromeに追加できます。ここで大事なのは、ZIPファイルのままではなく、解凍したフォルダを読み込ませることです。

image.png.webp

前回の有料エリアでも書きましたが、Chromeはそのフォルダを見に行って拡張機能を動かします。

なので、読み込ませたあとにフォルダを削除したり、場所を移動したりすると、動かなくなることがあります。おすすめは、ドキュメントフォルダなどに専用フォルダを作っておくことです。

Documents/
└── ChromeExtensions/
    ├── note-markdown-downloader-v5/
    ├── x-article-markdown-downloader-v6/
    └── substack-markdown-downloader/

こうしておくと、あとから「あれ、どこに置いたっけ？」となりにくいです。この時点で、Chrome拡張機能の見え方が少し変わると思います。

「世界に公開するアプリ」ではなく、「自分のパソコンに置いておく小さな道具」。このくらいの感覚で始めると、かなり入りやすいです。

すでに便利なChrome拡張機能はたくさんある

もちろん、何でも自作する必要はありません。Chrome拡張機能の良さを知るには、まず既製品を使ってみるのが一番早いです。

たとえば、私の発信やリサーチ用途なら、NotebookLM系とLilysAI系の拡張機能はかなり相性が良いです。

NotebookLM自体は、公式にWeb URLや公開YouTube動画URLをソースとして扱えます。つまり拡張機能が必須というより、「今開いているページや動画をワンクリックで送る」「複数URLやプレイリストをまとめて入れる」ための時短道具として使う感覚です。

NotebookLM Web Importer

NotebookLMへ素材を送るなら、まず候補になるのが NotebookLM Web Importer です。

image.png.webp

Webページ、YouTube動画、リンク、ブラウザタブ、RSSフィードなどをNotebookLMへ保存できる拡張機能として紹介されています。記事、ブログ、レポート、複数タブをまとめてNotebookLMに入れたいときは、最初に試す候補になります。

YouTube中心で大量に素材を集めるなら、YouTube to NotebookLM も候補です。YouTube動画、プレイリスト、チャンネル、検索結果をNotebookLMに送る用途に寄っています。

LilysAI - Save and Summarize Everything

image.png.webp

LilysAIをよく使うなら、公式の LilysAI - Save and Summarize Everything も自然な選択肢です。

YouTube動画やWebページをLilysAIに保存し、要約やノート化へつなげるためのWebクリッパーです。

私のように、まずLilysAIでざっくり要約し、そこから記事化や調査に進む人には便利です。

BananaNL

image.png.webp

さらに、NotebookLMでインフォグラフィックやスライドを作る人なら、BananaNL も面白いです。Banana Xのデザインプロンプト集と組み合わせて、NotebookLMなどで使うデザインプロンプトを選びやすくする拡張機能です。

ここで言いたいのは、「便利な拡張機能を探せば、すでにかなりある」ということです。

既製品で足りるなら、それを使えばいい。わざわざ自作する必要はありません。ただ、既製品を使っていると、だんだん自分専用の不便が見えてきます。

「NotebookLMには送れるけれど、自分のニュースレター用のMarkdown形式にはならない」
「LilysAIには保存できるけれど、Substackからnoteへ持っていく形には整わない」
「このサイトだけ、自分の使い方に合うボタンがほしい」

こういう小さなズレが出てきたときに、自分用Chrome拡張機能の出番です。

既製品でできることを知っているからこそ、自作すべき範囲も見えてきます。今回のSubstack Markdown Downloaderも、世界中の人に向けた万能ツールではありません。私の発信運用の中で、「Substack記事をMarkdownで手元に残し、別の発信にも使いやすくする」ための小さな道具です。

🤖 非エンジニアほど、Chrome拡張機能づくりはAIに任せていい

02_ai_workflow.png.webp

では、なぜ今回Chrome拡張機能をManusで作る話をしているのか。理由は、Chrome拡張機能づくりには、非エンジニアがつまずきやすい細かい作業が多いからです。

たとえば、拡張機能にはだいたいこんなファイルが入っています。

manifest.json
content.js
popup.html
popup.js
icons/
README.md

いきなりこの名前を見ても、よくわからないですよね。でも、ざっくり役割を言うとこうです。

manifest.json は、Chromeに「これは拡張機能です」と伝える設定ファイルです。content.js は、Webページの中身を読み取ったり、ページ上で動いたりする部分です。

popup.html は、拡張機能のアイコンを押したときに出る小さな画面の見た目です。popup.js は、その小さな画面のボタンや保存処理を動かす部分です。

icons/ は、Chrome右上などに表示されるアイコン画像です。README.md は、使い方を書いた説明書です。

この中の内包物でも、絶対に必要なものと無くても動くものもあります。けど、私たち非エンジニアにはそのジャッジが難しい！

つまり、ひとつの小さな拡張機能を作るだけでも、コードだけでは終わりません。設定ファイルが必要です。画面が必要です。ボタンの動きが必要です。アイコンが必要です。説明書もあったほうが親切です。

さらに、Chrome拡張機能には権限の指定もあります。どのサイトで動くのか。ページの情報を読む必要があるのか。ファイルをダウンロードする必要があるのか。

と、、、こういう設定も必要になります。非エンジニアがゼロから全部調べると、かなり大変です。

だからこそ、AIに任せる価値があります。特にManusは、こちらが「こういうものを作りたい」と伝えると、必要なファイルをまとめて作り、完成品に近い形で納品してくれるのが便利です。

Untitled_Clipping_051926_123643_AM.jpg.webp
Manusは画像生成もできるので、必要なアイコンの生成やリサイズも勝手にやってくれる

これをClaude Code等で実行して、コードだけを返されても非エンジニアは困ります。

「このコードをどのファイルに入れるの？」
「フォルダ構成は？」
「Chromeにはどれを読み込ませるの？」
「アイコンは必要なの？サイズは？個数は？」
「READMEはどう書けばいいの？」

こういう部分で止まってしまいます。

Manusに頼むときは、最初から「完成フォルダとして納品して」「READMEも書いて」「アイコンも用意して」「自分用にChromeへ読み込める形にして」と伝えれば全部まるっとやってくれる。

これ、体験しちゃうと便利すぎてクセになりますよ。（※ただ、トークンの消費には注意、、、）

Manusが最初の一歩に向いている理由

私はCodexもClaude Codeも好きです。慣れてきたら、CodexやClaude CodeでChrome拡張機能を作るのもかなり良いと思います。

特に、すでに手元にプロジェクトがあり、細かく修正したいときはCodexのような開発環境に強いAIが便利です。Claude Codeも、コードの読み解きや修正の相談に向いています。ただ、それでも最初の一歩としてはManusがかなり手軽です。

CodexやClaude Codeでもできる項目はありますが、主な理由を3つ紹介します。

1つ目は、完成品としてまとめてもらいやすいこと

Chrome拡張機能は、1つのコードだけで完結しません。

複数のファイルとフォルダが必要です。そこを「Chrome拡張機能として読み込める完成フォルダにしてください」と頼めてZIPファイルとして提供してくれます。

2つ目は、自然言語で丸ごと頼みやすいこと

「Substackの記事ページから、タイトル、著者、公開日、本文、画像URL、リンクを取得して、Markdownとしてコピー・ダウンロードできる拡張機能を作ってください。
という指示をしようと思っているけど、指示で不足してる部分があればステップバイステップでユーザーに一問一答で確認して」

このくらいの言い方でも、まずは進められます。もちろん、細かい修正は必要になります。でも、最初の形を作ってもらえるだけでかなり助かります。

3つ目は、スマホからでも進めやすいこと

image.png.webp

私はここがけっこう大きいと思っています。

Manusは公式アプリがあり、作業内容はすべてクラウド側にあるのでスマホだけでもChrom拡張機能がつくれます。

通勤中、移動中、ちょっとした待ち時間に、「こういう拡張機能を作りたい」とManusに投げる。これだけでClaude CodeやCodex級のことができちゃいます！

もちろん最終的な動作確認はパソコンで行う必要があります。

Chromeに読み込ませて、実際のページで動かしてみる作業はパソコン側です。でも、最初の設計や依頼、READMEの作成、改善指示くらいならスマホでも進められます。なぜなら、Manusは仮想環境を持っているので、完成した拡張機能を「テストをして」とお願いすることもできる。

これはかなり今っぽいです。「机に座って、開発環境を整えて、さあ作るぞ」ではなく、

「移動中に思いついた小さな不便を、その場でAIに投げておき開発＆テストを進めてもらう」

こういう作り方ができます。私はこれが、非エンジニアにとってのVibe Codingの良さだと思っています。

Vibe Codingの題材としてChrome拡張機能がちょうどいい

Vibe Codingという言葉があります。細かいコードを自分で全部書くというより、AIと対話しながら、作りたいものを形にしていく作り方です。

この題材として、Chrome拡張機能はかなりちょうどいいです。理由は、身近な困りごとから始められるからです。

大きなWebサービスを作ろうとすると、考えることが一気に増えます。ログイン、データベース、サーバー、支払い、公開、セキュリティ、運用など、、、。

もちろん、それも面白いです。でも最初の一歩としては重い。一方で、Chrome拡張機能は「ちょっとこの課題を解決したい」から始められます。

たとえば、

  • Substackの記事をMarkdownで保存したい
  • 記事の情報を元にXの投稿文に変換したい
  • note記事のURLとタイトルをまとめたい
  • よく使う引用テンプレートをワンクリックで作りたい
  • Webページの見出しだけ抜き出したい
  • 自分の投稿管理用にページ情報を整えたい

こういう小さな課題ではじめはいい。小さいけれど、毎日の作業には効きます。

しかも、自分用なら完成度の基準も自分で決められます。世界中のユーザーに対応する必要はありません。あらゆるサイトで動く必要もありません。

まずは、自分がよく使うページで動けばいい。これがVibe Codingと相性がいいんです。

AIに頼むときも、こう言えます。「完璧な汎用ツールではなく、自分が使うSubstack記事ページで、表示されている本文をMarkdown化できればOKです」

このくらいの割り切りで始めると、完成までの距離がかなり短くなります。

🧪 前回のnote版・X記事版を材料にしてSubstack Downloaderをつくる

03_material_to_product.png.webp

今回の面白いところは、ゼロから作るだけではない点です。

すでに前回、note記事をMarkdownで保存する拡張機能と、Xの記事形式をMarkdownで保存する拡張機能を作りました。

それぞれの中身には、Chrome拡張機能として必要な基本部品が入っています。note版には、たとえばこういうファイルがあります。

note-markdown-downloader-v5/
├── manifest.json
├── background.js
├── content.js
├── popup.html
├── popup.js
├── README.md
└── icons/

X記事版には、こういうファイルがあります。

x-article-markdown-downloader-v6/
├── manifest.json
├── content.js
├── popup.html
├── popup.js
├── README.md
└── icons/

この2つは、今回のSubstack版を作るときの参考になります。なぜなら、やりたいことの骨格が似ているからです。

  1. Webページを開く。拡張機能のボタンを押す。
  2. ページ内からタイトルや本文を取得する。Markdown形式に変換する。
  3. コピーまたはダウンロードできるようにする。READMEを書く。

Chromeに読み込める形でまとめる。対象サイトがnoteからSubstackへ、XからSubstackへ変わるだけで、考え方はかなり近いです。

Untitled_Clipping_051926_105825_PM.jpg.webp

ここで大事なのは似たような拡張機能をつくる時、「AIにゼロから全部考えさせない」ことです。前回作った拡張機能zipを添付して、

やりたいことの要件と一緒に、「この構成と使い勝手を参考にしてください」と伝える。これだけで、Manus側もかなり作りやすくなります。

人間同士でも同じですよね。「こんな感じのものを作ってください」と、実物を見せられると話が早い。

AIにも、実物を渡すと話がメッチャ早いです。

Substackの記事もMarkdownで取れるのでは？を実際に試した

Untitled_Clipping_051926_012148_AM.jpg.webp

前回の記事を書いたあと、私の中で自然に出てきた仮説がありました。noteからSubstackへ持っていける。

Xの記事形式からSubstackへ持っていける。では、SubstackからもMarkdownで取り出せるのでは？

これが今回の出発点です。そして今回は、そこから実際に Substack Markdown Downloader を作りました。完成した拡張機能のフォルダ構成はこうです。

substack-markdown-downloader/
├── manifest.json
├── content.js
├── popup.html
├── popup.js
├── README.md
└── icons/

機能としては、Substackの記事ページからタイトル、著者、公開日、URL、本文を取得し、見出し、箇条書き、引用、リンク、画像などを可能な範囲でMarkdown形式に整えます。

ポップアップ内でプレビューでき、MarkdownコピーとMarkdownファイルのダウンロードにも対応しています。まさにnoteとX記事と同じ感じにできました。

さらに、Substack.com配下だけでなく、独自ドメインで運用されているSubstackサイトにも可能な範囲で対応する形になっています。

有料記事などで本文が途中までしか表示されていない場合は、取得できた範囲だけを保存し、その旨を警告メッセージとして表示する設計です。

Substackは、ニュースレターとして書いた記事が蓄積されていきます。

しばらく運用していると、Substack側にも記事資産がたまっていきます。その記事を、別の場所で再利用したくなることがあります。

たとえば、Substackで書いた記事をnote向けに整える。長いSubstack記事の一部を、Xの記事形式に展開する。過去記事をまとめて、自分のローカル環境にバックアップする。後からAIに読ませて、要約やリライトに使う。

こういうとき、Markdown形式で手元にあると扱いやすいです。もちろん、他人の記事を勝手に保存して再配布するためのものではありません。自分の記事、自分が権利を持っているコンテンツ、利用が認められる範囲のコンテンツを整理するための道具です。ここはかなり大事です。

便利な道具ほど、使い方の線引きも必要です。今回作るSubstack用拡張機能も、考え方としては「表示されているページの情報を、自分用にMarkdown化する補助ツール」です。

有料記事や限定公開部分など、表示されていない本文まで無理に取得するものではありません。表示されている範囲を、扱いやすい形に整える。

このくらいの使い方が健全だと思っています。

🧰 Manusに頼むときは「コードを書いて」より「完成品にして」が大事

04_manus_request_method.png.webp

非エンジニアがAIに開発を頼むとき、ついこう言いたくなります。「コードを書いてください」

でも、Chrome拡張機能の場合は、これだけだと足りません。コードだけもらっても、どこに置けばいいかわからないからです。

だから、Manusに頼むときは、最初からこう言ったほうがいいです。

「Chrome拡張機能として読み込める完成フォルダにしてください」

さらに、こう続けます。

「必要なアイコン、READMEを含めてください」

これらを実行すると、、、

  • Chromeで読み込める。拡張機能のアイコンが出る。
  • 対象ページでボタンを押せる。Markdownをコピーできる。
  • Markdownファイルを保存できる。READMEを見れば導入できる。

ここまでそろって初めて、「あ、使える」となります。逆に、コード断片だけだと止まります。

だから今回のManus指示プロンプトでも、納品物をかなり具体的に書きます。これは、AIへの優しさでもあります。

AIは察してくれることもありますが、察しに頼るとズレます。「何を作るか」だけではなく、「どういう形で受け取りたいか」まで伝える。

これが、非エンジニアがAI開発をうまく使うコツだと思います。

ちなみに、非エンジニアだからこそ「README」を必ず用意してほしい

image.png.webp

READMEがあるだけで、納品物の形がかなり変わります。

非エンジニアにとって大事なのは、コードの美しさより、まず使える状態になっていることです。特に私はREADMEが重要だと思っています。

なぜなら、自分で作っても、誰かに配布する時でも、非エンジニアにとってコードの中身を読み解くのは厳しいです。そんな時に取説的なREADMEがあると、どんな目的で、どのような機能で、誰の何を解決して、何ができるのか？などが書かれており非常に役立ちます。

ですので、Chrom拡張機能に限らず、Vibe Codingした時は自分のためにも、誰かに見せるときのためにも、必ず「READMEを書いて」とお願いしてみましょう。

Chrome拡張機能づくりで意外と必要になるもの６つ

Chrome拡張機能を作る前、私は「本文を取得するコードがあれば終わり」くらいに思っていました。でも実際には、意外と必要なものがあります。

1.設定ファイル

Chromeに「これは拡張機能です」「このサイトで動きます」「この権限を使います」と伝えるファイルが必要です。

2.ページから情報を取る部分

Substackの記事ページは、タイトル、著者、日付、本文、画像、リンク、引用など、いろいろな要素でできています。それをどこまで取得するかを決める必要があります。

3.ボタンを押したときの小さな画面

Chrome右上の拡張機能アイコンを押すと、ポップアップ画面が出ます。そこに「Markdownをコピー」「Markdownをダウンロード」などのボタンを置くと使いやすくなります。

4.ファイル名

Markdownファイルとして保存するなら、ファイル名も必要です。記事タイトルをそのまま使うと、ファイル名に使えない記号が混ざることがあります。そこを安全な名前に直す必要があります。

5.アイコン

image.png.webp

Chrome拡張機能には、ツールバーや管理画面に表示されるアイコンがあります。16px、48px、128pxのように、複数サイズが必要になることがあります。

6.README

これは非エンジニア向けにはかなり大事です。

  • どのフォルダを読み込めばいいのか。
  • ZIPは解凍するのか。
  • Chromeのどこを開くのか。
  • うまく動かないときは何を確認するのか。

こういう説明がないと、せっかく作っても使い始めるところで止まってしまいます。

つまり、Chrome拡張機能づくりは「コードを書く」だけではありません。小さな道具箱として使える形に整える作業です。

そして、この一式をまとめて頼めるのがManusの良いところです。

Manusに頼む流れは、実はかなり生活感がある

image.png.webp

ここまで読むと、まだ少し「ちゃんとした開発」の話に見えるかもしれません。でも、実際にManusへ頼む流れは、かなり生活感があります。

私は最初から完璧な仕様書を書いているわけではありません。むしろ最初は、「noteの記事をSubstackに移すのが面倒なので、Markdownで保存できるChrome拡張機能がほしい」くらいの困りごとから始まります。

その時重要なのがAIにインタユーしてもらう形式にすること。具体的には、最初のプロンプトの文末に加える魔法のプロンプトです。

これ、何度も紹介しますが本当に素晴らしいので使ってほしい！

という指示をしようと思っているけど、指示で不足してる部分があればステップバイステップでユーザーに一問一答で確認して

そこからManusから提示された選択肢を見て

  • 「ファイル名も整えてほしい」
  • 「READMEも非エンジニア向けに書いてほしい」
  • 「画像URLも残してほしい」
  • 「Chromeで読み込める完成フォルダにしてほしい」

と少しずつインタビューに答えていきます。

最初から立派な設計図を書くというより、インタビューをしてもらい、設計図を一緒に作り上げるのが一番です。

それを元に実行し、完成したら動かしてみて、足りないところに気づき、そのまま言葉で伝えてまた直してもらう。この繰り返しです。

非エンジニアにとって大事なのは、「最初の指示を完璧にしなければ」と思いすぎないことです。

もちろん、最初から詳しく伝えられるならそのほうが良いです。でも、使ってみて初めて「あ、ここが必要だった」と気づくことも多い。今回のSubstack版でも、最初に思いつくのは「Substack記事をMarkdownで保存したい」くらいでした。

AIにインタビューされることで、記事タイトル、著者名、公開日、URL、本文、見出し、箇条書き、画像、引用、リンク、ファイル名、有料記事で本文が見えない場合の表示など、必要な要素が順番に見えてきます。

これは最初から頭の中に全部あったわけではありません。

「実際に使うなら何が必要だろう？」と考えていく中で、だんだん仕様らしくなっていきます。

だから、Manusに頼むときは、まず困りごとを出す。次に、インタビューしてもらう、そして使う場面を出す。最後に、欲しい出力を出す。この順番がわかりやすいです。

  • 困りごと：
    Substackの記事を別の場所でも使いたいが、手作業で整えるのが面倒。
  • インタビュー形式：
    どんな内容を詳しく指示すればいいのかわからない。
  • 使う場面：
    自分のSubstack記事ページを開いて、Chrome拡張機能のボタンを押す。
  • 欲しい出力：
    タイトル、著者、公開日、URL、本文をMarkdown形式でコピーまたは保存したい。

これくらいまで書ければ、十分スタートできます。あとはManusが作ったものを見て、足りないところを足していけばいい。この気軽さが、Manusで作る良さです。

非エンジニアがゼロから仕様を考えるときのコツ

「仕様」という言葉を聞くと、急に難しく感じます。でも、ここでいう仕様は、そんなに大げさなものではありません。要するに、「この道具に何をしてほしいか」を言葉にするだけです。

ただ、AIにインタビューしてもらう魔法のプロンプトを使うのが一番ですが、考えるコツを知っておくことで質問への回答精度や、選択肢に該当項目がない時にAI側に的確な指示を送ることができるようになります。

ザックリですが、非エンジニアがChrome拡張機能の仕様を考えるときは、次の5つだけ見ればかなり整理できます。

  1. どのページで使うのか
  2. 何を取得したいのか
  3. どんな形で出したいのか
  4. 失敗したときにどう知らせてほしいのか
  5. 最後にどんな形で受け取りたいのか

今回のSubstack版ならこちら

  1. 使うページは、Substackの記事ページです。substack.com配下の記事だけでなく、独自ドメインのSubstackにもできる範囲で対応したい。
  2. 取得したいのは、タイトル、著者、公開日、URL、本文、見出し、箇条書き、引用、リンク、画像URLです。
  3. 出力形式はMarkdown。できれば先頭にfrontmatterを入れて、あとから管理しやすくしたい。
  4. 失敗したときには、「この記事では本文を取得できませんでした」「表示されている範囲だけ取得しました」のように、何が起きたか分かるメッセージが欲しい。
  5. 最後は、Chromeに読み込める完成フォルダ、README、アイコン、zipファイルとして受け取りたい。これで十分です。

この5つを埋めるだけで、かなりAIに伝わりやすくなります。

逆に言うと、ここが曖昧だとズレやすいです。「いい感じに作って」だけだと、AIは何を重視すればいいかわかりません。見た目なのか、取得精度なのか、配布しやすさなのか、非エンジニア向けの説明なのか。そこを少しだけ言葉にしてあげるだけで、完成物の使いやすさが変わります。

ただし、最初から100点の仕様にしなくて大丈夫です。まずは70点で作る。実際に使う。足りないところを直す。これでいいと思います。

うまくいかない前提で、少しずつ直す

ここも大事です。Chrome拡張機能は、一発で完璧に動くとは限りません。特にWebページから情報を取得するタイプの拡張機能は、ページの作りに影響されます。

noteにはnoteの構造があり、XにはXの構造があり、SubstackにはSubstackの構造があります。同じSubstackでも、独自ドメインで運用されている場合や、記事の表示状態によって、取得できる情報が少し変わるかもしれません。

だから最初から「note、X記事、Substackを含めたどんなページでも完璧に動く万能ツール」を目指すとかなり大変です。クレジットがいくらあっても足りないです。

ですので、最初は自分が使いたいページで動けばOKです。

そのうえで、動かなかったページがあれば、そのURLや状況をManusに伝えます。「このページではタイトルは取れるけど本文が取れません」

  • 「画像URLがMarkdownに入りません」
  • 「リンクの改行が崩れます」
  • 「ファイル名に変な記号が入ります」

こうやって、実際の不具合を伝えて直していきます。

これは、前回のnote版・X記事版でもかなり感じました。最初に作ってもらったものが、すぐ完璧に動くわけではありませんでした。でも、実際にページで試して、うまくいかないところを伝えると、少しずつ良くなっていきます。

この感覚がけっこう楽しいです。自分がプログラムを書いているわけではないのに、自分の道具が育っていく感じがあります。これもVibe Codingの面白さだと思います。

セーブポイントとしてGitHub管理も軽く考える

Untitled_Clipping_051926_103926_PM.jpg.webp

Chrome拡張機能を作っていると、途中でこう思う瞬間があります。「あれ、さっきの状態のほうが良かったかも」

これはかなりあります。AIに修正を頼んでいくと、良くなることもあれば、別の部分が崩れることもあります。

ボタンの見た目を直したら、ダウンロード機能が動かなくなった。本文の取得を改善したら、ファイル名がおかしくなった。

READMEを直しただけのつもりが、フォルダ構成が変わってしまった。こういうことは普通に起きます。

そこで役立つのが、GitHubのような管理場所です。GitHubは、ざっくり言えば「変更のセーブポイントを残せる場所」です。

難しく考えすぎなくて大丈夫です。まずは、完成した拡張機能フォルダをひとつ保存しておく。うまく動いた状態を残しておく。大きく修正する前に、その状態に戻れるようにしておく。

この考え方だけでも十分です。今回はGitHubの詳しい使い方までは深入りしません。そこまで入れると記事の主役がズレるからです。

ただ、AIと一緒にツールを作るなら、どこかで「戻れる場所」を作るのはおすすめです。以前、GitHub連携について書いた記事もあるので、ここは過去記事への導線として軽く触れるくらいにします。

その点Manusなら以下のような指示だけでOK！（GitHubのアカウントは必須）

この拡張機能をGitHubへ非公開で保存しておいて

大事なのは、AIに任せっぱなしにすることではありません。AIに作ってもらいながら、うまく動いた状態を残しておく。

これができると、かなり安心して実験できます。

まずはManus、慣れたらCodexやClaude Codeでもいい

今回の記事ではManusを主役にしています。ただ、これは「Manusだけが正解」という意味ではありません。

最初の一歩はManusが手軽です。完成品としてまとめてもらいやすい。スマホでも依頼しやすい。自然言語で丸ごと頼みやすい。

だから、非エンジニアがChrome拡張機能づくりを体験する入口として、とても良いと思っています。一方で、慣れてくるとCodexやClaude Codeもかなり便利です。

たとえば、すでに手元にある拡張機能を細かく直したいとき。どのファイルのどこが原因か見たいとき。

GitHubで管理しながら、変更内容を確認したいとき。こういう場面では、CodexやClaude Codeのようなコード作業に強いAIが使いやすくなります。

なので、流れとしてはこうです。

  • 最初の完成品づくり: Manus
  • 細かい修正や管理: Codex / Claude Code
  • セーブポイント管理: GitHub

もちろん、最初からCodexで作ってもいいです。画像生成もGPT-Image-2でできるのでアイコン作成も可能です。

でも、非エンジニアが「Chrome拡張機能って自分でも作れるんだ」と体験するには、Manusの手軽さがかなり合っています。

まずは楽しく作る。そのあと、必要に応じて管理や修正の道具を増やす。

これくらいの順番がちょうどいいと思います。

🌱 無料部分のまとめ：Chrome拡張機能は、自分の不便を道具にする入り口

05_summary_3points.png.webp

ここまで、Chrome拡張機能をかなり噛み砕いて見てきました。大事なのは、難しい技術として見るのではなく、自分の作業を少しラクにする道具として見ることです。

自分だけの小さな道具をブラウザに足す。自分がよく開くページで、自分が欲しい情報を取り出す。

自分が使いやすい形式に整える。それをManusに自然な言葉で頼む。

これができると、発信運用の見え方が少し変わります。noteに書いた記事をSubstackへ移す。

Xの記事形式をMarkdownにして、ニュースレターとして届け直す。Substackの記事をMarkdownで保存して、noteやX記事に展開し直す。

こういう流れが、少しずつ自分の手元で作れるようになります。もちろん、最初から大きなものを作る必要はありません。

最初は、1つのボタンでいいです。「今見ているページをMarkdownで保存する」

これだけでも、十分に便利です。そして、その小さな成功体験があると、次にこう思えます。

  • 「これ、別のサイトでもできるのでは？」
  • 「ファイル名を変えられるのでは？」
  • 「画像ももう少しきれいに取れるのでは？」
  • 「自分の発信用にもっと整えられるのでは？」

この感覚が、自分用ツールづくりの入り口です。ここから先の有料エリアでは、今回の実例として、Substack記事をMarkdown形式で取得するChrome拡張機能の配布と、Manusに投げるための指示プロンプトを紹介します。

前回のnote版・X記事版を材料にして、Substack版へ広げる流れです。「自分でもこう頼めば作れるのか」という再現性を重視してまとめました。

🔐 ここからのコンテンツ

画像

ここまで、Chrome拡張機能の考え方、自分用に使えること、Manusに頼むときのポイント、そして前回のnote版・X記事版を材料にSubstack版を作る流れを一通り見てきました。

たぶん、ここまで読んだ方の中には、こう思った方もいるはずです。

「Substack用の拡張機能、実際に使ってみたい」
「Manusへの指示プロンプト、自分でも真似できそう」
「でも、ゼロから作るのはまだちょっと不安…」

ここなんですよね。

仕組みはわかった。やれそうな気もしてきた。でも、最初の一歩をどこから踏み出せばいいのか。そこが、なんとなくぼんやりしている。

私もそうでした。「作れる」と「実際に作る」の間には、意外と大きなギャップがあります。

だから今回も完成した拡張機能を丸ごと配布します。

さらに、私がManusとのやり取りで実際に使った指示プロンプトも一緒にお渡しします。完成品を受け取るだけでなく、「どう頼んだら作れたのか」も手元に残ることで、「自分でも次は作れそう」という感覚が生まれやすくなると思っています。

この先では、実際にダウンロードできるZIPファイルの中身、インストール手順、使い方の注意点、そしてManusへの指示プロンプト全文をまとめています。

さらに、実際にManusがどんな流れで作ったか、どこでつまずいて、どう修正したかも再現します。「修正NGを宣言してから分析させる」という、AIと一緒に開発するときの小さなコツも紹介しています。

まずは完成品を1回使ってみることで、Substack記事をMarkdownで取り出す流れが体に馴染みます。そこから先は、少しずつ自分用にカスタムしていけばいい。

それではここから先で、ファイル一式とプロンプトをお渡しします。一緒にコンテンツ発信を楽しんでいきましょう！

✉️Substackの方でも気軽に交流しましょう！皆さんのご登録お待ちしています！

📝 発行者

📝テツメモ｜tetumemo（Xアカウント）

📝テツメモ｜tetumemo（Xのハイライト）

📝テツメモ｜tetumemo（リンク集）

📝テツメモのSubstack：SNS版

📝Substack版ニュースレター：「テツメモ｜AI時代の仕事と発信メモ」

🎤Spotify：AI QUEST（今日から始めるAI生活）

🎤Apple Podcasts：AI QUEST（今日から始めるAI生活）

📹️YouTube：AI QUEST（今日から始めるAI生活）

📝noteでも、たまにAIなどの記事を書いています。

🎟️お得な招待コード

💡Manus（1,000クレジットが獲得できる限定招待コード）

💡AIエージェント「Felo」（月額100円引きの招待コード）

💡Perplexity Pro（初月10ドルの招待コード）

💡Genspark

💡Lovartの招待コード

💡LilysAI（7日間有料プランが使える招待コード）

💡YouWare（アプリを作ってUPして稼ぐ新しい仕組み）

💡リアルタイム翻訳「Felo字幕」（15分無料で試せる招待コード）

💡便利なAI音声入力ツール「Typeless」（5ドルのクレジットがもらえます）

購読中
ここから先は有料コンテンツです
この続き：10,472文字 / 画像20枚
2026年05月のバックナンバー
¥1,176 / 税込み
収録されている記事
¥980 / 月額 (税込み)
購読を開始すると有料記事が閲覧できるようになります。バックナンバーは別途購入が必要です。
今月の記事

7,000人以上の方達が購読中

いつでも購読解除可能です

PREVIOUS
Substackの最初の1本は、過去記事でもいい。noteとXの記事資産をニュースレターに変えるChrome拡張機能を配布します
NEXT
Xサブスク（月額980円）でX検索AIを手に入れた。Hermes AgentのWindows導入手順と効率化Skills3本をシェア