Chrome拡張機能を作成する方法がわからない場合は、Chromeのextensiondocumentationは基本的な実装に最適です。 しかし、より高度な機能を使用するには、多くのグーグルとスタックオーバーフローが必要です。 ページと対話する中間のChrome拡張機能を作成しましょう：ページ上の最初の外部リンクを見つけて新しいタブで開きます。

マニフェスト。json

マニフェスト。jsonファイルは、その名前や必要な権限など、yourextensionに関する重要な情報をChromeに伝えます。,

可能な最も基本的な拡張子は、manifest.jsonファイルを持つディレクトリです。ディレクトリを作成し、次のJSONintoを配置しましょうmanifest.json：

{ "manifest_version": 2, "name": "My Cool Extension", "version": "0.1" }

これは可能な限り最も基本的なmanifest.json、すべて manifest_versionは常に2でなければなりません。バージョン1は2014年時点でサポートされていないためです。 これまでのところ、拡張機能は絶対に何もしませんが、とにかくChromeにロードしましょう。,

拡張機能をChromeにロードする

拡張機能をChromeにロードするには、ブラウザでchrome://extensions/を開き、右上の”開発者モード”をクリックします。 “Load unpackedextension…”をクリックし、拡張機能のディレクトリを選択します。 これで、リストにyourextensionが表示されるはずです。

拡張機能のコードを変更または追加するときは、このページに戻ってページを読み込んでください。 Chromeは拡張機能を再読み込みします。

コンテンツスクリプト

コンテンツスクリプトは、”Webページのコンテキストで実行されるJavaScriptファイルです。,”これは、コンテンツスクリプトがbrowservisits webページと対話できることを意味します。 Chrome拡張機能のすべてのJavaScriptファイルがこれを行うことはできません。

という名前のコンテンツスクリプトを追加しましょうcontent.js:

// content.js alert("Hello from your Chrome extension!")

スクリプトを挿入するには、manifest.jsonファイルにそれについて伝える必要があります。,

これをmanifest.jsonファイルに追加します。

"content_scripts": , "js": } ]

これはChromeにcontent.js特別な<all_urls>URLパターンを使用して訪問するすべてのページに挿入するよう指示します。 一部のページだけにスクリプトを挿入したい場合は、match patternsを使用できます。 以下に、"matches"の値の例をいくつか示します。

Chrome拡張機能をリロードします。 各ページをご今のポップアップする警戒態勢にあるからです。 代わりにページの最初のURLをログに記録しましょう。,

URLをログに記録する

jQueryは必要ありませんが、すべてが簡単になります。 まず、jQuery CDNからjQueryのaversionをダウンロードし、拡張機能のフォルダに入れます。 最新の縮小バージョンjquery-2.1.3.min.jsをダウンロードしました。 ロードするには、manifest.json前に"content.js"追加します。, あなたの全体manifest.jsonは次のようになります：

{ "manifest_version": 2, "name": "My Cool Extension", "version": "0.1", "content_scripts": , "js": } ] }

jQueryができたので、最初の外部リンクのURLをログに記録しましょうcontent.js:

// content.js var firstHref = $("a").eq(0).attr("href"); console.log(firstHref);

ドキュメントがロードされているかどうかを確認するためにjqueryを使用する必要はありません。 Bydefaultでは、ChromeはDOMが完了した後にコンテンツスクリプトを挿入します。

試してみてください-アクセスするたびにコンソールに出力が表示されるはずです。,

ブラウザアクション

拡張機能がアドレスバーの横に小さなアイコンを追加すると、それはbrowseractionです。 拡張機能は、そのボタンをクリックしてからdosomethingをリッスンできます。

アイコンを入れます。これをmanifest.json:

"browser_action": { "default_icon": "icon.png" }

ブラウザアクションを使用するには、メッセージパッシングを追加する必要があります。

メッセージパッシング

コンテンツスクリプトは現在のページにアクセスできますが、アクセスできるApiでは制限されています。, 例えば、できな音がクリックのブラウザです。 拡張機能に別のタイプのスクリプト、すべてのChrome APIにアクセスできますが、現在のページにアクセスできないバックグラウンドスクリプトを追加する AsGoogleはそれを置きます：

コンテンツスクリプトにはいくつかの制限があります。 これらは、chrome.*Apiを使用することはできません。extension、i18n、runtime、およびstorageを除きます。,

したがって、コンテンツスクリプトは現在のページからURLを引き出すことができますが、そのURLをバックグラウンドスクリプトに渡 コミュニケーションのために、googleがメッセージパッシングと呼ぶものを使用します。 これは、コンテンツスクリプトと背景スクリプトが対話する唯一の方法です。,

バックグラウンドスクリプトについてmanifest.json以下を追加します。

"background": { "scripts": }

次に、background.js:

これにより、任意のJSONペイロードが現在のタブに送信されます。 JSONpayloadのキーは何でもかまいませんが、簡単にするために"message"を選択しました。 ここで、content.js:

以前のコードはすべてリスナーに移動されているため、ペイロードが受信されたときにのみ実行されます。, Browseractionアイコンをクリックするたびに、URLがコンソールに記録されるはずです。 動作していない場合は、拡張機能をリロードしてからページをリロードしてみてください。

新しいタブを開く

chrome.tabsAPIを使用して新しいタブを開くことができます。

chrome.tabs.create({"url": "http://google.com"});

ただし、chrome.tabsはbackground.jsでのみ使用できます。background.jsはタブを開くことができますが、urlをつかむことはできませんので、より多くのメッセージ渡しを追加するには。, ここにアイデアがあります：

  1. background.jsでブラウザアクションをクリックしてください。 クリックされたら、clicked_browser_actionイベントをcontent.jsに送信します。li>
  2. content.jsがイベントを受信すると、ページの最初のリンクのURLが取得されます。 次に、open_new_tabをbackground.jsに戻し、URLをトゥーペンにします。li>
  3. background.jsはopen_new_tabをリッスンし、メッセージを受信したときにgivenURLで新しいタブを開きます。,

ブラウザアクションをクリックすると、background.jsがトリガーされ、amessageがcontent.jsに送信され、URLがbackground.jsに送られ、指定されたURLで新しいタブが開きます。

まず、content.jsにURLを送信するように指示する必要がありますbackground.js。, 変更content.jsこのコードを使用するには：

ここで、background.jsそのイベントをリッスンするように指示するコードを追加する必要があります。

ブラウザアクションアイコンをクリックすると、ページ上のfirstexternal URLを持つ新しいタブが開きます。

それをラップします

完全なcontent.jsそしてbackground.js上記です。, ここでは完全なmanifest.json:

そしてここでは完全なディレクトリ構造です：

. ├── background.js ├── content.js ├── icon.png ├── jquery-2.1.3.min.js └── manifest.json

Chrome拡張機能の作り方の詳細

詳しくは、公式のChrome拡張機能のドキュメントを試してみてください。