キッカケはChatGPT(^^)

ChatGPTをボタン１つでNotionに転送できる

【ChatGPT to Notion】というChromeの拡張機能に感動して、

「我もこういうの作れるようになりたい🔥」

となったのですwww

元々【Save to Notion】を使っていたので

Chrome拡張機能のすごさは実感していたものの、

何の影響からか

Chrome拡張機能に興味関心ボルテージが急にマックスになりました。

多分たまたま見つけた【ChatGPT to Notion】のリポジトリが原因かと思います。

コードを読んで

分からないことが沢山あって

いつもはそれが苦痛でしかなかったんだけど

今回ばかりは心地よく、

結構ポジティブに学習プランを練りだしたhoromiです(*^^*)ｷﾌﾞﾝﾔｰ

その時々で異なる

Notionブロックの切り替えコードがない！

『そんなやり方あるの！？』

はじめは驚かされましたが、

落ち着いて考えてみると

そもそもそれ以前の、

「Chrome拡張機能ってどうやって動いているのさ？」

という部分から無知だったと気づき

今回は基礎の基礎から

ゆっくり楽しくChrome拡張機能の仕組みを学ぶことにしました。

いつもはyarn devでブログを表示させて

様子を伺っていましたが、

Chromeの拡張機能なので多分やり方が違うんだろうな…

ってことでChatGPTに質問してみることにしました。

以下、ChatGPT to Notionから持ってきたブロックですww

Chrome拡張機能の開発をはじめてやろうと思います。まずはどんなことを知っておくといいですか？？

Chrome拡張機能の開発を始める前に、以下の基本的な知識を押さえておくことが役立ちます：

1. HTML、CSS、JavaScriptの基礎知識： Chrome拡張機能は、これらのウェブ技術を使用して作成されます。したがって、これらの技術についての基本的な理解が必要です。
2. Chrome拡張機能のアーキテクチャ： Chrome拡張機能は、バックグラウンドスクリプト、コンテンツスクリプト、ポップアップウィンドウ、オプションページなど、複数の構成要素で構成されています。それらの役割や機能を理解しておく必要があります。
3. Chrome拡張機能のAPI：Chrome拡張機能のAPIには、ストレージ、ウィンドウ、タブ、通知、コンテキストメニュー、Webリクエストなど、多数の機能があります。それぞれの機能がどのように機能するか、どのように使用するかを知っておくことが重要です。
4. デバッグとテスト：Chrome拡張機能の開発中には、デバッグとテストが必要です。Chrome拡張機能の開発者ツールを使用してデバッグを行い、単体テストと統合テストを実行して、アプリケーションの品質を確保する必要があります。
5. Chromeウェブストアのポリシー：Chromeウェブストアに公開する拡張機能には、一定のポリシーがあります。拡張機能の公開前に、Chromeウェブストアのポリシーに従って作成された拡張機能かどうかを確認しておくことが重要です。

以上の基本的な知識を学習することで、Chrome拡張機能の開発を始めることができます。また、公式のドキュメントやチュートリアル、サンプルコードなども参考にすると良いでしょう。

ありがとうございます！Chrome拡張機能のアーキテクチャについて詳しく分かる公式のチュートリアルはありますか？

はい、Chrome拡張機能のアーキテクチャについては、公式のチュートリアルが用意されています。以下のリンクからアクセスできます：

https://developer.chrome.com/docs/extensions/mv3/overview/

このページには、Chrome拡張機能のアーキテクチャの概要と、バックグラウンドスクリプト、コンテンツスクリプト、ポップアップウィンドウ、オプションページ、デバイスアクションなどの機能要素の詳細が説明されています。

また、このチュートリアルの下部には、Chrome拡張機能のAPIリファレンスへのリンクもあります。APIリファレンスを使用して、拡張機能の機能を詳細に理解し、開発することができます。

以上のチュートリアルとAPIリファレンスを使用して、Chrome拡張機能のアーキテクチャをより深く理解し、開発を進めることができます。

公式チュートリアルがあるなんて知らなかったので

早速教えてもらえたリンクへ行ってみます。

公式ドキュメント

https://developer.chrome.com/docs/extensions/mv3/getstarted/development-basics/

必要な部分にリンクが埋め込まれていて

迷うことなく

涙することなく

作ることができました＼(^o^)／

手順通りにできた🎉

１つ目：指定したパス以下のページに素敵な要素を追加しちゃう♥

２つ目：ショートカットで今見てるページのレイアウトを変えちゃう♥

３つ目：ポップアップのstyleを変えてボタンを押したらタブが立ち上がっちゃう♥

ワクワクしかしないwwww

演習を１つやり終わった時に感じたのは

「あ、この部分をこう変えたらこういった使い方もできる👀」

というアイディア🔥

ちょっと改造してニコニコ

もうちょっと改造してニヤニヤ

そんな感じで進めています＼(^o^)／

作ったらいつものように勉強用リポジトリにためていこうと思います⭐

作れば作るほどアイディアが出てくるんだと思うので

とにかく作っていこうと思います🔥

理想は

【ChatGPT to Notion】のようなリポジトリをCloneして

自分色に改造すること。

でも、

急がず焦らず楽しみながら

Chrome拡張機能についての知識を増やしていきたいです＼(^o^)／

Chrome拡張機能を作るために必要な基礎知識や学習プランについて詳しく説明しています。まずは、公式ドキュメントやチュートリアルを参考にし、Chrome拡張機能のアーキテクチャやAPIを学ぶことが重要とされています。

その後、実際に手を動かしながら自分で拡張機能を作ることで、より深い理解を得ることができます。

また、Chrome拡張機能の作成には、JavaScriptやHTML、CSSなどの技術が必要です。

これらの技術を学ぶためには、オンラインのコースや書籍を利用することができます。

さらに、GitHubなどのオープンソースプロジェクトに参加することで、実践的なスキルを身につけることもできます。

最後に、Chrome拡張機能の作成は、自分のアイデアを形にすることができる非常に魅力的なプロジェクトです。

お後がよろしいようで＼(^o^)／