Chrome ExtensionのGetting Startedをやってみた

ぼくは、Chrome Extensionで個人の趣味であるAmazon販売の効率化ができないか考え、Getting Startedから初めて見ることにしました。

Chromeの開発の情報は以下にまとまっています。

What are extensions? - Google Chrome

その中で、Getting Startedは以下になります。

Getting Started: Building a Chrome Extension - Google Chrome

序文には、難しいことをしなくても、Chrome Extensionを作れますと書いてあります。

期待大です！！

manifest.jsonが必要

manifest.jsonファイルという、メタデータを定義するファイルが必要です。

ここには、Chrome Extensionの名前や、どのようなアイコンファイルを使うか、HTMLファイルの定義などを記述します。

Manifestファイルのフォーマットは、こちらから参照できます。

Manifest File Format - Google Chrome

今回は、Getting Startedに載っているソースをそのまま使います。

{
  "manifest_version": 2,

  "name": "Getting started example",
  "description": "This extension shows a Google Image search result for the current page",
  "version": "1.0",

  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  },
  "permissions": [
    "activeTab",
    "https://ajax.googleapis.com/"
  ]
}

 引用：Getting Started: Building a Chrome Extension - Google Chrome

これを特定のフォルダにmanifest.jsonとして保存します。

HTMLとjavascriptとアイコンファイルを同一フォルダに配置する

各ファイルを以下からダウンロードします。

https://developer.chrome.com/extensions/examples/tutorials/getstarted/popup.html

https://developer.chrome.com/extensions/examples/tutorials/getstarted/popup.js

https://developer.chrome.com/extensions/examples/tutorials/getstarted/icon.png

 引用：Getting Started: Building a Chrome Extension - Google Chrome

これだけで、拡張機能は完成しました。

Chromeに拡張機能を読み込ませ使ってみる

ChromeのURLバーに、chrome:extensionsと打ち込み拡張機能を表示します。

または、Chromeの設定から、拡張機能を選択します。

そして、上記で作成したフォルダを、ブラウザにドラッグアンドドロップします。

そうすると、拡張機能が読み込まれます。

Chromeの右上に、アイコンができているはずなので、押してみてください。

何か、反応するはずです。

しかし、作成当時には、Googleのサーバ側が反応してくれないため、うまく動作しないみたいです。

「Cannot display image ....」などと表示されてしまいます。

これで、Getting Startedを実行することができました。

これを、元にいろいろ変更していこうと思います。