Google Chromeは現在最高のWebブラウザであり、Chromeの魅力の一部はその優れた拡張機能に依存しています。良いニュース：独自のChrome拡張機能を作成するのはそれほど難しくありません。このガイドでは、最もシンプルなHello World Extension（HTMLまたはJavaScriptの知識は必要ありません）から、より複雑なRSSフェッチ拡張機能に移動して、Chrome-Extension-Making Guruとしてのパスを開始します。
最初のChrome拡張機能をリリースしました。音楽プラス- この夏、その後よりシンプルですLifeHackerは拡張機能を通知しますLifehackerのRSSフィードを監視し、HTML 5ポップアップまたはバッジに新しい投稿の通知を表示します。
今日は、最初の最もシンプルなHello World Chrome拡張機能を作成する方法を説明します。その後、RSSフィードを取得し、[エクステンション]ボタンをクリックするとポップアップウィンドウにフィードアイテムを表示するLifeHacker Notifier拡張機能の軽いバージョンを作成します。それでは、拡張しましょう！
注記：Hello World ExtensionにはJavaScriptまたはHTMLの知識がゼロになりますが（率直に言って、必要に応じてそれを楽しむことができます）、この投稿の後半は両方を理解する必要があります。投稿の終わりに到達するには、いくつかの経験が必要になります。また、以前にあなたに示しましたFirefox拡張機能を構築する方法、したがって、Firefoxがよりスピードである場合は、そのガイドをチェックアウトすることをお勧めします。
始める前に知っておくべきこと
Webサイト、つまり少しHTMLを知っていて、JavaScriptに精通している場合は、Chrome拡張機能を作成できます。 HTMLとJavaScriptを初めて使用する場合、初心者のガイドコードを学ぶそしてWebサイトの作り方素晴らしい出発点です。
これらの2つのコアコンピテンシーを超えて、あなたが知る必要がある特別なものは本当にありません。 Chrome Extensionsは、Webページを作成したりJavaScriptでハッキングしたりするのに時間を費やしたことがあれば、楽しく簡単に作成できます。それで、まさにそれをしましょう。
私たちのプロジェクト：「Hello World」からRSS Fetcherまで
このガイドの目的のために、「Hello World」拡張機能から始めます。プログラミングが初めての場合、古典的な「Hello World」プログラムは、あらゆる言語、フレームワーク、またはプロジェクトを始めるための通過儀礼であり、その目標は単にテキスト「Hello World」を出力できるものを作成することです。
「Hello World」プロジェクトを終えた後、RSSを作成する基本を説明します。LifeHackerは拡張機能を通知しますクロム用。基本的に、この拡張機能はツールバーにボタンを追加し、LifeHackerのRSSフィードを監視し、投稿を便利なドロップダウンに表示します。また、新しい投稿が表示され、拡張機能ボタンに未読バッジを表示すると、ポップアップが表示されます。それでは始めましょう。
Manifest.json：クロム拡張機能の礎石
すべてのChrome拡張機能は、少なくとも呼ばれるファイルで構成されていますmanifest.json、拡張機能の基本を定義します - 名前、説明、バージョン番号、それがどのような拡張機能（Chrome拡張機能ができることは異なります。以下で詳しく説明します）、実行する必要があるアクセス許可（たとえば、アクセスする必要があるWebサイト）など。
それでは始めましょう。新しいフォルダーを作成します。名前を付けてくださいHello World- そして、お気に入りのテキストエディターを使用して、呼ばれる新しいテキストファイルを作成しますmanifest.json。次のコードをコピーして貼り付けます。
{ "name": "Hello World!", "version": "1.0", "description": "My first Chrome extension.", "browser_action": { "default_icon": "icon.png" }}名前、バージョン、および説明はすべてかなり自明ですが、browser_action何か新しいものです！browser_actionプロパティは、ツールバーにボタンを追加する拡張機能を作成していることをChromeに伝えます。これまでのところ、私たちが行ったのは、そのボタンにアイコンを割り当てることだけです。基本的に、あなたはあなたの拡張機能がアイコンを持っていることをChromeに言っています、icon.png、そしてそれはあなたと同じフォルダーにありますmanifest.jsonファイル。もちろん、あなたは持っていませんicon.pngあなたのファイルHello Worldまだフォルダーなので、それを修正しましょう。
ダウンロードこの小さな画像（経由）そして、それをあなたのHelloWorldフォルダーにコピーします。
私たちはまだ多くのことをしていませんが、あなたは実際にあなたがテストできるものをすでに作成したので、それをしましょう。ポイントクロムにChrome：// extensions/、そのウィンドウの上部左側の[開発者モード]チェックボックスをチェックしてから、[[延長]ボタンの読み込みボタンをクリックします。 ChromeをHello Worldフォルダーにポイントし、SelectまたはOK（オペレーティングシステムごとに変化）をクリックし、Chromeは拡張機能のスタブをロードします。
ただし、Hello Worldボタンをクリックしてみると、驚くべき量のことは何もしないことに気付くでしょう。それを修正しましょう。
ブラウザのアクションを作成しますか、それとも、そのボタンが何かをしたらいいと思いませんか？
あなたを開きますmanifest.jsonファイルして追加しますpopup呼び出されたHTMLファイルを指すアクションpopup.html、そうするように：
{ "name": "Hello World!", "version": "1.0", "description": "My first Chrome extension.", "browser_action": { "default_icon": "icon.png", "popup": "popup.html" }}注：ファイル名は、クロムを正しいファイルに向けている限り、問題ではありません。helloworld.htmlでmanifest.jsonファイルにも名前を付けている限りhelloworld.html。
そういえば、今すぐ作成する必要がありますpopup.html。したがって、もう一度、呼ばれるHTMLファイルを作成しますpopup.htmlそしてそれをあなたに保存しますHello Worldフォルダ。内部popup.html、「Hello World！」というテキストを追加するだけです。 （理論的には、有効なHTMLマークアップをそこに入れたいと思うでしょうが、それは厳密に必要ではないので、ここでスキップします。）
保存したことを確認してくださいmanifest.jsonそしてpopup.html、戻ってくださいChrome：// extensions/、拡張機能リストのHello World拡張子の横にある展開アイコンをクリックし、[右の写真）のリロードリンクをクリックします。
Chromeは、更新されたコードを使用して拡張機能をリロードします。ボタンをクリックして、マネーショットの準備をしてください！
功績が解除されました！あなたはあなたの最初のChrome拡張機能をhello-edにしました。いい仕事。それでは、物事をノッチにしましょう。 （途中で問題があった場合は、私の動作をダウンロードしてくださいhello world.zipそしてそれをあなたと比較してください。）
ここからどこに行きますか？
そのため、Chromeはツールバーにボタンを追加できます。これらのボタンをクリックすると、何かが発生する可能性があります。ニート！ここで拡張機能の開発を停止し、友達のコンピューターに拡張機能をインストールするのがたくさんあります。「Hello World！」テキストとあなたはいたずらの喜びを解き放ちました！可能性を想像してください。あなたの疑いを持たない友人は、魅力的な新しいボタンをクリックし、goatse！または、YouTubeビデオと... Rickrollを投げてください！ （またはこれをしないでください。あなたの友達はあなたに感謝しませんが、彼らがあなたが彼らを科していないものを知っていたら彼らはそうかもしれません。）
しかし、あなたの輝くユーモアのセンスで友達を感動させることは、これまでのところあなたを連れて行くだけです。おそらく、以前にさまざまなクロム拡張機能のトンで、基本的なクリックバットンショードロップダウン動作を見たでしょう。しかし、非常に異なるタスクを実行する拡張機能も見ています。あなたがガンダーを取るならChrome Extension Developer's Guide、リストの上部に馴染みのあるブラウザのアクションが表示されますが、デスクトップ通知の作成やOmniboxへのキーワードの追加から、オプションページの作成や特定のWebページを変更するアクションの実行まで、拡張機能ができることもたくさんあります。拡張開発に深く掘り下げる準備ができたら、開発者のドキュメントをページに分類して、拡張機能が活用される可能性のあるものを感じることができます。また、manifest.jsonドキュメントあなたが利用できる他のいくつかのオプションの感触を得るためにmanifest.jsonファイル。
とりあえず、ブラウザのアクションについてもう少し深く潜ります。自分自身をRSS読み取りと非合成のクロム拡張機能にする時が来ました。それでそれをしましょう。
次のレベルのこの豚の時です
ZeroからHello Worldに安全にナビゲートしたので、私たちは少しペースを上げます。 「Hello World」拡張機能は（JSON以外の）JavaScriptのなめを使用せず、実際にHTMLを書きませんでした。このセクションではそれを修正します。
まず、新しく改善されたものを見てみましょうmanifest.jsonこの拡張機能には使用します。
{ "name": "RSS Fetcher", "version": "0.1", "description": "Keep up with the latest from [insert web site here].", "icons": { "16" : "images/icon.png", "48" : "images/48.png", "128" : "images/128.png"}, "homepage_url": "https://insert_web_site_here.com/", "background_page": "background.html", "permissions": [ "https://insert_base_rss_url_here.com/*" ], "browser_action": { "default_icon": "images/icon.png", "default_title": "[INSERT WEB SITE NAME HERE] Fetcher", "default_popup": "popup.html" }}ここですぐに新しいものを歩きましょう。
まず、私が追加したことに気付くでしょう
icons。これらは、ブラウザの拡張機能ページやChrome Webストアなど、さまざまな場所に拡張機能のアイコンとして表示されるアイコンです。homepage_url書いた拡張機能に関連付けたいサイトを指し示します。background_pageバックグラウンドで常に実行されるHTMLページであり、特定の状態を維持したり、拡張機能のさまざまな部分に対して定期的なアクションを実行したりできます。拡張機能では、バックグラウンドページがRSSフィードを投票して、新しいものがフィードにプッシュされたかどうかを確認します。permissionsアクセスする必要がある特別な権限をChromeに伝えます。 Chrome Sandboxは拡張機能を備えているため、リクエストしない限り、すべてのブラウジングアクティビティにアクセスできません（および許可します）。許可プロパティを使用すると、必要な権限を正確に設定できます。この場合、ルートURLからRSSフィードをロードする許可が必要であり、新しいアイテムが到着したときにHTML 5通知を作成できるようにしたいと考えています。
あなたは私たちのことに気づいたでしょうmanifest.jsonファイルはまた、多くの新しいファイルとフォルダーを必要とするため、すべてを自分で設定する必要がある代わりに、LifeHacker RSS Feedから取得するこのコードの基本バージョンをダウンロードできます。ここ。
（LifeHacker Notifier Extensionで使用した画像を含めることにしましたが、明らかに、どんな画像でも動作する画像を交換できます。）
また、私がjqueryを含めたことに気付くでしょう。 JQueryに慣れていない場合は、JavaScriptで多くのことを行うことを非常に簡単にするJavaScriptフレームワークです。 JavaScriptを使用してWebで何かをし、ホイールの再構築に興味がなく、多くの時間を節約することに興味がある場合は、JQueryの使用を学ぶ必要があります。 （また、幸運です！非常にクールなWebサイトCodeAcademyがリリースされましたjQueryの紹介ガイド。）
これはすべて、すぐに複雑になったように見えるかもしれませんが、Hello World Extensionとこのより複雑なRSSフェッチャーの主な違いは実際には非常に簡単です。popup.htmlファイルにはHTMLといくつかのJavaScriptが含まれます。一緒に、彼らはそうするでしょう実際に物事をします「Hello World！」を表示するだけではありません。ボタンをクリックするたびに。
もう1つのことは、あなたの日常のHTMLとJavaScriptとは別にChrome Extension開発を設定しますChrome Extension API、拡張機能とブラウザの間のラインを曖昧にするあらゆる種類の機能へのアクセスを提供します。それでは、いくつかの基本を試してみましょう。
新しいpopup.htmlの仕組み
新しいpopup.htmlRSSのファイルFeeting拡張機能は次のように機能します：拡張機能のボタンをクリックすると、ロードされますpopup.html。それがロードされると、それは通話に合格しますbackground.html、RSSフィードを取得するように依頼します。一度background.htmlフィードを正常に取得し、フィードのXMLをに渡しますpopup.html、フィードをフレンドリーなHTMLに解析し、ポップアップ内に表示します。
background.htmlとpopup.htmlの間を通過します
Chromeでさまざまなセキュリティサンドボクシングが行われているため、拡張機能の一部は、拡張機能の他の部分と同じAPIまたは情報にアクセスできません。これを回避するには、クロム拡張機能に使用する必要がある一般的な手法の1つが含まれます拡張機能のさまざまな部分間にメッセージとデータをやり取りする。これがどのように機能するかの基本を実証するために、RSSフィードを取得する方法を示しましたbackground.html、そして私はそれを呼びますpopup.html。でbackground.html、あなたは気づくでしょうfetch_feed方法：
function fetch_feed(url, callback) { var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function(data) { if (xhr.readyState == 4) { if (xhr.status == 200) { var data = xhr.responseText; callback(data); } else { callback(null); } } } // Note that any URL fetched here must be matched by a permission in // the manifest.json file! xhr.open('GET', url, true); xhr.send();}これは非常に基本的な関数であり、URLとコールバック関数をパラメーターとして取得し、フィードを取得し、コールバック関数に渡します。拡張機能の他の部分を聞くために、このコードを追加します。
function onRequest(request, sender, callback) { if (request.action == 'fetch_feed') { fetch_feed(request.url, callback); }}// Wire up the listener.chrome.extension.onRequest.addListener(onRequest);驚くほど便利なものを使用する最後の行Chrome.Extension API、ページに、拡張機能の他の部分からのリクエストを聞くように指示します。それがそれを受け取るとき、それはそれをに渡すつもりですonRequest関数。ご覧のとおり、onRequest関数は、リクエストが処理方法を知っているアクションを要求しているかどうかを確認します（この場合、フィードを取得するリクエスト）、もしそうなら、その関数を呼び出します。
それでは、にジャンプしましょうpopup.htmlファイル。ロードすると、ページは完全に空です。これがそれを変えることを始めるものです：
$(document).ready(function() { fetch_feed();});私たちのfetch_feedメソッドはこのリクエストを発射します。
function fetch_feed() { chrome.extension.sendRequest({'action' : 'fetch_feed', 'url' : 'https://renshy.work/tech/hachiro/index.xml'}, function(response) { display_stories(response); } );}ご想像のとおり、chrome.extension.sendRequestリクエストを拡張機能の他の部分に送信します。そして私たちが知っているように、background.htmlこの正確なリクエストを聞いています！したがって、私たちの要求は跳ね返りますpopup.htmlにbackground.html、フィードを取得してから合格します戻るにpopup.html、それは呼び出された関数を呼び出しますdisplay_stories、それを伴ってからの応答を渡しますbackground.html。ディスプレイストーリー関数（ここではステップスルーしませんが、ソースで表示できます）は、XMLフィードを解析し、ポップアップのストーリーをレンダリングするために少しjQueryとJavaScriptを使用します。
これが信じられないほど簡単だと思いますか？
私は子供です。ただし、それを手に入れると、Chrome拡張機能を作成するのは非常に簡単でとても楽しいです。 （明らかに、複雑さはあなたが作りたいものによって異なります。）HTMLとJavaScriptに満足しているなら（ああ、きれいにしたいならCSSを推測します）、あなたはそんなにできることができます、そして、学習曲線はかなり穏やかです。だから、勇敢なコーダーを出て、あなたにいくつかの素晴らしい拡張機能を作ってください！
トラブルシューティング
あなたはすべてに優れています（Go You！）が、特にJavaScriptで時々つまずくつもりです。デバッグを支援する2つの貴重なツールがあります。最初はですconsole.log、これは、テキスト、オブジェクト、またはそれをChromeのJavaScriptコンソールに渡すものを書き込むJavaScriptメソッドであり、物事が間違っている可能性のある場所をキャッチできます。
2つ目は、Chromeの素晴らしい開発者ツール、より具体的にはJavaScriptコンソールとDom Inspectorです。拡張機能のボタンを右クリックして[ポップアップ]を選択することにより、ポップアップのコンソールを引き上げることができます。同様に、開発者ツールを引き上げることができますbackground.htmlをクリックしてbackground.html拡張ビューの拡張ビューにリンクしますChrome：//設定/拡張機能。
役立つリソース
私のChrome Extension構築の知識はすべて、Googleの非常に徹底的なドキュメントと、私が立ち往生したときに古き良きワールドワイドウェブ検索から来ています。だからあなたは確かにチェックアウトする必要があります：
Google Chrome Extensions開発者の公式ガイド：これは、あなたが知る必要があるすべてのことの出発点であり、あなたが使用したいかもしれないすべてのさまざまな拡張機能APIなどを置いています。どのような拡張機能を作成したいかを知っている場合は、1時間ほどかけてドキュメントを読んで、メモを取ること、リンクを節約することを強くお勧めします。
Stack OverflowのGoogle Chrome拡張タグページChrome Extension開発に関して、優れたQ＆Aで満たされています。何かに困惑している場合は、StackOverFlowに検索を行い、Web全体に検索を行い、答えが見つからない場合は、Overflowをスタックするために質問を投稿してみてください。それは素晴らしいです。
コーディングを取得します
したがって、このスターターガイドは十分です。袖をまくり、独自の拡張開発を行う時間です。質問がある場合、または単に作成する予定の拡張機能を共有したい場合は、コメントで聞いてみましょう。
写真リー・プラザー/シャッターストック。
