chromeの拡張機能で遊ぶ

概要

この前、chromeの拡張機能はJavaScriptとhtmlの知識が少しあれば作れることを知ったので、遊びで作ってみることにしました。
ぜひ、使ってみてください。

【作った拡張機能(Go to Utopia)】
https://chrome.google.com/webstore/detail/go-to-utopia/dakkdjbokdpjgihfcafddmeacoagidib?hl=ja

【GitHubのURL】
https://github.com/waonngionn/utopia

作ったもの

デスクワークに疲れた時、レポートに疲れた時、そんな時に癒やし欲しいですよね。。。
そこで、ショートカットキーを押すだけでユートピアに飛べたらもう神ということでこの拡張機能を作りました。

拡張機能のオプションのページからショートカットキーにURLを設定します。
そしてネットサーフィン中にそのショートカットキーを押すと設定したURLに飛べるという仕組みです。

デフォルトで自分の好きな人のインスタを設定させていただきました。勝手に使用してすみません。
デフォルトを変えることもできますし、そのショートカットキー以外も設定できるので許してね

ソースコード

詳しく見たい方はGitHubにとんでください。
https://github.com/waonngionn/utopia
主要なjsだけ載せておきます。（これだけではよくわかんないかもだけど）

script.js

$(function () {
    let list = {};
    chrome.storage.local.get(function (items) {
        list = items;
    });

    $('html').on('keydown', function (event) {
        const keycode = event.keyCode;
        const ctrl = event.ctrlKey;
        const shift = event.shiftKey;
        if (ctrl && shift) {
            if (list[keycode]) {
                location.href = list[keycode];
            }
        }
    });
});

最後に

次はjQueryじゃなくて、学習がてらVue.jsで次は作りたいなと思いました。

今までに作った拡張機能

【Go to Utopia】
https://chrome.google.com/webstore/detail/go-to-utopia/dakkdjbokdpjgihfcafddmeacoagidib?hl=ja
設定したURLにショートカットキーで遷移

【change-background-color】
https://chrome.google.com/webstore/detail/change-background-color/jcodcbmhkoiolfcdhdjndolalehoonoo?hl=ja
キーボードを押すごとに背景色が変わる