※この記事はUdon Advent Calendar 2024 - Adventarの12日目の記事です。

はじめに

こんにちは。Udonです。

今回はWebブラウザの拡張機能を作ってみた話をしようと思います。

作ったもの

Gitudon/URL_and_Titleというリポジトリに、作った拡張機能のソースコードがあります。

ブラウザで開いたページのタイトルとURLを取得し、マークダウン形式でクリップボードにコピーする拡張機能を作りました。

こんな感じで、右クリックして開いたコンテキストメニューから「Copy MarkDown Link and Title」をクリックすると、クリップボードに以下のような文字列がコピーされます。

[Gitudon/URL_and_Title](https://github.com/Gitudon/URL_and_Title)

使い方

上記のリポジトリのREADMEに書いてある通りですが、手順としては以下のようになっています。

Chrome

このリポジトリをクローンするか、ZIPファイルでダウンロードして解凍します。
Chromeの拡張機能のページを開きます。
右上のデベロッパーモードを有効にします。
「パッケージ化されていない拡張機能を読み込む」をクリックして、このリポジトリのディレクトリを選択します。
拡張機能が追加されます。

Edge

このリポジトリをクローンするか、ZIPファイルでダウンロードして解凍します。
Edgeの拡張機能のページを開きます。
「開発者向け設定」の「拡張機能の開発者向け機能を有効にする(これによりデバイスが危険にさらされる可能性があります)」にチェックをつけEdgeを再起動します。
右上の設定から「拡張機能」をクリックします。
「展開して読み込み」をクリックし、このリポジトリのディレクトリを選択します。
拡張機能が追加されます

仕組み

manifest.jsonとbackground.jsだけで作られており、非常にシンプルな構成になっています。

manifest.jsonには拡張機能の設定が書かれています。

{
    "name": "MarkDown-URL_and_Title",
    "author": "Udon",
    "version": "1.0",
    "manifest_version": 2,
    "description": "URLとタイトルをMarkDownのリンク形式で取得します。",
    "background": {
        "scripts": ["background.js"],
        "persistent": true
    },
    "permissions": [
        "contextMenus"
    ]
}

名前、作者、バージョン、説明、background.jsの指定、contextMenusの許可が書かれています。

background.jsには拡張機能の動作が書かれています。

//Edge の名前空間(browser) がなけれぱ chrome の名前空間を使用する
var browser = browser||chrome;

//コンテキストメニューに拡張のメニューを追加
browser.contextMenus.create({
    id: 'MarkDownLink',
    title: 'Copy MarkDown Link and Title',
        onclick: (info, tab)=>{ //クリックされた際のアクション
            var url = tab.url;
            var title = tab.title;
            var markdown = '[' + title + '](' + url + ')';
            toClipBoard(markdown);
            function toClipBoard(text){
                var ta = document.createElement("textarea");
                ta.value = text;
                ta.style.position = "fixed";
                ta.style.left = "0";
                ta.style.top = "0";
                document.body.appendChild(ta);
                ta.select();
                document.execCommand("copy");
                ta.parentElement.removeChild(ta);
            }
    }
});

名前空間を指定した後、コンテキストメニューに拡張メニューを追加していきます。クリックされた際にどのようなアクションをするかなどを規定するわけです。

今回は、クリックされた際にタブのURLとタイトルを取得し、MarkDown形式でクリップボードにコピーするようにしています。コピーするための関数はtoClipBoardとして定義しています。

おわりに

この拡張機能を作ったことで、MarkDownで記事などを書くときに参考文献を載せることが非常に簡単になりました。

意外と簡単に拡張機能が作れることがわかったので、今後も何か思いついたら作っていきたいなと思いました。

ではまた、明日の記事でお会いしましょう。

参考文献

ブラウザの拡張機能を自作してみた #JavaScript - Qiita