Chrome-Extension

Teemo という Chrome 拡張を開発したのですが、その際 1 つのウインドウを使い回す構成にしたいなと考えていました。 例えば何も考えずに chrome.windows.create を Chrome 拡張を開くたびに呼び出すと、呼び出すたびにウインドウが新規作成されてしまいます。そうすると、都度画面に不要なウインドウが出てきて邪魔になるだけでなく、手動で不要なウインドウを消す作業をユーザーに強いることとなってしまいます。。🙃 上記のような挙動が望まれるケースもあると思いますが、Teemo ではウインドウ間を頻繁に行き来するため、ショートカットを利用して拡張機能を呼び出すことを見込んでいました。そのため、ショートカットを利用して拡張機能を呼び出すたびにウインドウが新規作成され続ける挙動は望んでいませんでした。 1 つのウインドウを使い回すためには、chrome.windows.create 時に作成される window の id を保持しておきます。その後、Chrome 拡張が呼び出されるたびに window が既に存在するかどうかを保持していた id を元にチェックします。既に window が存在していた場合はそれを使いまわします。存在していなかった場合は、chrome.windows.create で window を新規作成します。 // window の id を保持しておくための変数 let vid = -1; chrome.browserAction.onClicked.addListener(function () { // vid の値を元に Chrome 拡張で開いた window の取得を試みる chrome.windows.get(vid, function (chromeWindow) { // エラーが無く、既に window が存在している場合は、 // そのステータスを { focused: true } にすることで最前面に呼び出す if (!chrome.runtime.lastError && chromeWindow) { chrome.windows.update(vid, { focused: true }); return; } // 上記以外のパターンでは window を新規作成する chrome.windows.create( { url: "index.html", type: "popup", }, function (window) { // 新規作成した window を使い回せるようにするため、 // vid 変数に window の id を保持しておく vid = window.id; } ); }); }); 上記コードで 1 つのウインドウを使い回すことが出来るようになるはずです。✅ ...

はじめに 📝 最近とある事情により Twitter の DM を利用しているのですが、Slack などのように絵文字をショートカット入力できないことにフラストレーションが溜まってきていました。そのため、絵文字をショトカで入力可能にしてくれる Chrome 拡張機能を探したのですが見つけられませんでした。 そこで、無いなら作ろうということで Teemo を開発しました。 ソースコードは GitHub 上で公開しています。 何かご要望等ございましたら PR や Issue 作成頂けますと喜びます。Teemo の実際の挙動については下記の動画で確認できます 🎥 考えていたこと 💭 今回 Teemo の開発を行うに当たり、考えていた点は下記になります。 よくある : 入力からの絵文字ショートカットを導入する Slack や GitHub、JIRA などではおなじみの入力方法 ⌨️ パレットから選択する際は半角英数字で検索できるようにしたい Twitter では日本語で検索しないと絵文字が探せない 🔍 普段英数字で絵文字検索をするので目的の絵文字が見つけづらい 🕵️ 拡張機能を利用することで文章入力の煩わしさが増加することは避けたい コピペや文章クリアの機能等にもショトカ利用できるようにしたい 💨 プロトタイピングしながら友人に進捗をシェアしながら開発は進めていきました。本当は個人で利用する想定で進めていたのですが、割と評判が良かったため Chrome ウェブストアに公開するのを目標に動いていました。そして、Chrome ウェブストアで公開できるクオリティを目指して動いたことで満足のいく拡張機能が作れました。 ...