• WEB

簡単!Chrome拡張機能の作り方 その2

  • つっつ
    つっつ デザインちーむ
  • このエントリーをはてなブックマークに追加
簡単!Chrome拡張機能の作り方 その2

さて、どうもつっつです!今回のテーマも前回に引き続き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&amp;source=s_q&amp;hl=ja&amp;geocode=&amp;q=&amp;aq=&amp;sll=35.689649,139.691849&amp;sspn=0.573856,1.056747&amp;brcurrent=3,0x605d1b87f02e57e7:0x2e01618b22571b89,0&amp;ie=UTF8&amp;ll=35.673474,139.710388&amp;spn=0.573972,1.056747&amp;t=m&amp;z=11&amp;output=embed"></iframe><br />
    <small><a href="https://maps.google.co.jp/maps?f=q&amp;source=embed&amp;hl=ja&amp;geocode=&amp;q=&amp;aq=&amp;sll=35.689649,139.691849&amp;sspn=0.573856,1.056747&amp;brcurrent=3,0x605d1b87f02e57e7:0x2e01618b22571b89,0&amp;ie=UTF8&amp;ll=35.673474,139.710388&amp;spn=0.573972,1.056747&amp;t=m&amp;z=11" style="color:#0000FF;text-align:left"></a></small>
</body>
</html>

メインのファイル、ここに普通にHTML、CSS、JavaScriptなんか記述すればOKです。

今回はNoScriptで簡単にって事でグーグルマップの貼り付けコードをそのまま貼り付けちゃってます。
それだけでも十分成立するのでw

icon19.png

icon19

アイコンファイルですお好きな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のマニュアルをみてください。

さてさて動作させよう

これを読み込み動作させましょう!

  1. Chromeのアドレスバーにchrome://extensions/と打ち込み
  2. デベロッパーモードにチェックを入れ、
  3. 「パッケージ化されてない拡張機能を読み込む」でtestフォルダーを選択読み込んでください
  4. 有効にチェック

拡張機能の動作ページ

そうすると最初の様にアイコンが表示されると思います。

拡張機能のアイコン出現

どうですか??うまくいきましたか??
上手くいっていたらひと安心ですw

ここから完成品をDLできます!

サンプル

簡単な拡張なら本当にさっくり作れますよ。

簡単なHTMLファイルだけで拡張機能いろいろ多分つくれると思います。
例えばクイズ、RSSリーダー、パ●ックマンなどなど。

本当はもっと高度なHTMLをエクセルに変換とかfunkyなのやりたいのですが、書くのが辛くなるので今日はこのくらいで失礼します。

このエントリーをはてなブックマークに追加

つっつが最近書いた記事

WRITERS POSTS もっと見る

他にもこんな記事が読まれています!

  • WEB
  • マーケティング
  • サーバー・ネットワーク
  • ライフスタイル
  • お知らせ