Chrome Extension_Browser Action_Hello World

開発 > Chrome Extension > Browser Action > Hello World

任意のディレクトリを作成する

ディレクトリについては特記事項はない。
自分で管理できるようにだけしておけば良いと思われる。
ファイル構成は以下とした。
icons
    icon_16x16.png
    icon_48x48.png
    icon_128x128.png
manifest.json
popup.html

アイコンを用意する

今回はここで入手した。
いくつかのサイズを入手し、それぞれ icon_16x16.png, icon_48x48.png, icon_128x128.png と名付けた。
16x16 は画面右上、48x48 は拡張機能画面に対応しているみたい。

popup.html を作成する

<!DOCTYPE html>
<html>
<head>
</head>
<body>
  <p>Hello World</p>
</body>
</html>

manifest.json を作成する

{
  "manifest_version": 2,
  "name": "Hello World Extension",
  "version": "1.0",

  "description": "Hello World",
  "icons": {
    "16": "icons/icon_16x16.png",
    "48": "icons/icon_48x48.png",
    "128": "icons/icon_128x128.png"
  },
  "browser_action": {
    "default_title": "",
    "default_icon": "icons/icon_16x16.png",
    "default_popup": "popup.html"
  }
}

動かしてみる

Chrome の右上の方にある[...]みたいなボタンを押す。
[その他のツール] > [拡張機能] を選択する。
[パッケージ化されていない拡張機能を読み込む]ボタンを押す。
作成したディレクトリを選択すると拡張機能が読み込まれる。
この時点で画面右上にアイコンが表示されるはず。
画面右上のアイコンをクリックすると "Hello World" というポップアップが表示される。

読み込めない!

manifest.json の文字コードは UTF-8 じゃないとダメかも。
manifest_version は 2 じゃないとダメらしい。

  • 最終更新:2017-02-09 17:59:00

このWIKIを編集するにはパスワード入力が必要です

認証パスワード