Chrome拡張機能を作成する方法

この記事では、独自のChrome拡張機能を作成する方法を説明します。TalkToMeを作成する際に学んだ教訓に基づいています。これは、ウェブサイトのコンテンツを読んだり、他のウェブページに移動したりすることで視覚障害者を支援するChrome拡張機能です。

拡張機能の設定の基本について、次のように説明します。

  • セットアップ用のファイルの構成
  • Chromeストアに置く準備をする
マイクのアクセス許可の処理など、オーディオ機能を管理する方法については説明しません。これは私の友人Palashによってこの記事でカバーされており、例としてTalkToMe拡張機能も使用しています。

セットアップ用のファイルの構成

まず、ブラウザでchrome:// extensionsに移動するか、Chromeメニューの[その他のツール]と[拡張機能]をクリックします。これにより、拡張機能管理ページが表示され、開発者モードをオンにできます(右上隅にあるはずです)。

次に、manifest.json拡張機能用の新しいディレクトリにファイルを作成する必要があります。このファイルは、権限やプロジェクトをリンクするスクリプトファイルなど、拡張機能が機能するための重要な情報を提供します。マニフェストの内容は次のようになります。

{ "name": "Chrome Extension Example", "version": "1.0", "description": "Build an Extension!", "manifest_version": 2}

ディレクトリをExtensionManagementページにアップロードするには、[Load Unpacked]ボタンをクリックして、ディレクトリを選択します。これにより、ファイルがWebベースのUIにリンクされます。

構成する必要があるもう1つの重要なファイルはbackground.js、プロジェクトのバックグラウンドスクリプトです。

サンプルのバックグラウンドスクリプトには、次のタイプの構造があります。

chrome.runtime.onInstalled.addListener(function() { // add an action here});

拡張機能がオンになっている間は常に実行され、キーボードの押下などのさまざまなイベントを聞いたり、さまざまなページに移動したりするのに役立ちます。

複数のバックグラウンドスクリプトを持つこともできます。最初にそれらすべてをマニフェストファイルに登録する必要があります。これを行うには、次のmanifest.jsように構造化するだけです。これは、拡張機能のマニフェストファイルのようになります。

{ "name": "Chrome Extension Example", ...
 "background": { "scripts": [ "js/es6-promise.auto.min.js", "js/defaults.js", "js/speech.js", "js/document.js", "js/events.js", "js/stt.js", "js/listen.js" ], "persistent": false }}

ここで、拡張機能の機能だけでなく、UIのファイルも必要になります。これを行うには、というファイルを作成しますpopup.html。ポップアップは、拡張機能アイコンがクリックされると表示される小さなウィンドウです。たとえば、Cookie ManagerFirefox拡張機能のポップアップは次のとおりです。

popup.htmlファイルには、非常にシンプルにすることができます。以下は、1つのボタンでポップアップを作成するためのコードです。ドキュメントの本文といくつかのスタイルルールに開始ボタンと終了ボタンのタグを追加するのと同じくらい簡単です。

    button { height: 30px; width: 30px; outline: none; }  ;    

もちろん、popup.html拡張機能のコードには、これよりもはるかに多くのコンポーネントが含まれています。ボタンやスタイルシートなど、拡張機能のアイデアに適していると思われるものを自由に追加してください。

ポップアップコードとアイコンを設定します。ただし、アイコンの場合は、「default_icon」と「icons」の2つの場所にコードを追加する必要があります。「default_icon」プロパティはツールバーアイコンに使用され、「icons」は拡張機能管理ページに表示される画像に使用されます。

に戻ってmanifest.json次のコード行を追加し、デフォルトアイコンの画像パスを独自の画像に置き換えます。「default_icon」と「icons」の両方に同じ画像を入れることもできます。また、以下に指定したものと同じ寸法の写真を入れる必要ありません。たとえば、16 x16と48x 48の画像しかない場合は、32ピクセルと128ピクセルを指定する他の2行を自由に削除してください。

{ "name": "Chrome Extension Example", ...
 "page_action": { "default_popup": "popup.html", "default_icon": { "16": "images/img16.png", "32": "images/img32.png", "48": "images/img48.png", "128": "images/img128.png" } }, "icons": { "16": "images/img16.png", "32": "images/img32.png", "48": "images/img48.png", "128": "images/img128.png" }}

したがって、これらはChrome拡張機能の構築に不可欠なファイルです。

  • マニフェストファイル、
  • バックグラウンドスクリプト、および
  • ポップアップファイル

構成する可能性のあるその他のファイルは次のとおりです。

  • options.html そして
  • options.js

options.js拡張機能の使用に関しては、ユーザーにさまざまなオプションを提供します。オプションページの外観(と非常によく似ていますpopup.htmloptions.jsを処理し、機能を処理します。

これらのファイルはオプションですが、追加する場合はoptions.html、マニフェストで構成し、終了HTMLタグの直前に; / script>をoptions.js追加してファイルをリンクすることを忘れないでください<

{ "name": "Chrome Extension Example", ... "options_page": "options.html"}

拡張機能の動作を確認するには、すべてのファイルを保存し、[拡張機能の管理]ページが表示されているときに[再読み込み]をクリックします。ツールバーにアイコンが表示されます。オプションページを表示するには、拡張機能の下にある[詳細]をクリックして、[拡張機能オプション]と表示されている場所までスクロールダウンすることもできます。

プロジェクトをウェブストアに公開する

これで、拡張機能を開発してテストしました。今、あなたはそれを配布する必要があります!

プロジェクトのアップロードを開始するには、最初にプロジェクトを.zipファイルに変換します。ファイルには、少なくともmanifest.jsonファイルが含まれている必要があります。次に、Chromeウェブストアのデベロッパーダッシュボードにアクセスして、デベロッパーアカウントを持っていることを確認します。

「新しいアイテムを追加」ボタンをクリックすると、.zipそこにファイルをアップロードできるようになります。アプリの支払いを登録する場合を除いて、支払いシステムの設定に関する手順をスキップできます。ただし、プロジェクトをWebストアに配置する場合は、1回限りの開発者料金として5ドルを支払う必要があります。

また、潜在的なユーザーがプロジェクトの内容を正確に理解できるように、拡張機能の詳細な説明と写真を含めることを忘れないでください。

Once all of this is complete, you’ll receive an app ID and an OAuth token. The app ID is used for making requests to Google APIs, while the OAuth token is used for making Web Store payments.

Congratulations, you have now published your extension! ?

If you enjoyed this post, check out this next article. We’ll be diving deeper into how to configure audio features in your Chrome extension, just like we did for TalkToMe.