概要

Chrome 拡張機能の簡単なサンプルを作ってみたいと思います。

developer.chrome.com

Chrome 拡張機能でできること

browserAction/pageAction - ツールバーにアイコンが追加されて画面表示が可能です。
Content Scripts - 実際のWEBページを操作するスクリプトです。
Background Scripts - バックグラウンドで常駐するスクリプトです。主にchrome APを使用した処理を行います。
各機能間はメッセージでやりとりされます。

Chrome 拡張機能の構成要素

manifest.json - 拡張機能の定義ファイル
html/css - pageAction/browserAction で表示するデザインを構成
js - 各種処理を記載
基本的にはWEBの技術だけで作成できます。

今回作るもの

browserAction で画面表示
表示した画面で日付を入力するミリ秒を表示する

使用するライブラリ

moment.js

サンプルソース

popup.js

const txtDate = document.getElementById("txtDate");

txtDate.addEventListener('keyup', function(){
  const result = document.getElementById("txtDateResult");
  const date = moment(txtDate.value).toDate();
  result.value = date.getTime().toString();
});

popup.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
</head>
<body style="margin: 0px;">
  <div style="padding: 10px; background: lemonchiffon;">
    <div>
      <h3 style="margin: 0px;">Date Convert</h3>
    </div>
    <div>
      <input type="text" id="txtDate" placeholder="yyyy/MM/dd HH:mm:ss">
    </div>
    <div>
      <input type="text" id="txtDateResult" readonly>
    </div>
  </div>
  <script src="/moment.min.js"></script>
  <script src="/popup.js"></script>
</html>

manifest.json

{
  "manifest_version": 2,
  "name": "Date Convert",
  "version": "1.0",
  "description": "Date Convert",
  "browser_action": {
    "default_popup": "popup.html",
  }
}