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