f:id:chang_app_dev:20210119003231p:plain

はじめに

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

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

JavaScriptの役割

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

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

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

www.histography.io

マウスを動かしたり、ホイールを動かしたりするとそれに合わせて表示が変化します。これは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;
  })