Chrome Appsの作成でポップアップを表示

はてぶのツールとかのあれ

をどのように再現しているのかを確認する

今回やったこと

f:id:m_shige1979:20150113215033p:plain

ファイルリスト

.
├── README.md
├── icon_128.png
├── main.js
├── manifest.json
├── popup.html
└── sample_support_metadata.json

マニフェストファイルに"browser_action"を用意

{
  "manifest_version": 2,
  "name": "Popup",
  "version": "1.0",
  "description" : "Popup Description",
  "browser_action" : {
    "default_icon" : "icon_128.png",
    "default_title" : "Popup",
    "default_popup" : "popup.html"
  }
}

popup用のhtmlを用意

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <script src="main.js"></script>
    <style>
        body{
            width: 400px;
            height: 400px;
        }
    </style>
</head>
<body>
    <h1>POP UP TEST</h1>
    <div>
        <button>push</button>
    </div>
</body>
</html>