ずっと家でアプリ作っていたい

業務効率化小ネタなど

【入門】Google Chrome Extension (拡張機能)でJavaScriptを使用する①ボタンがクリックされた時にイベントを実行する

f:id:chang_app_dev:20210119003231p:plain

はじめに

Webの技術はHTML/CSSJavaScriptを中心に構成されており、 Google Chrome拡張機能でも、「使える」レベルの拡張機能には JavaScriptが欠かせません。

本格的な拡張機能を作成するため、JavaScriptを使って、拡張機能に「ボタンがクリックされたときにイベントを実行する」という機能のの作り方を説明します。

JavaScriptの役割

JavaScriptの役割は「Webサイトに動きをつける」ことです。

HTMLとCSSのみで構成されるサイトは静的サイトと呼ばれ、 一度表示したら、以降の表示は基本的に変化しません。

JavaScriptを使用すると、静的なサイトに動きをつけることができます。 このようなサイトを動的なサイトと表現します。 動き、と言うのは例えば以下のサイトをみるとよくわかります。

www.histography.io

マウスを動かしたり、ホイールを動かしたりすると それに合わせて表示が変化します。 これはHTML/CSSでは実現できないものです。

このように、JavaScriptはWebサイトに動きをつけてくれるプログラミング言語です。

※ Node.jsというサーバーサイドのJavaScript環境もありますが、今回は説明は割愛します

JavaScriptの実装方法

では拡張機能JavaScriptを実装する方法を説明します。

実装する機能は、冒頭にも書いた通り「ボタンをクリックされたときにイベントを実行する」というものです。

コード

{
  "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>

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を使えば大丈夫です。

developer.mozilla.org

今回の例ではボタンをクリックすると現在時刻が表示されます。

f:id:chang_app_dev:20210126211516p:plain

クリックすると...

f:id:chang_app_dev:20210126211554p:plain

のように表示ができます。

まとめ

今回はとても基本的なJavaScriptの内容でした。 次回からはBackgroundで動作するJavaScriptの処理を紹介したいと思います。