ChromeのExtensionを作成してみる

JavaScript

ChromeのExtensionを作成してみる


適当なディレクトリを用意する。

$ mkdir 適当なディレクトリ
$ cd 適当なディレクトリ

Browser Action

manifest.jsonを作成する。

$ vi manifest.json

{
  "name": "Sample Extension",
  "version": "1",
  "manifest_version": 2,
  "description": "拡張機能のサンプルです",
  "browser_action" : {
    "default_popup" : "hello_world.html"
  }
}

ポップアップ用のHTMLを作成する。

$ vi hello_world.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
</head>
<body>
Hello, world!
</body>
</html>

拡張機能の画面（chrome://extensions/）を表示し、
デベロッパーモードにチェックを入れ、
[パッケージ化されていない拡張機能を読み込む]ボタンを押して
作成したディレクトリを選択する。
※ディレクトリをこの画面にドラッグ＆ドロップしてもOK。


すると、Sampleの拡張機能が追加される。


ツールバーにアイコンが追加されているので、
クリックすると、Hello, world!が表示される。


Content Scripts

アラートするだけのJSファイルを用意する。

$ vi hello_world.js

alert('Hello, world!');

manifest.jsonにcontent_scriptsを追加する。

$ vi manifest.json

{
  "name": "Sample Extension",
  "version": "1",
  "manifest_version": 2,
  "description": "拡張機能のサンプルです",
  "browser_action" : {
    "default_popup" : "hello_world.html"
  },
  "content_scripts": [
    {
      "matches": ["http://d.hatena.ne.jp/*"],
      "js": ["hello_world.js"]
    }
  ]
}

拡張機能を修正した場合は、拡張機能の画面（chrome://extensions/）で
リロードする。


はてなダイアリーのページに行くと、アラートが表示される。

【リファレンス】
JavaScript APIs - Google Chrome
https://developer.chrome.com/extensions/api_index