スマホのURLをPCのChromeへワンタップ送信できるChrome拡張『QR Send』を作りました

スマホで見てるURLを、PCでそのまま開きたい

通勤中の電車でスマホを眺めていて見つけた記事、家に帰ってから続きをPCの大きい画面で読みたくなること、ありませんか。あるいはスマホで見つけた商品を、PCの画面でじっくり見比べたいとか。

そういうとき、地味に面倒なんですよね。自分にメールを送ったり、チャットの自分用チャンネルに貼ったり。開く→コピーする→送る→PC側で受信する→クリックする、という手数がいちいち発生します。

「このURL、ワンタップでPCのChromeに送れたら早いのに」と思って作ったChrome拡張が「QR Send」です。今回はその機能や細かいところを紹介します。

QR Sendでできること

仕組みはとてもシンプルで、最初に1回だけQRコードをスキャンすればセットアップは完了です。

1. PCにChrome拡張「QR Send」を追加する
2. ツールバーのアイコンをクリックして表示されるQRコードを、スマホのカメラで1回スキャンする
3. 開いたページをスマホのホーム画面に追加しておけば準備完了。以降はスマホでURLを貼り付けて送信ボタンをタップするだけで、PCのChromeにそのページが自動的に開く

QRコードを読み込む作業は最初の1回だけ。2回目以降はスマホ側のアプリ(のように見えるホーム画面アイコン)からワンタップで送信できます。

QR Sendの良いところ

アカウント登録・ログイン不要

Googleアカウントもメールアドレスも電話番号も、何も登録しません。QRコードをスキャンした瞬間にペアリングが完了します。

完全無料

月額料金も送信回数の上限もありません。

ペアリングはQRコードのスキャン1回だけ

一度スキャンしてホーム画面に追加してしまえば、その後は意識することもありません。

スマホ側はアプリ不要

専用アプリのインストールは不要です。QRの先はただのWebページで、それをホーム画面に追加することで擬似的なアプリとして使えます。

送ったURLは自動でPCのChromeに開く

スマホで送信ボタンを押すと、PC側のChromeで勝手にそのページが新しいタブとして開きます。PC側で何か操作する必要はありません。

送信履歴はサーバーに残らない・ローカルで管理

中継サーバー(ntfy.sh)に届いたメッセージは一定時間で自動的に消えていく仕組みです。PC側の拡張機能にはローカルに履歴が保存されますが(最大100件)、これはあくまで自分のPCの中だけの話で、1件ずつ削除したりまとめて消去したりできます。

ランダムなIDだけで個人情報ゼロ

ペアリングに使っている「チャンネルID」は、crypto.getRandomValuesで生成したランダムな値です。名前もメールアドレスも紐づいていません。

軽量・シンプル

拡張機能が要求する権限はalarms・storage・tabsの3つと、ntfy.shへの通信のみ。よけいな権限は要求しません。

細かい機能

設定ページ(オプション)では、以下のようなことができます。

• チャンネルIDの確認・コピー: 自分のPCに割り当てられたランダムなIDをいつでも確認・コピーできます
• チャンネルIDのリセット: 何らかの理由でQRコードを無効化して再ペアリングしたいときは、ボタン1つでIDを再生成できます。リセットすると古いQRコードは使えなくなるので、そのときはポップアップに表示される新しいQRコードをもう一度スキャンし直します
• 送信先ページのURL変更: 通常は変更不要ですが、送信ページのURLをカスタマイズすることも可能です

ポップアップ側は「履歴」タブと「QR」タブの2つに分かれています。履歴タブには過去に送られてきたURLがタイトル・日時つきで並び、1件ずつ削除したりまとめて消去したりできます。

受信の裏側は30秒おきのポーリングです。スマホから送信してから、PCのChromeが開くまでに数秒〜最大30秒ほどのラグがあります。ネットワークの状態次第で前後しますが、体感としては十分ワンタップ感覚で使えています。

ちなみに拡張機能はPCごとに別々のチャンネルIDを持ちます。会社と自宅の両方にインストールしておけば、スマホ側でホーム画面に追加した送り先を使い分けることで、複数のPCにURLを送り分けることもできます。

ちょっとだけ技術の話

中継には無料のpub/subサービスntfy.shを使っています。PCの拡張機能側で生成したランダムなチャンネルIDを、そのままntfy.shのトピック名として使っているだけなので、サーバーを自前で立てる必要も、アカウントを作る必要もありません。

QRコードの中身は、送信先ページのURLにこのチャンネルIDをクエリパラメータとして付けただけのものです。

const fullUrl = `${baseUrl}?ch=${channelId}`;

PC側はChrome拡張のservice workerが常時起動し続けているわけではないので、chrome.alarmsを使って30秒おきに起こし、ntfy.shに新着メッセージがないか確認しています。新しいURLが届いていたら、そのままPC側で新しいタブとして開く、というシンプルな作りです。

おわりに

QRコードでペアリングして、あとはスマホからワンタップで送るだけ。それだけの小さなChrome拡張ですが、「スマホで見てるURLをPCでサッと開きたい」という場面では地味に便利だと思います。

もしよかったら試してみてください。

• Chrome Web Store: https://chromewebstore.google.com/detail/nmbdkmipjmgaieegnghbndibpmdceenh
• 詳細・使い方: https://qrsend.app