Chrome拡張機能「Switch Browser Data」を作ってみた

はじめに

Webアプリ開発では、管理者・一般ユーザーなど複数のアカウントでテストする場面が頻繁にあります。しかも一般ユーザーにも権限レベルが複数ある場合、アカウントの種類はさらに増えます。

以前は切り替えのたびに「ログアウト → 別アカウントでログイン」を繰り返していました。地味に時間がかかるうえ、テンポが崩れてストレスになっていました。

既存ツールを使わなかった理由

「ブラウザのCookieを切り替えるツール」を探したことがある方なら、いくつか選択肢が見つかることはご存知かと思います。ただ、気になったのが信頼性の問題です。

CookieにはログインセッションIDが含まれています。つまり、Cookieを扱うツールに悪意があれば、そのデータを使ってアカウントに侵入することが理論上は可能です。

クローズドソースのツールは中身を確認できません。「このツールは安全か？」という問いに答えられないまま使い続けることに、どうしても抵抗がありました。

作ったもの：Switch Browser Data

そこで、自分で作ることにしました。コードをOSSで公開することで、「中身を見て確認できる」状態にすることが目的の一つでもあります。

Switch Browser Data は、ドメインごとにブラウザデータをスナップショット保存して、ワンクリックで切り替えられるChrome / Edge拡張機能です。

対応しているデータは以下のとおりです。

データ種別	内容
Cookie	ログインセッションなど
localStorage	ブラウザに永続保存されるデータ
sessionStorage	タブを閉じると消えるデータ
IndexedDB	構造化データの保存

すべてのデータはデバイス内にのみ保存され、外部に送信されることはありません。

使い方

1. スナップショットを保存する

ログイン済みの状態でポップアップを開き、スナップショット名を入力して保存します。アカウントごとに「管理者」「一般ユーザーA」のように名前をつけておくと管理しやすいです。

2. ワンクリックで切り替える

ドロップダウンから切り替えたいスナップショットを選択するだけです。ページをリロードすれば、そのアカウントの状態が復元されます。

ドメインごとに管理されるため、別のサービスのデータに影響しません。

ソースコード

コードはGitHubで公開しています。

https://github.com/istb16/switch-browser-data-extension

MITライセンスです。使い方の確認や、不審な挙動がないかの検証にご活用ください。

まとめ

複数アカウントの切り替えを「ログアウト→ログイン」なしにワンクリックで行える
Cookieはログインセッションを含むため、信頼できるツールが必要だと判断して自作した
OSSで公開しているので、コードを見て安全性を確認できる
Chrome / Edge 両対応、データはすべてローカル保存

Introduction

When developing a web app, I often need to test with multiple accounts, such as an administrator and a regular user. And when regular users have several permission levels, the number of account types grows even more.

I used to go through “log out → log in with another account” every time I switched. It quietly ate up time and broke my rhythm, which got stressful.

Why I Didn’t Use an Existing Tool

If you’ve ever looked for “a tool to switch browser cookies,” you know there are a few options out there. What bothered me, though, was trust.

Cookies contain login session IDs. That means if a tool that handles cookies were malicious, it could in theory use that data to break into your accounts.

With closed-source tools, you can’t check what’s inside. I just couldn’t get comfortable using a tool while being unable to answer the question “Is this tool safe?”

What I Built: Switch Browser Data

So I decided to build one myself. One of the goals was to publish the code as open source so that anyone can look inside and check it.

Switch Browser Data is a Chrome / Edge extension that saves snapshots of browser data per domain and lets you switch between them with one click.

It supports the following data:

Data type	What it holds
Cookie	Login sessions and the like
localStorage	Data stored persistently in the browser
sessionStorage	Data that disappears when the tab is closed
IndexedDB	Structured data storage

All data is stored only on your device and is never sent anywhere.

How to Use It

1. Save a Snapshot

While logged in, open the popup, enter a snapshot name, and save. Naming them per account, like “Admin” or “Regular user A,” makes them easy to manage.

2. Switch with One Click

Just pick the snapshot you want from the dropdown. Reload the page, and that account’s state is restored.

Data is managed per domain, so it doesn’t affect other services’ data.

Source Code

The code is public on GitHub.

https://github.com/istb16/switch-browser-data-extension

It’s under the MIT license. Feel free to use it to see how it works or to verify that it doesn’t do anything suspicious.

Summary

Switch between multiple accounts with one click, without “log out → log in”
Cookies include login sessions, so I decided I needed a tool I could trust and built my own
It’s open source, so you can read the code and check that it’s safe
Works on both Chrome and Edge, and all data is stored locally

Chrome拡張機能「Switch Browser Data」を作ってみた I Built a Chrome Extension: Switch Browser Data