はじめに
Webの技術はHTML/CSSとJavaScriptを中心に構成されており、 Google Chrome拡張機能でも、「使える」レベルの拡張機能には JavaScriptが欠かせません。
本格的な拡張機能を作成するため、JavaScriptを使って、拡張機能に「ボタンがクリックされたときにイベントを実行する」という機能のの作り方を説明します。
JavaScriptの役割
JavaScriptの役割は「Webサイトに動きをつける」ことです。
HTMLとCSSのみで構成されるサイトは静的サイトと呼ばれ、 一度表示したら、以降の表示は基本的に変化しません。
JavaScriptを使用すると、静的なサイトに動きをつけることができます。 このようなサイトを動的なサイトと表現します。 動き、と言うのは例えば以下のサイトをみるとよくわかります。
マウスを動かしたり、ホイールを動かしたりすると それに合わせて表示が変化します。 これはHTML/CSSでは実現できないものです。
このように、JavaScriptはWebサイトに動きをつけてくれるプログラミング言語です。
※ Node.jsというサーバーサイドのJavaScript環境もありますが、今回は説明は割愛します
JavaScriptの実装方法
では拡張機能へJavaScriptを実装する方法を説明します。
実装する機能は、冒頭にも書いた通り「ボタンをクリックされたときにイベントを実行する」というものです。
コード
- manifest.json
{ "manifest_version": 2, "name": "test app", "version": "1.0", "description": "test app", "icons": { "128": "icon.png" }, "browser_action": { "default_title": "test app", "default_popup": "popup.html" } }
- popup.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="style.css"> </head> <body id="body"> <div class="container"> <h1>The Time is...</h1> <h2 id="timearea">?</h2> <button id="btn">Show the time now!</button> <script src="/popup.js"></script> </div> </body> </html>
- style.css
body { width: 300px; } .container { text-align: center; }
- popup.js
document.getElementById('btn').addEventListener("click", function(){ var time = new Date().toTimeString(); document.getElementById('timearea').innerHTML = time; })
解説
身も蓋もない解説ですが、今回のようなJavaScriptを使用する際には 通常通りaddEventListenerを使えば大丈夫です。
今回の例ではボタンをクリックすると現在時刻が表示されます。
クリックすると...
のように表示ができます。
まとめ
今回はとても基本的なJavaScriptの内容でした。 次回からはBackgroundで動作するJavaScriptの処理を紹介したいと思います。