Chrome拡張ポップアップ画面にCSSとjsを追加する方法

Chrome ロゴ

popup型のChrome拡張に、CSSとjavascriptを追加してみました！

今回はこの2点の実装です。

CSSでの見た目のカスタム
javascriptでのボタンクリックイベント(ダイアログ表示)

今回やったこと
どんなふうになるのか？
HTMLの編集
CSSの作成
javascriptの作成
マニフェストの編集
あとがき

今回やったこと

前回行った、popup型の拡張に、CSSとjavascriptを追加することで、「それらしいもの」に1歩近づけました。

あくまで1歩、ですが。

使用しているソースは、前回載せたものをベースにしています。

http://www.lisz-works.com/entry/dev-chrome-extention-popup-testwww.lisz-works.com

一応全文載せています。

どんなふうになるのか？

まず表示がこのように変わります。

前回のものと比較

そして今回追加したボタンを押すことで

ダイアログ表示

このようにダイアログ表示がされます。

内容にあまり意味はなくて、javascriptを使う実験的な役割です。

それでは実装していきましょう！

HTMLの編集

CSSとjavascriptを追加していきます。

今回は適当に、「test.css」と「test.js」を作成・追加しました。
あと処理を簡単に書くために、jQueryも入れました。

jQueryっていまいちいつも入れるバージョンがわからなくて適当にしてしまう……

<html>
<head>
<title>popup-test</title>
<link rel="stylesheet" type="text/css" href="test.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8" src="test.js"></script>
</head>
<body>
  <p>test popup</p>
  <input type="button" id="btn" value="clkme" />
</body>
</html>

通常のHTMLと同じで、headに、作成したCSSとjavascript、更にjQueryを組み込みました。

この部分ですね。

<link rel="stylesheet" type="text/css" href="test.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8" src="test.js"></script>

あとは動作実験用に、bodyにボタンを追加しました。

<input type="button" id="btn" value="clkme" />

CSSの作成

CSSも実験的に用意したので、色変更と表示幅の設定を行ってみました。

body {
  background: #222;
  color: #ebebeb;
  width: 100px;
}

javascriptの作成

javascriptは、実験用のボタンを押すと、alert()によりダイアログが表示されるというものです。

大したことは書いてません。

$(function(){
  $("#btn").click(function(){
    alert("!!!");
  });
});

マニフェストの編集

以前行ったpopupのマニフェストに、この2つを追加。

"permissions": ["tabs"],
"content_security_policy": "script-src 'self' 'unsafe-eval' https://ajax.googleapis.com/ ; object-src 'self'"

全文はこうです。
追加する為に、前の行の最後に「,」を追加しているので、これも入れてくださいね！

{
  "name": "MyTestChromePopupExtention",
  "version": "0.0.1",
  "manifest_version": 2,
  "description": "Test popup extention",
  "icons": {
    "128": "icon128.png"
  },
  "permissions": ["tabs"],
  "browser_action": {
    "default_title": "",
    "default_icon": "icon128.png",
    "default_popup": "popup.html"
  },
  "content_security_policy": "script-src 'self' 'unsafe-eval' https://ajax.googleapis.com/ ; object-src 'self'"
}

これでダイアログを表示できるようになります。
なんでもパーミッション(権限)的な問題で、デフォルトだと表示されないとか。

あとがき

「Chrome拡張」という言葉で、「難しそう」イメージが先入観的につきやすいかもしれませんが、想像以上簡単な代物なんだな、というのが今の印象ですね。

ローカル等で、やりたいことをしてくれるHTML画面を作成するような感じですからね。

自分が便利になるように、試しに作ってみてはいかがでしょうか？

lisz-works

プログラミングと興味を貴方に

Chrome拡張ポップアップ画面にCSSとjavascriptを追加する方法