【Chrome拡張】同じWebサイトにアクセスしている人と交流できる大規模多人数参加型ブラウジング機能を作った #JavaScript

・2022/12/20：Manifest V3への対応見込みが立たないためサーバ停止中です。WebSocket対応してくれないと厳しい...
・2022/2/16：ver.0.1.0にアップデートしました。古いバージョンの方は再インストールお願いいたします。
・2022/2/16：ver.0.1.0の追加機能を紹介する記事を公開しました。

ver.0.1.0更新情報(2022/02/16)

機能追加
- デフォルト対応のWebサイトにqiita.comを追加しました
- Webサイト毎の接続数を表示するワールド情報ウインドウを追加しました
- ログイン画面に現在の接続数を表示するようになりました
機能修正
- マウスカーソルの更新頻度を最大60FPS(サーバ負荷依存)になるようにしました
- チャットに書き込んだURLにリンクを張るようにしました
- 日本語ネームのみ縦書きになるバグを修正しました
- チャット・ワールド情報ウインドウの位置とサイズを記憶するようにしました
- サーバとの通信プロトコルがhttpからhttpsに変更しました
その他
- MMOBrowserのユースケース(qiit版)の記事を公開しました
- ご意見フォームを設置いたしました

概要

　本機能を導入すると、ブラウザ上に同じWebサイトにアクセスしている人たちのマウスカーソルが表示され、自由にコミュニケーションを取ることができるようになります（下図）。

※本機能は、ブラウザ上のマウスカーソルをMMORPGでいうところのプレイヤー、Webサイトをフィールドのように扱うため、大規模多人数参加型ブラウジング(MMOBrowser)と名付けました。広大なインターネットの世界を皆で探検しましょう！

開発動機

開発者はMMORPG好き（特にメイプルストーリー）で、フィールド上での一期一会の交流が楽しみだった
Webブラウジングして良い個人サイトを見つけたときに、それを見たことある人と交流したかったが、Twitterのハッシュタグ等のコミュニティがなかった
MMORPGのように現在同じサイトを見ている人とコミュニケーションできればいいなと思った

導入方法

デフォルト設定では、https://ja.wikipedia.org/wiki/*とhttps://qiita.com/*のページのみでMMOBrowserが有効になります。

　本機能は、プロトタイプのため、Chrome Web storeを経由せずデベロッパーモードからインストールすることとなります。また、デフォルトでは、Wikipedia,Qiitaで現在開いているページのURLとそのときのマウスカーソルの座標が共有されます。上記データを他のプレイヤーと共有するプライバシー上のデメリットよりも、オープンな交流にメリットがあると考えた方のみ導入を進めてください。

0. 前提環境

Chrome Ver. 94（Manifest V2が動けばバージョンはなんでもよい）

1. MMOBrowserのダウンロード

https://github.com/Hylia221/MMOBrowserにアクセスする

「Code」→「Download ZIP」を選択してMMOBrowser-master.zipをダウンロードする
ダウンロードしたファイルを解凍する

2. Chromeデベロッパーモードの有効化

Chromeの「設定」を開く

左のメニューバーから「拡張機能」を開く
右上のデベロッパーモードを有効化する

3. MMOBrowserのインストール

「パッケージ化されていない拡張機能を読み込む」をクリックする

先ほど解答したファイルの中から、「extension」フォルダを選択する
拡張機能リストに「mmobrowser (version)」が表示されていれば導入完了

MMOBrowserの操作方法

1. MMOBrowserへのログイン

Wikpediaのメインページにアクセスする

ブラウザメニューの拡張機能バーからMMOBアイコンを選択する（下図）
ユーザ名を入力する
カーソルの色を選択する(*1)
「ログイン」を押す
Wikipediaのメインページに戻り、チャット欄が表示されていればログイン成功です。表示されていない場合はページをリロードしてください。
以降、現在閲覧しているWebサイトのURL、カーソルの位置情報、メッセージが、同じWebページを開いている他のプレイヤーに共有されるようになります。

*1：ここで選択する色は、相手から自分のカーソルを見た時の色です。自分から見た自分のカーソルの色は変更されません。

2. 他のプレイヤーと会話する

チャット欄にメッセージを入力し、送信を押してください。

マウスカーソルの右上にフキダシでメッセージが表示されれば送信成功です。同じWebページを開いているプレイヤーにメッセージを送ることができます。

3. チャット欄の表示・非表示

チャット欄を表示するためには、ブラウザメニューの拡張機能バーからMMOBアイコンを選択し、「チャットを表示」をクリックする
チャット欄を非表示するためには、チャット欄の上部の「×」をクリックする

4. ワールド情報の表示・非表示

ワールド情報を表示するためには、ブラウザメニューの拡張機能バーからMMOBアイコンを選択し、「ワールド情報を表示」をクリックする
ワールド情報はドメインごとの現在の接続数と、現在のWebサイトごとの接続数が表示されます(5秒ごとに更新)
ワールド情報を表示するためには、ワールド情報の上部の「×」をクリックする

5. MMOBrowserからのログアウト

ブラウザメニューの拡張機能バーからMMOBアイコンを選択する

「ログアウト」を押す
ログイン画面が表示されていればログアウト成功

以上がMMOBrowserの操作方法になります。MMOBrowserを使って大規模多人数参加型ブラウジングを楽しみましょう！

MMOBrowserのアンインストール

Chrome拡張機能ページの「削除」を選択する

その他の使い方

extensionフォルダ内のmanifest.json, matchesを変更することでwikipedia, Qiita以外のサイトでも動作させることもできます。matchesに"https:///"を追加すると全てのサイトでMMOBrowserが有効になります。

MMOBrowserのログイン中は、現在開いているWebサイトのURL(パラメータ含まない)と、Webサイト上のマウスカーソルの絶対座標が他のプレイヤーに共有されます。見られていることがばれたくないWebサイトや、マウスを使ったパスワード入力のあるWebサイトは有効にしないでください。

今後の予定

Youtube対応（パブリックビューイングっぽくする）
利用規約、プライバシーポリシーの掲載
Manifest v3対応
Chrome Web Storeへの登録
実装面の記事を書く
- 主な動きはBackground ScriptでSocket.io を動作させ、URLとカーソル座標をNodeサーバから送受信する感じ

ご意見フォーム

要望、評価、バグ報告、応援メッセージなどはこちらから何でも自由に送ってください！開発の励みになります！

開発者コメント、備忘録など

大規模多人数参加型ブラウジングの構想は10年近く前から考えていたが、技術とやる気がなく作っていなかった。仕事でJavascriptを触るようになったのと暇ができたので作ることにした。
なんでもオープンな時代の構想だったため、現在のプライバシー重視の風潮に逆行してしまっている。大規模多人数参加型ブラウジングを流行らせたいと考えているが、プライバシー・セキュリティ上の問題が解決する気がしない。アイディアあればコメントお願いします。
Manifest V2の動作が2023年1月に終了するようなので、いつかV3に上げないといけないが、Socket.io + バックグランドスクリプトを使っているので、サービスワーカーに移植できる気がしない。やり方あれば教えてください。
面白いと思った方是非ともご意見フォームにコメントください！開発の励みになります！