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

はじめに

最近はコーディングする機会がなかなかないので、気分転換兼ねてブラウザの拡張機能を開発してみました。
理解に重きを置くのではなく、まずは作ってみたという感じです。

対象

• ブラウザの拡張が作りたい人
• とりあえず動かしたい人

参考サイト

ゼロからはじめる Microsoft Edge 用の拡張の作り方
拡張機能の開発

開発

今回はブラウザーのコンテキストメニュー(右クリックメニュー) に項目を追加しました。

Qiitaなどでリンクを貼るときにURLとタイトルをコピーするのが面倒だったので、
文字を選択範囲してメニューを選ぶとMarkDownのリンク形式でクリップボードにコピーするという機能です。

必要なもの

最低限必要なファイルは以下の2つのみ。

• manifest.json
• background.js

manifest.jsonを作成

拡張機能に関する情報を記載したファイル

manifest.json

{
    "name": "MarkDown-URL",
    "author": "(Your name write down here.)",
    "version": "0.1",
    "manifest_version": 2,
    "description": "URLをMarkDownのリンク形式で返します。",
    "background": {
        "scripts": ["background.js"],
        "persistent": true
    },
    "permissions": [
        "contextMenus"
    ]
}

background.jsを作成

メニュークリック時の動作

background.js

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

//コンテキストメニューに拡張のメニューを追加
browser.contextMenus.create({

  id: 'MarkDownLink',

  title: 'MarkDownのリンク形式で取得',

  contexts: ['selection'], //選択しているときのみメニューに表示される


    onclick: (info, tab)=>{ //クリックされた際のアクション

        var url = tab.url;
        var markdown = '[' + info.selectionText + '](' + 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);  
        }
  }
});

同一フォルダに格納

拡張機能のテストインストール

chrome

1. 拡張機能を開く。
   ※URLに「chrome://extensions」と入力

2. 右上のデベロッパーモードをオンにする。

3. パッケージ化されていない拡張機能を読み込む。

4. 上記で作成したフォルダを参照する。
   ※各ファイルがutf-8でないとエラーになる。

edge

1. 開発者向け設定を開く。
   ※URLに「about:flags」と入力

2. 「開発者向け設定」の[拡張機能の開発者向け機能を有効にする(これによりデバイスが危険にさらされる可能性があります)]にチエックをつけ Edge を再起動する。

3. 右上の設定から「拡張機能」をクリックする。

4. 一番下にある「拡張機能の読み込み」をクリックする。

5. 上記で作成したフォルダを参照する。
   ※各ファイルがutf-8でないとエラーになる。

動かしてみる

メニューにもでてきて、コピーにも成功。