基本的な知識
1。プラグインファイル構造
1.1。 manifest.json
各拡張機能、インストール可能なWebApp、およびSkinには、重要なプラグイン関連情報を保存するJSON形式のマニフェストファイルがあります。
基本的な構成例：
{"name"： "browser action demo"、 "version"： "1.0"、 "permissions"：["tabs"、 "http：//*/*"、 "https：//*/*"]、 "browser_action"：{"default_title"： "switch light"、 "default_pop"： "popup.html"}、 "background"：{"page"： "background.html"}、 "manifest_version"：2}1.2。ポップアップ
プラグインのポップアップウィンドウ、上記の構成のbrowser_actionのdefault_popupはこのページです。
1.3。背景ページ
ほとんどのアプリケーションには、アプリケーションの主な機能を実行するための背景ページが含まれています。
1.4。コンテンツスクリプト
コンテンツスクリプトは、アプリケーションとWebページ間の相互作用を有効にすることができます。これは、ブラウザによってロードされたページ内で実行できるJavaScriptスクリプトを指します。コンテンツスクリプトは、アプリケーションの一部ではなく、Webページの一部と考えることができます。
2。ファイル間の相互作用
バックグラウンドページの関数は、ポップアップウィンドウで直接呼び出すことができます。
コンテンツスクリプトは、現在のWebページのDOMツリーを読み取って変更できますが、それが配置されているアプリケーションの背景ページ（背景）のDOMツリーを変更することはできません。
コンテンツスクリプトとアプリケーション間の相互作用：お互いにメッセージを送信できます
3。JS（コンテンツスクリプト）ファイルをWebページに挿入します。
方法1：manifest.jsonファイルで構成します：
「content_scripts」：[{"matches"：["http://www.google.com/*"]、 "css"：["mystyles.css"]、 "js"：["jquery.js"、 "myscript.js"]}]、方法2、executescript（）を介して：
JavaScriptスクリプトをページに挿入して実行します。
Chrome.tabs.executecript（integer tabid、object details、function callback）chrome.tabs.executecript（tabid、{file： "func.js"、allframes：true}）;UIの外観
1。ブラウザのアクション：
メインクロムツールバーのアドレスバーの右側にアイコンを追加します。
注：パッケージ化されたアプリは、ブラウザアクションを使用できません
1.1。 manifest.jsonの構成
登録ブラウザのアクション：
{"name"： "my extension"、... "browser_action"：{"default_icon"： "images/icon19.png"、// optional "default_title"： "google mail"、// optional;ツールチップ「default_popup」に表示：「popup.html "//オプション}、...}1.2。構成アイテムの説明
（1）default_icon
アイコン19 * 19px
browser_actionのマニフェストでdefault_iconフィールドを変更するか、seticon（）メソッドを呼び出します。
Chrome.browseraction.seticon（オブジェクトの詳細）
ブラウザアクションアイコンを設定します。アイコンは、キャンバス要素から抽出された画像またはピクセル情報へのパスにすることができます。アイコンパスであろうと、キャンバスのイメイガンタであろうと、このプロパティを指定する必要があります。
（2）default_title
browser_actionマニフェストのdefault_titleフィールドを変更するか、settitle（）メソッドを呼び出します。 default_titleフィールドにローカライズされた文字列を指定できます。 Internationalizationをクリックして詳細を表示します。
Chrome.browseraction.settitle（オブジェクトの詳細）
ブラウザアクションのタイトルを設定すると、これはツールチップに表示されます。
（3）バッジ
ブラウザアクションはオプションでバッジを表示できます - アイコンにいくつかのテキストを表示します。バッジは、ブラウザアクションのための小さな拡張ステータスプロンプト情報を単純に更新できます。
バッジスペースは限られているため、4文字未満のみをサポートします。
バッジのテキストと色を設定するには、それぞれsetBadgetext（）とsetBadgeBackGroundColor（）を使用できます。
chrome.browseraction.setBadgetext（オブジェクトの詳細）
ブラウザアクションのバッジテキストを設定すると、バッジがアイコンに表示されます。
setBadgeBackGroundColorchrome.Browseraction.setBadgeBackGroundColor（オブジェクトの詳細）
バッジの背景色を設定します。
（4）default_popup
ポップアップバブルのヒント
BROWSER_ACTIONのマニフェストでDefault_Popupフィールドを変更してHTMLファイルを指定するか、SetPopup（）メソッドを呼び出します。
chrome.browseraction.setpopup（オブジェクトの詳細）
ブラウザのアクションをクリックすると、ポップアップに表示されるHTMLを設定します。
1.3。ヒント
最適なディスプレイについては、次の原則に従ってください。
ブラウザのアクションは、ほとんどのWebサイトに機能要件があるシナリオでのみ使用されていることを確認してください。
ブラウザのアクションが機能を持ついくつかのWebページでは使用されていないことを確認してください。このシナリオにはページアクションを使用してください。
アイコンサイズが19x19ピクセルスペースを占める必要があることを確認してください。ブラウザアクションのアイコンは、ページアクションのアイコンよりも大きくて重く見えるはずです。
Google Chromeのレンチアイコンを模倣しようとしないでください。そのパフォーマンスは、さまざまなテーマの下で問題がある可能性があり、拡張機能はより人目を引く必要があります。
多くのユーザーがテーマを使用しているため、アイコンのエッジを使用してアイコンのエッジを滑らかにするようにしてください。アイコンはさまざまな背景でうまく機能するはずです。
アイコンを点滅させ続けないでください、それは非常に不快です。
2。メニューを右クリックします
さまざまな種類のオブジェクト（写真、リンク、ページなど）の右クリックメニュー項目を追加することを選択できます。
必要に応じて、複数の右クリックメニュー項目を追加できます。拡張機能に追加された複数の右クリックメニュー項目は、Chromeによって自動的に組み合わされ、対応する拡張機能名のセカンダリメニューに配置されます。
右クリックメニューは、任意のドキュメント（またはドキュメント内のフレーム）またはローカルファイル（file：//またはchrome：//など）に表示されます。さまざまなドキュメントで右クリックメニューの表示を制御する場合は、create（）とupdate（）を呼び出すときにdocumenturlpatternsを指定できます。
2.1。 manifest.jsonの構成
マニフェストで「コンテンツメナス」許可を宣言します。同時に、右クリックメニューロゴとして使用する16x16アイコンを指定する必要があります。例えば：
{"name"： "my extension"、... "permissions"：["contextmenus"]、 "icons"：{"16"： "icon-bitty.png"、 "48"： "icon-small.png"、 "128"： "icon-large.png"}、...}}3。デスクトップ通知
何か重要なことが起こったことをユーザーに通知します。デスクトップ通知は、ブラウザウィンドウの外に表示されます。以下の写真は、通知の効果を示しています。さまざまなプラットフォームでは、通知の表示効果はわずかに異なります。
JavaScriptコードの小さな部分を直接使用して通知を作成します。もちろん、拡張機能パッケージの個別のHTMLページを介して実行することもできます。
3.1。 manifest.jsonの構成
{"name"： "My Extension"、... "Permissions"：["notifications"]、...}3.2。拡張ページと対話します：
getBackGroundPage（）とgetViews（）を使用して、通知と拡張ページでインタラクションを作成します
//通知の拡張ページメソッドを呼び出す... Chrome.extension.getBackGroundPage（）。dothing（）; //拡張ページから通知メソッドを呼び出します... chrome.extension.getViews（{type： "notification"}）。4。Omnibox
OmniBoxアプリケーションインターフェイスを使用すると、Google Chromeのアドレスバーにキーワードを登録できます。これはOmniboxとも呼ばれます。
Omniboxキーワードフィールドは、マニフェストに含める必要があります。 16x16のピクセルのアイコンを指定する必要があります。これにより、ユーザーがキーワードを入力したときにアドレスバーに表示されます。
4.1。 manifest.jsonの構成
{"name"： "AaronのOmnibox Extension"、 "Version"： "1.0"、 "omnibox"：{"keyword"： "aaron"}、 "アイコン"：{"16"： "16-full-color.png"}、 "background_page"： "background.html"}Chromeは、グレースケールモードで16x16ピクセルのアイコンを自動的に作成します。アイコンのフルカラーバージョンを提供して、他のシナリオで使用できるようにする必要があります。
5。オプションページ
ユーザーが拡張機能を設定するには、オプションページを提供する必要がある場合があります。オプションページを提供する場合、拡張機能管理ページChrome：// Extensionsにリンクが提供されます。 [オプション]リンクをクリックして[オプション]ページを開きます。
5.1。 manifest.jsonの構成
{"name"： "My Extension"、... "options_page"： "options.html"、...}6。特定のページを上書きします
代替ページを使用して、デフォルトでChromeの特定のページを置き換え、代わりに拡張機能によって提供されるページを使用できます。
6.1。 manifest.jsonの構成
{"name"： "My Extension"、... "Chrome_url_overrides"：{"pageToOverride"： "mypage.html"}、...}7。ページアクション
ページアクションを使用して、アドレスバーにアイコンを配置します。
拡張機能アイコンを常に表示したい場合は、ブラウザアクションを使用します。
パッケージ化されたアプリケーションはページアクションを使用できません。
7.1。 manifest.jsonの構成
{"name"： "my extension"、... "page_action"：{"default_icon"： "icons/foo.png"、// optional "default_title"： "do action"、// optional;ツールチップ「default_popup」に表示：「popup.html "//オプション}、...}7.2。構成アイテムの説明
ブラウザのアクションと同様に、ページアクションにはアイコン、プロンプトメッセージ、ポップアップがあります。しかし、バッジはありません
メソッドshow（）とhide（）を使用して、ページアクションを表示および非表示にします。デフォルトでは、ページアクションが非表示になります。表示する場合は、アイコンが配置されているタブページを指定する必要があります。アイコンは、タブページが閉じるか、別のURLを表示し始めるまで表示されたままになります（ユーザーが接続をクリックするなど）。
7.3。ヒント
数ページでのみページアクションを使用します。
ほとんどのページに使用しないでください。機能に必要な場合は、代わりにブラウザアクションを使用してください。
アイコンを常にアニメーションに表示しても大丈夫なときに、非常に迷惑になります。
8。トピック
テーマは、ブラウザ全体の外観を変更するために使用できる特別な拡張機能です。テーマは標準の拡張機能に似ていますが、テーマにはJavaScriptまたはHTMLコードを含めることはできません。
8.1。 manifest.jsonの構成
{"version"： "2.6"、 "name"： "camo theme"、 "themain"：{"images"：{"themain_frame"： "mages/themage_frame_camo_camo.png"、 "themain_frame_overlay"： "images/theme_frame_stripe.png"、 "theme_toolbar" 「Theme_ntp_background」：「Images/themain_ntp_background_norepeat.png "、" themain_ntp_attribution "：" images/Attribution.png "}、" colors "：{" frame "：[71、105、91]、" Toolbar "：[207、221、192]、" ：[36、70、0]、 "ntp_section"：[207、221、192]、 "button_background"：[255、255、255]}、 "tints"：{"buttons"：[0.33、0.5、0.47]}}、 "Properties"：{"ntp_background_alment"