簡単なFirefoxの拡張機能を作ってみた #JavaScript

はじめに

本記事は某室アドベントカレンダーの一部となります。

昨日は英語で記事を書いた方がいらっしゃったので、今日僕は留学生として逆に日本語で書きます！

※母語は日本語ではないため間違えなどの可能性がありますのでご理解お願いします。
※本記事での教員名や科目名などを匿名化しました。

多分投稿時間は少し遅いが、アドベントカレンダーを埋めたいなと思って本記事を書きました。

きっかけ：ある「VPN」サイトでファイルが探しづらいなあと思ってる。

じゃ、あるファイルシェアサイトを使ってフォルダが多くて課題フォルダを探しづらいなあと思って、フォルダのショートカット機能があればいいなと思います。

そのことからFirefoxの拡張機能をそういう機能を作ろうとしました。

Firefoxの拡張機能って、どう作るんだろう？

Firefoxの簡単な拡張機能はJavaScriptの基本知識があれば作れます。

僕が「Firefoxの拡張機能の開発」を検索して、このガイドを読んでた。

まずmanifest.jsonでこういう形で書いていた

{
    "manifest_version": 2,
    "name": "inf-vpn-shortcut",
    "version": "1.0",
    "description": "Add a shortcut to frequently used folders in 「謎のVPNサイト」",
    "icons": {
        "48": "icons/icon.png"
    },
    "content_scripts": [
        {
            "matches": ["*://vpn.xxxxxxxx.xx.xx/dana/fb/smb/*"],
            "js": ["main.js"]
        }
    ]
}

このファイルにより「*://vpn.xxxxxxxx.xx.xx/dana/fb/smb/*」でマッチしているURLでこの拡張機能を使えるようになります。マッチしているサイトで入れば「main.js」が自動的に起動する感じ。URLの初めの部分の「*://」というのはhttpもhttpsもマッチすることです。

続きましてmain.jsを作る

let folders = [
    {
        name: 'Home',
        path: ''
    },
    {
        name: 'Comi\'s Personal HW Folder',
        path: 'report\\COMI CLASSES\\2020 Comi 1\\2020\\Class 2\\'
    },
    {
        name: 'Comisuki\'s HW documents',
        path: 'class\\COMI_CLASSES\\2020\\2020後期\\コミ\\Class 2'
    },
    {
        name: 'DD演習小課題',
        path: 'report\\2020DD演習小課題'
    },
    {
        name: 'DD演習レポート',
        path: 'report\\2020DD演習レポート'
    }
]

let url = new URL(window.location)


document.getElementById('table_useruimenu_8').innerHTML += `<div>`

folders.forEach(x => {
    url.searchParams.set('dir', x.path) 
    document.getElementById('table_useruimenu_8').innerHTML += `<a href="${url}">${x.name}</a><br />` 
})

document.getElementById('table_useruimenu_8').innerHTML += `</div>`

'table_usermenu_8'っていうのは下の画像の上の部分です。コードを実行する前こういう画面が出てます。

コード実行した後、ショートカットが出てきます。以上のmain.jsでのフォルダー名を適切に記述すればリンクが使えるようになります。リンク作成方法としてはサイトのアドレスをそのまま取ってdirパラメタを変わるだけです。

こういう形で基本の基本の機能を作りました！簡単ですが時間が余裕あれば改善するつもりです。

Firefox拡張機能として使いましょう

公式ガイドにより、作った拡張機能を適用する時にまずabout:debugging画面に移動して「This Firefox」を選んで、「Load Temporary Addon...」ボタンをクリックすることです。そして、自分で作っている拡張機能のmanifest.jsonを選んでいたら完成です。

これまでしたら、あのVPNサイトを使う時に自分で指定したショートカットが出てくるはずです。こういうやり方は開発向けの一時的な実行方法ですが、今までは自分で作って自分で使うものなのでアップロード用はなさそうです。

今回は以上のように終わります、時間が余裕あればまたこの拡張を改善しようとします。

ここまで読んだ方は誠にありがとうございました。