chrome拡張機能を作成してみた

chromeの拡張機能の作成方法が気になったので、学習がてら簡単なサンプルを作成してみました。
今回はそのまとめです。

■ 作成するもの
アイコンをクリックするとカレンダーがポップアップする拡張機能。(以下画像参照)

※作成したファイルはこちら ⇒ ダウンロード

■ 参考URL
https://developer.chrome.com/extensions

■ 概要
上記URLを参考に、まずは以下の3点を用意
・manifest.json ⇒ 拡張機能起動時の設定を書くファイル
・sampleExtensions.png ⇒ 拡張機能のアイコン用画像
・sample.html ⇒ 拡張機能のポップアップとして表示させるhtml。

■ manifest.json

 {
    "name": "SampleExtensions",
    "description" : "Base Level Extension",
    "version": "1.0",
    "manifest_version": 2,
    "browser_action": {
      "default_popup": "sample.html",
      "default_icon": "sampleExtensions.png"
    },
    "commands": {
      "_execute_browser_action": {
        "suggested_key": {
          "default": "Ctrl+Shift+F",
          "mac": "MacCtrl+Shift+F"
        },
        "description": "Opens sample.html"
      }
    }
}

とりあえずほぼ参考URLからのコピペです。
htmlのファイル名とアイコン画像名を書き換えました。

■ sample.html

<html>
	<head>
		<link rel='stylesheet' href='css/fullcalendar.css' />
		<script src='js/jquery.min.js'></script>
		<script src='js/moment.min.js'></script>
		<script src='js/fullcalendar.js'></script>
		<script src='js/makeCalendar.js'></script>
	</head>
	<body>
		<div id="calendar" style="width:500px; height:500px;"></div>
	</body>
</html>

今回はカレンダーを表示するために、fullcalendarというライブラリを使用しました。
サイズはある程度見やすいように縦横500pxにしています。
(fullcalendar)
https://fullcalendar.io/

■ 実装手順
jsやcssも含めた必要なファイルが用意できたら、それらを1つのフォルダにまとめます。