🗺 クリップボードの座標をワンクリックでGoogleマップに表示するChrome拡張を作ってみた

はじめに

この記事では、「メールやチャットで送られてくる緯度経度（例：34.720338,137.731613）を、ワンクリックでGoogleマップで開ける Chrome拡張機能」を自作した内容をご紹介します。

この記事はこんな方におすすめ

地図を使った業務や趣味がある方
毎回Googleマップで座標を手打ちしていて手間を感じている方
簡単なChrome拡張機能を作ってみたい方
自作ツールで作業効率を上げたい方

はじめに
この記事はこんな方におすすめ

💡 拡張機能の使い方（動作概要）
🔧 開発手順：ファイル構成とコード解説
🧪 拡張機能の読み込み方法（手動）
🚀 拡張のアイデア（今後の拡張性）
📥 ソースコード
✍️ まとめ

💡 拡張機能の使い方（動作概要）

メールや文章などから「緯度・経度」のペア（例：34.720338,137.731613）をコピーします
Chromeのツールバーに追加された拡張アイコンをクリック
Googleマップが新しいタブで開き、コピーした座標の位置が表示されます

非常にシンプルですが、日常業務での手間を一気に減らせるツールです。

🔧 開発手順：ファイル構成とコード解説

この拡張機能は、たった3つのファイルで構成されています。

pgsqlコピーする編集するclipboard_to_gmaps/
├── manifest.json
├── popup.html
└── popup.js

それぞれのファイルの内容を順に見ていきましょう。

📄 manifest.json

Chrome拡張機能の「設定ファイル」です。バージョン3に対応しており、ポップアップUIとして popup.html を指定しています。

jsonコピーする編集する{
  "manifest_version": 3,
  "name": "Clipboard to Google Maps",
  "version": "1.0",
  "description": "クリップボードの繋がれた座標をGoogle Mapsで開くChrome拡張",
  "action": {
    "default_popup": "popup.html"
  },
  "permissions": ["clipboardRead", "tabs"]
}

🧾 popup.html

拡張機能の簡易UIです。ボタン1つだけのミニマル構成です。

htmlコピーする編集する<!DOCTYPE html>
<html lang="ja">
<head><meta charset="UTF-8"><title>地図を開く</title></head>
<body>
  <h3>クリップ座標&rarr;Google Maps</h3>
  <button id="btn">開く</button>
  <script src="popup.js"></script>
</body>
</html>

🧠 popup.js

このスクリプトが拡張機能の“頭脳”です。以下の処理を行います：

クリップボードからテキストを取得
緯度・経度っぽい数値ペアを正規表現で抽出
Google Maps のURLを生成
新しいタブで地図を開く

javascriptコピーする編集するdocument.getElementById("btn").addEventListener("click", () => {
  navigator.clipboard.readText().then(text => {
    const match = text.match(/([+-]?\d+\.\d+)[,\s]+([+-]?\d+\.\d+)/);
    if (match) {
      const lat = match[1];
      const lon = match[2];
      const url = `https://www.google.com/maps?q=${lat},${lon}`;
      chrome.tabs.create({ url: url });
    } else {
      alert("緯度経度が見つかりません");
    }
  });
});