同期
Google Drive に接続すると、サインインしたどのパソコンにもスタイルが同期されます。同期は 30 分ごとと、編集した直後に行われます。
どんなサイトも、に。
ページ上の要素を指して変更するか、望む見た目を言葉で伝えるだけ。CSS は Stylebot が書き、サイトを開くたびにスタイルを読み込みます。
Chrome に追加（無料）Firefox と Edge にも対応
harbourpost.example/travel/night-ferry
harbourpost.example
リーダーモード
このページをカスタマイズAlt+Shift+M
The Harbour Postニュース旅ログイン
旅 · 特集
夜行フェリー、静かな復活
3 つの運航会社が、旅行者はスピードよりも客室と海の眺め、そして空港のない旅を選ぶと見込んでいます。
MLMarta Linde · 9月24日 · 6分で読めます
最後の夜行便が廃止されてから 20 年。3 つの運航会社が、再び海に客室を浮かべようとしています。うたい文句はシンプルです。夕食後に乗船し、眠っているうちに海を渡り、目覚めれば別の国。
「時間を節約したくて予約する人はいません。少しだけ時間を手放したくて予約するんです」
— Ines Varga（航路プランナー）
最初に復活した航路は、1 週間で夏の予約が埋まりました。乗客の多くは 40 歳未満で、夜行の乗り物は初めてという人も少なくありません。運航会社によると、まず客室が埋まり、次にリクライニングシート、最後にデッキだといいます。
harbourpost.example/デフォルト
ベーシックコードプリセットチャット
1 / 4
使い方
- 1アイコンをクリックするか、Alt+Shift+M を押します。
- 2クリックで選択すると、現在のスタイルが表示されます。
- 3ベーシックの設定を使うか、CSS を書きます。
- 4同じサイトに別々のデザインを保存できます。
コーディングエージェントと連携
Claude Code、Codex、Cursor など、コマンドを実行できるエージェントなら、ターミナルから Stylebot を使えます。
$ npm install -g @stylebot/cli
CLI を設定 →スタイルのお手本
コピーして好みに合わせて調整するか、ゼロから作ってみましょう。
wikipedia.org のコードタブに貼り付けてください。
github.com のコードタブに貼り付けてください。
nytimes.com のコードタブに貼り付けてください。
news.ycombinator.com のコードタブに貼り付けてください。
mail.google.com のコードタブに貼り付けてください。
ほかにもこんな機能があります。
バージョン履歴
スタイルへの変更はすべて、新しい順に保存されます。項目を開くと変更内容を確認でき、ワンクリックで元に戻せます。
プリセット
リーダーモードとグレースケールはどのサイトでも使え、自分で加えた変更と組み合わせられます。
チャット
コーディングエージェントがなくても大丈夫。チャットタブで変更内容を伝えると、Stylebot が CSS を書きます。Claude、OpenAI、Gemini のキーは自分のものを使い、キーはブラウザ内に保存されます。
ユーザーの声
“Thank you for creating this — this tool lets me make inaccessible sites more accessible for me”
“This extension is awesome and I have used it for many years. Good to see it’s getting updates again.”
“Stylebot is one of the first extensions I install on any new build. It massively improves my browsing experience. Thanks.”
Stylebot をインストール
2011 年から無料のオープンソースです。アカウント登録もトラッキングもありません。スタイルはブラウザに保存され、コードは GitHub で公開しています。
コーディングエージェントを使うなら、CLI を追加：
$ npm install -g @stylebot/cli