Chrome拡張機能を作ってみた

tkmi
2024-07-04
2024-07-04

Chrome拡張機能は、ブラウザの機能を拡張したりカスタマイズしたりするための便利なツールです。
仕事を効率化するためのものから、ちょっとしたゲーム、天気などの情報を確認できるものもあります。
本記事では、Chrome拡張機能の作成手順について解説していきます。
今回は「実行したページのURLを表示する」拡張機能を作っていきたいと思います。

1.準備

実行されたら、ポップアップでURLを表示するようにしたいと思います。
作業用ディレクトリ「currentURL」を作成します。
必要なファイルは以下になります。

  • index.html
    ポップアップする見た目になります。
  • common.css
    見た目を整えるあれです。
  • main.js
    URLを取得してHTMLにセットする動作の部分になります。
  • manifest.json
    拡張機能の設定や権限を定義するファイルになります。

最終的なディレクトリ構成

2.見た目の作成

index.html

ポップアップで表示する中身を作成します。
URLとテキストだけ表示するシンプルなものにします。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Current URL</title>
        <script src="/js/main.js"></script>
        <link rel="stylesheet" href="/css/common.css" />
    </head>
    <body>
        <div id="result">
            <div id="current_url"></div>
            <div>現在のページURLです！</div>
        </div>
    </body>
</html>

common.css

cssで見た目を（多少）整えます。

@charset "utf-8";

body {
    margin: 25px
    font-size: 14px;
    line-height: 1.6;
    color: #242424;
    background-color: #fff;
    font-family: 'Noto Sans JP', sans-serif;
}

html {
    min-width: 500px;
    min-height: 100px;
}

#result {
    top: 20px;
    left: 20px;
    overflow-wrap: break-word;
}

#result div{
    margin: 10px;
}

3.動作の作成

main.js

Chromeの拡張機能として、実行されたらポップアップが開き、現在のURLが表示されるようにします。

document.addEventListener('DOMContentLoaded', function() {
    var currentUrlDiv = document.getElementById('current_url');

    chrome.tabs.query({ active: true, currentWindow: true }, function(tabs) {
        var currentUrl = tabs[0].url;
        currentUrlDiv.textContent = 'Current URL: ' + currentUrl;
    });

});

4.manifest.jsonの作成

manifest.json

拡張機能を作成するのに必要なファイルです。

{
  "manifest_version": 3,
  "name": "Current URL",
  "version": "1.0",
  "action": {
      "default_popup": "index.html"
  },
  "permissions": [
    "activeTab","scripting","tabs"
  ]
}

manifest_version

manifest_version マニフェストファイルのバージョンを指定します。2024/05現在はv3なので"3"を指定します。
name 拡張機能の名前を指定します。この名前はChromeウェブストアや拡張機能管理ページで表示されます。
version 拡張機能のバージョンを指定します。
action ユーザーが拡張機能のアイコンをクリックしたときの動作を定義します。
default_popup アドレスバーの右に表示するアイコンをクリックした際に表示されるポップアップの中の html を指定します。
permissions
 拡張機能が必要とする権限を指定します。例えば、特定のウェブページにアクセスするための権限や、ブラウザの機能を利用するための権限を指定します。
activeTab 現在アクティブなタブに対するアクセス許可。
scripting Chrome拡張機能がページ上でスクリプトを実行するためのアクセス権を与えます。
tabs タブの操作をするためのアクセス許可。

5.作成した拡張機能の動作を確認

Chromeの拡張機能の画面を開きます。

拡張機能の画面が開いたら
「デベロッパーモード」をオンにします。

オンにすると、「パッケージ化されていない拡張機能を読み込む」を押します。
作成したディレクトリを選択します。

一覧に表示されたらOKです。

動作確認

登録ができたら、アドレスバーの右側からピン止めして使ってみましょう。
名前の横のピンを押すとアドレスバーに固定されます。

アイコンを押してみます。

ページURLが表示されました！

終わりに

作成も登録もやってみると、とても簡単でした。
ウェブストアにはいろいろ便利なものが公開されていますが、自分好みの機能を作成してみるのもいいのではないでしょうか。

作成した拡張機能は、Chromeのウェブストアで公開することも可能です。
公開するにはデベロッパーアカウントおよび審査が必要になります。
© Future Spirits Co.Ltd.