さて、どうもつっつです！今回のテーマも前回に引き続きChrome拡張機能機能いってみたいと思います。
今回は前回より多分敷居が低い？？ポップアップ型で行ってみたいと思います。
さらにノープログラム宣言します！
目次
Chrome拡張機能の作り方
ポップアップ？！いきなり完成形
まずはイメージを伝えたいと思います。
↑↑Chrome拡張機能って言ったらこれですよねよくみるアレですね↑↑
クリックしたイメージです。
すごく高度な事が出来たりもしますが今回はさらにぐっと難易度を下げて簡単な地図を表示する拡張を作ってみたいと思います。
今回は前回と違いプログラムなんかも使わないのでかなり簡単かと思います。
まずは、、、準備！
適当にフォルダーを作ります。
そして写真みると気づくかもですが、
ファイルが少ないですね、ファイルが少ないとテンションがあがる派ですw
ではでは、下記に示すコードを該当するファイルに貼り付けてくださいw
各ファイルについても説明して行きたいと思います。
main.html
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
</head>
<body style="background:#f1f1f1; width:600px; height:480px;">
<iframe width="600" height="480" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.co.jp/maps?f=q&source=s_q&hl=ja&geocode=&q=&aq=&sll=35.689649,139.691849&sspn=0.573856,1.056747&brcurrent=3,0x605d1b87f02e57e7:0x2e01618b22571b89,0&ie=UTF8&ll=35.673474,139.710388&spn=0.573972,1.056747&t=m&z=11&output=embed"></iframe><br />
<small><a href="https://maps.google.co.jp/maps?f=q&source=embed&hl=ja&geocode=&q=&aq=&sll=35.689649,139.691849&sspn=0.573856,1.056747&brcurrent=3,0x605d1b87f02e57e7:0x2e01618b22571b89,0&ie=UTF8&ll=35.673474,139.710388&spn=0.573972,1.056747&t=m&z=11" style="color:#0000FF;text-align:left"></a></small>
</body>
</html>
メインのファイル、ここに普通にHTML、CSS、JavaScriptなんか記述すればOKです。
今回はNoScriptで簡単にって事でグーグルマップの貼り付けコードをそのまま貼り付けちゃってます。
それだけでも十分成立するのでw
icon19.png
アイコンファイルですお好きなPNG画像をどうぞ。
ただし、19px×19pxが推奨されてるようです。
manifest.json
{
"name": "PopUp",
"version": "0.1",
"manifest_version": 2,
"description": "PopUp Tool",
"browser_action":{
"default_icon": {
"19": "icon19.png"
},
"default_title": "PopUp",
"default_popup": "main.html"
}
}
Chrome拡張機能設定ファイルです。
シンプルだと思いませんか？？
重要なのは ”19″: “icon19.png”、”default_popup”: “main.html”の部分です
コード量少ないですね、少ないとテンションあがる派ですw
詳しくはGoogleのマニュアルをみてください。
さてさて動作させよう
これを読み込み動作させましょう！
- Chromeのアドレスバーにchrome://extensions/と打ち込み
- デベロッパーモードにチェックを入れ、
- 「パッケージ化されてない拡張機能を読み込む」でtestフォルダーを選択読み込んでください
- 有効にチェック
そうすると最初の様にアイコンが表示されると思います。
どうですか？？うまくいきましたか？？
上手くいっていたらひと安心ですw
ここから完成品をDLできます！
簡単な拡張なら本当にさっくり作れますよ。
簡単なHTMLファイルだけで拡張機能いろいろ多分つくれると思います。
例えばクイズ、RSSリーダー、パ●ックマンなどなど。
本当はもっと高度なHTMLをエクセルに変換とかfunkyなのやりたいのですが、書くのが辛くなるので今日はこのくらいで失礼します。
