こんにちは！今日は初めてChrome拡張機能を作ってみたので、その記録を残しておきます。

きっかけ

普段、ブログを書いたりメモを取ったりするときに、「このページのタイトルとURL、いちいちコピペするの面倒だな…」って思うことありませんか？

タイトルバーをドラッグして選択してコピーして、次にアドレスバーをクリックして全選択してコピーして…って、地味に手間なんですよね。

それで「ワンクリックでタイトルとURLを両方コピーできたら便利じゃん！」と思って、Chrome拡張機能を作ってみることにしました。

実は拡張機能って意外と簡単に作れる

調べてみたら、Chrome拡張機能って思ったより簡単に作れるんです。基本的なHTMLとJavaScriptが書ければ大丈夫。

今回作った拡張機能は、たった3つのファイルだけで完成しました。

必要なもの

  • テキストエディタ（メモ帳でもVS Codeでも何でもOK）
  • Google Chrome
  • 10分くらいの時間

以上です。本当にこれだけ。

作り方

ステップ1：フォルダを作る

まず、適当な場所に新しいフォルダを作ります。名前は何でもいいですが、私は「page-copy-extension」にしました。

ステップ2：必要なファイルを作る

このフォルダの中に、3つのファイルを作ります。

1. manifest.json

これは拡張機能の設定ファイルです。「この拡張機能はこういうものですよ」っていう情報を書きます。

{
  "manifest_version": 3,
  "name": "ページ情報コピー",
  "version": "1.0",
  "description": "現在のページのタイトルとURLをコピーします",
  "action": {
    "default_popup": "popup.html",
    "default_title": "ページ情報をコピー"
  },
  "permissions": [
    "activeTab",
    "clipboardWrite"
  ]
}

ポイントはpermissionsのところ。「現在開いているタブの情報を読み取る権限」と「クリップボードに書き込む権限」を要求しています。

2. popup.html

拡張機能のボタンをクリックしたときに表示される画面です。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <style>
    body {
      width: 300px;
      padding: 15px;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }
    h3 {
      margin: 0 0 10px 0;
      color: #333;
    }
    .info {
      background: #f5f5f5;
      padding: 10px;
      border-radius: 5px;
      margin-bottom: 10px;
      word-wrap: break-word;
    }
    .label {
      font-weight: bold;
      color: #666;
      font-size: 12px;
    }
    .value {
      margin-top: 5px;
      font-size: 14px;
      color: #333;
    }
    button {
      width: 100%;
      padding: 10px;
      background: #4CAF50;
      color: white;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      font-size: 14px;
      margin-top: 10px;
    }
    button:hover {
      background: #45a049;
    }
    button:active {
      background: #3d8b40;
    }
    .success {
      color: #4CAF50;
      text-align: center;
      margin-top: 10px;
      font-size: 12px;
      display: none;
    }
  </style>
</head>
<body>
  <h3>ページ情報</h3>
  
  <div class="info">
    <div class="label">タイトル:</div>
    <div class="value" id="title">読み込み中...</div>
  </div>
  
  <div class="info">
    <div class="label">URL:</div>
    <div class="value" id="url">読み込み中...</div>
  </div>
  
  <button id="copyBtn">コピー</button>
  <div class="success" id="message">コピーしました！</div>
  
  <script src="popup.js"></script>
</body>
</html>

普通のHTMLファイルですね。スタイルも全部インラインで書いちゃいました。

3. popup.js

実際の処理を書くJavaScriptファイルです。

// ページ読み込み時に実行
document.addEventListener('DOMContentLoaded', async () => {
  // 現在のタブ情報を取得
  const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
  
  // タイトルとURLを表示
  document.getElementById('title').textContent = tab.title;
  document.getElementById('url').textContent = tab.url;
  
  // コピーボタンのクリックイベント
  document.getElementById('copyBtn').addEventListener('click', () => {
    const text = `${tab.title}\n${tab.url}`;
    
    // クリップボードにコピー
    navigator.clipboard.writeText(text).then(() => {
      // 成功メッセージを表示
      const message = document.getElementById('message');
      message.style.display = 'block';
      
      // 1.5秒後にメッセージを非表示
      setTimeout(() => {
        message.style.display = 'none';
      }, 1500);
    });
  });
});

chrome.tabs.query()でタブの情報を取得して、navigator.clipboard.writeText()でコピーしているだけです。シンプル！

ステップ3：Chromeに読み込ませる

さて、ファイルができたら実際にChromeに読み込ませてみましょう。

  1. Chromeのアドレスバーにchrome://extensions/と入力してEnter
  2. 右上の「デベロッパーモード」をONにする（スイッチをクリック）
  3. 左上に「パッケージ化されていない拡張機能を読み込む」というボタンが出るのでクリック
  4. さっき作ったフォルダを選択

これだけです！

使ってみる

拡張機能が読み込まれたら、ブラウザの右上（アドレスバーの右側）に拡張機能のボタンが表示されます。

どこか適当なWebページを開いて、このボタンをクリックしてみてください。

小さなポップアップが開いて、現在のページのタイトルとURLが表示されるはずです。「コピー」ボタンを押すと、両方まとめてクリップボードにコピーされます。

試しにメモ帳やメールの本文などに貼り付けてみてください。タイトルとURLが2行で貼り付けられるはずです。

つまずいたポイント

最初、manifest.jsonでmanifest_versionを2にしていて動かなかったんですよね。調べたら、今は3が推奨らしいです。古い記事を参考にすると、こういうことがあるので注意です。

あと、最初アイコンも用意しようとしたんですけど、別になくても動くし、とりあえず機能優先ということで今回は省略しました。デフォルトのアイコンでも十分です。

まとめ

思っていたより簡単にChrome拡張機能が作れました。基本的なWeb技術（HTML、CSS、JavaScript）が分かっていれば、誰でも作れると思います。

今回作った拡張機能は本当にシンプルですが、実際に使ってみると地味に便利です。ブログを書くときとか、調べ物をまとめるときとか、結構使う機会があります。

これをベースにして、もっと色々な機能を追加していくこともできます。例えば、

  • Markdown形式でコピーする
  • 選択したテキストも一緒にコピーする
  • 複数のページをまとめてコピーする

とか。

みなさんも、「こんな機能があったらいいのに」って思うものがあったら、ぜひ作ってみてください。意外と簡単ですよ！

それでは、また次の記事でお会いしましょう。

公開情報
  • 公開日: 2026.01.25
  • 最終更新日: 2026.01.25

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です