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