この記事では、Chrome 拡張機能のスタートガイドの大幅な改善と、この夢の実現にご協力いただける方法についてご紹介します。
古いガイド
以前の Chrome 拡張機能のスタートガイド チュートリアルでは、ユーザーが拡張機能のポップアップでボタンをクリックしたときに現在のページの背景色を変更する基本的な拡張機能の例を紹介していました。また、4 色から選択できるオプション ページも用意されていました。
この基本的な例では、実際の拡張機能でよく使用される機能を追加する方法は説明していません。リニューアルの時期が来ていました。
新しいアプローチ
デベロッパーは Chrome 拡張機能の学習を開始する際に Google のドキュメントを参照することを想定しています。Google は、アクセスしやすく、初心者向けで、関連性の高い学習パスを提供することを目指しています。既存のチュートリアルのサンプルを改善するのではなく、最初から作り直すことにしました。
新しくなったスタートガイド コレクションのご紹介:
- 拡張機能 101
- ウェブ技術やよく使用される拡張機能コンポーネントなど、Chrome 拡張機能の開発に関する基本的なコンセプトを簡単に説明します。また、Chrome ウェブストアで拡張機能を設計して配布する際の注意事項も記載されています。
- 開発の基本
- Hello, Extensions の例を作成することによって、拡張機能の開発ワークフローを紹介します。開発中の拡張機能の読み込み、ログとエラーの特定、プロジェクト構造の選択、Typescript の使用について説明します。
- Reading Time のチュートリアル
- 記事を読み終えるまでにどれくらいの時間がかかるかがわかって便利です。「読み上げ時間」では、拡張機能のドキュメントのすべてのページに推定読み上げ時間を含む要素を挿入する方法を説明しています。
- フォーカス モードのチュートリアル
- ページから余分な要素を取り除くことで、最も関連性の高い情報に集中できます。集中モードでは、ページのスタイルを変更し、気を散らす要素を非表示にする方法を説明しています。
- タブ マネージャーのチュートリアル
- 拡張機能の開発を調べていると、複数のウィンドウに多くのドキュメント タブが開いてしまうことがあります。タブ マネージャーは、Chrome 拡張機能と Chrome ウェブストアのドキュメントのタブを整理します。
これらのチュートリアルでは、実際の拡張機能を構築する方法だけでなく、開発のヒントやベスト プラクティスも紹介しています。また、これらの拡張機能を使用すると、拡張機能のドキュメントの読みやすさが向上します。
その後の流れ
各チュートリアルには、次のセクションが含まれています。
- 拡張機能が実行するタスク。
- 取り上げるレッスン。
- 開始前に知っておくべきこと。
- 拡張機能を構築する手順。
- 拡張機能を読み込んでテストする方法。
挑戦したい場合は、拡張機能のカスタマイズや他の機能の追加方法に関するアイデアをまとめたセクションも用意されています。
ご協力のお願い
ご連絡をお待ちしております。これらのガイドに誤りがある場合や不明な点がある場合は、GitHub リポジトリでバグを報告してください。
この新しいスタートガイドは、以前のガイドよりも大幅に改善されていますが、Google はここで満足するわけではありません。すべての拡張機能デベロッパーに役立つよう、ドキュメントの改善と拡充に引き続き取り組んでまいります。
写真撮影: Vardan Papikyan（出典: Unsplash）