日常の進捗

主に自分のための，行為とその習慣化の記録

はじめてのChrome拡張 / Creating Google Chrome Extensions : Chapter 1

Chrome Extension Javascript

f:id:takawo:20171003075339g:plain

書籍「Creating Google Chrome Extensions」を買ってChrome拡張の開発をやってみることにした。最初のChrome拡張作成をやった。カレンダーと時刻機能。

書籍は統合された情報が掲載されていて余計なこと書かれてないので、それだけ取り組みたいときは効率が良い。

https://www.amazon.co.jp/dp/B01HUOVDT0

気づき

JSONはコメントは書けないのでmanifest.jsonにコメントNG
配列の最後のカンマもNG
基本検証からインスペクタを使いながらデバッグする

コード

manifest.json

{
  "manifest_version" : 2,
  "name" : "ShowTime",
  "description" : "my first extension to show the current time and date",
  "version" : "0.1",
  "browser_action" : {
    "default_title" : "ShowTime",
    "default_icon" : "icon.png",
    "default_popup" : "pop_up.html"
  },
  "icons" : {
    "16" : "icon16.png",
    "48" : "icon48.png",
    "128" : "icon128.png"
  }
}

pop_up_script.js

/* 変数と関数  ここから */
// 使用する文字列を変数として準備
var timeId = "time";
var dateId = "date";
var days = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
var months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
var consoleGreeting = "Hello World! - from pop_up_script.js";

// 実行する関数setTimeAndDate
function setTimeAndDate(timeElement,dateElement){
  // 時刻を取得するためにdateオブジェクトを取得
  var date = new Date();
  // 時
  var hours = date.getHours();
  if(hours < 10){
    hours = '0' + hours;
  }else{
    hours = '' + hours;
  }
  // 分
  var minutes = date.getMinutes();
  if(minutes < 10){
    minutes = '0' + minutes;
  }else{
    minutes = '' + minutes;
  }
  // 秒
  var seconds = date.getSeconds();
  if(seconds < 10){
    seconds = '0' + seconds;
  }else{
    seconds = '' + seconds;
  }
  // 日
  var day = date.getDate();
  if(day < 10){
    day = '0' + day;
  }else{
    day = '' + day;
  }

  // 取得した日付、時刻を文字列に
  var t = hours + ":" + minutes + ":" + seconds;
  var d = date.getFullYear() + "/" + months[date.getMonth()] + "/" + day + days[date.getDay()];

  // 引数の要素のinnerHTMLにセット
  timeElement.innerHTML = t;
  dateElement.innerHTML = d;
}
/* 変数と関数  ここまで */

/* 呼び出しと実行  ここから */

// コンソールにメッセージを出力（ただの接続確認）
console.log(consoleGreeting);

//イベントリスナーを設定 DOMがロードされたときに実行される
document.addEventListener("DOMContentLoaded",function(dcle){
  //pop_up.htmlに記述する予定のHTML要素をIDで取得
  var timeElement = document.getElementById(timeId);
  var dateElement = document.getElementById(dateId);

  //取得した要素を前述のsetTimeAndDate関数に渡す
  setTimeAndDate(timeElement,dateElement);
});
/* 呼び出しと実行  ここまで */

pop_up.html

<!DOCTYPE html>
<html>
  <head>
    <meta ="utf-8">
    <title>ShowTime</title>
    <!--　インラインのJavaScript実行は許可されてない -->
    <!--　外部のJavaScriptファイルの読み込みはOK -->
    <script src="pop_up_script.js"></script>
    <!-- CSS -->
    <style>
      body{
        padding: 0px;
        margin: 0px;
        width: 149px;
        height: 42px;
      }
      h1,h2{
        display: table-row;
        vertical-align: middle;
        text-align: center;
      }
      h2{
        background-color: #aaa;
      }
      .unselectable{
        -webkit-user-select: none;
        cursor: default;
      }
    </style>
  </head>
  <body>
    <div class="unselectable">
        <h1 class="empty"></h1>
        <h2 id="time"></h2>
        <h2 id="date"></h2>
    </div>
  </body>
</html>

読み飛ばしたデバッグのコツみたいな部分、時間みつけて目を通しておく。