😍

ワイが作った Chrome 拡張機能が Chrome Web Store に公開されるまでの話【X / Twitter】

に公開
JavaScript
Twitter
個人開発
Chrome拡張
𝕏
tech

はじめに

X（旧Twitter）を毎日使っていると

  • 広告ツイートが多すぎる
  • 気づいたら1時間以上スクロールしていた
  • ブックマークをまとめてエクスポートしたい

これらをまとめて解決する Chrome 拡張機能 「X / Twitter Enhancer Pro」 を個人開発して Chrome Web Store に公開しました。

👉 Chrome Web Store でインストール

どんな拡張機能？

X（Twitter）のタイムラインを、静かで集中できる空間に変える多機能 Chrome 拡張機能です。無料版だけでも十分使えて、Pro版（$1.99/月）でさらに高度な機能が使えます。

機能一覧

🧹 CLEAN（タイムラインを整理）

機能 説明
広告非表示 広告ツイートを自動的に非表示
フォロー中タブ 起動時にフォロー中タブを表示
UIクリーンモード トレンド・サイドバーを非表示
SNS断食モード いいね・RT数を非表示にする
ミニマルビュー アイコン画像を非表示にして文字のみ
自動更新停止 タイムラインの自動更新を停止
青バッジユーザー非表示 認証バッジ付きユーザーのツイートを非表示
リポスト非表示 タイムラインのリポストを非表示
自動翻訳ブロック 翻訳ボタンを非表示にする
スペース通知バー非表示 画面上部のスペース参加バナーを隠す

🛠 TOOLS（ツール）

機能 説明
画像拡大 クリックで拡大・ホイールでズーム対応
コピー投稿ボタン ツイートをコピーして現在タブで投稿画面を開く
t.co URL展開 リンクにホバーで実際のURLを表示
TL履歴（戻る・進む） ⭐Pro スクロール位置の履歴を移動

✏️ 投稿タブ（テンプレート・ハッシュタグ管理）

よく使うツイートのテンプレートやハッシュタグセット、メンションを事前登録して、ワンクリックで投稿画面に挿入できます。

  • テンプレート：無料版は最大3件、Pro版は10件まで
  • ハッシュタグセット：最大5セット保存
  • メンション：よく使う @ユーザー名を保存

📦 保存タブ（ツイートアーカイブ）

ツイート上の 📌 ボタンをクリックして、気になるツイートをローカルに保存できます。

  • 最大200件まで保存
  • 作者名・テキストで検索
  • テキスト／JSON形式でエクスポート

📊 分析タブ（スクリーンタイム・アナリティクス）

X の利用時間を自動計測して可視化します。

  • STREAK：連続利用日数・最長連続日数・累計利用日数
  • WEEKLY SUMMARY：今週・先週の合計利用時間
  • NGフィルター発動回数：7日間の統計
  • 直近7日 スクリーンタイム・スクロール距離・時間帯別利用時間のグラフ

🔖 保管タブ（ブックマークエクスポート）⭐Pro

X のブックマークを一括エクスポートできます。

  1. ブックマークページ（x.com/i/bookmarks）を開く
  2. 「全件収集（自動スクロール）」をクリックして全件読み込み
  3. TXT / JSON / Markdown 形式でエクスポート

👥 読者タブ（ユーザー管理）

  • USER MUTE：特定ユーザーのツイートを非表示（Xのミュートとは別）
  • USER MEMOS：ユーザーへのメモ書き
  • USER HIGHLIGHT：特定ユーザーのツイートをハイライト表示
  • USER GROUPS：ユーザーをグループ管理
  • FOCUS MODE：特定ユーザーのツイートだけを表示

🔽 除外タブ（NGワード・ハイライトフィルター）

  • NGワードフィルター：無料版は最大5件、Pro版は無制限・正規表現対応
  • ハイライト：キーワードを含むツイートを色付きで強調表示（Pro版は複数色・正規表現対応）

✒️ 外観タブ（スタイルカスタマイズ）

  • フォントサイズ・行間の調整
  • アクセントカラーの変更（5種類）
  • カスタム CSS（Pro版）：X.com ページに直接 CSS を適用

⚙️ 設定タブ


機能 内容
おやすみモード 夜間に X を開くと警告を表示
時間制限 上限を超えるとタイムラインをぼかし表示
ツイートボタン 画像保存・コピー投稿・ツイート保存📌・スクリーンショットボタンの表示切替
AUTO SCROLL 自動スクロール速度の調整

キーボードショートカット

ショートカット 機能
Alt + S 自動スクロール 開始/停止
Alt + M ミュートワード追加
Alt + A 広告非表示 ON/OFF
Alt + D SNS断食 ON/OFF
Alt + F フォーカスモード ON/OFF
Alt + P 拡張機能の一時停止

Pro版について

月額 $1.99（いつでも解約可）でProプランに昇格します。

Pro版限定機能（一部）：

  • 自動スクロール（速度調整可・Alt+S）
  • ツイート保存📌（最大200件・タグ・コメント付き管理）
  • ブックマーク全件エクスポート（JSON/CSV/Markdown）
  • NGワード無制限・正規表現フィルター
  • カスタムCSS・ハイライト複数色
  • ユーザーグループ・フォーカスモード（Alt+F）
  • 画像保存・スクリーンショット
  • 週間サマリー・Streak記録
  • TL履歴（戻る・進む）
  • 分析グラフ（スクリーンタイム・スクロール距離・時間帯別）

決済は Stripe（SSL暗号化）を使用。解約後は次回起動時に自動でPro機能が解除されます。

サイドパネル機能

ヘッダーの「サイドパネル」ボタンをクリックすると、ブラウザ右側に常時表示パネルが開き、X.com を閲覧しながら設定を変更できます（Chrome 114 以降必要）。

対応言語

8言語に対応しています。ポップアップ右上の言語ボタンから切り替え可能。

JA / EN / PT / ES / DE / FR / KO / RU

プライバシー

  • すべての設定はブラウザ内にローカル保存
  • 個人データの収集は一切行いません
  • ライセンス認証時に入力したライセンスキーのみ送信（それ以外の情報は送信しない）

インストール

Chrome Web Store からインストールできます。

👉 X / Twitter Enhancer Pro をインストール

Chrome Web Store 審査の話
公開までに審査で一度却下されました。理由は 「宣言しているが使用していない権限がある」 というもの。具体的には alarms・notifications・tabs の3つです。
実はコードで使っていない権限が manifest.json に残っていたのが原因でした。Chrome Web Store のポリシーは厳しく、「将来使うかもしれない権限」を事前に宣言することは認められていません。 実際に使っている権限だけを最小限で宣言する必要があります。
該当の3権限を削除して再申請したところ、無事に審査通過できました。
拡張機能を公開する方は、提出前に manifest.json の権限を一度見直すことをおすすめします。

技術スタック・工夫した点
技術スタック

フロントエンド：HTML / CSS / Vanilla JavaScript（外部ライブラリなし）
バックエンド：Vercel（サーバーレス関数）
決済：Stripe（サブスクリプション課金）
ライセンス管理：Upstash Redis（ライセンスキーの発行・失効管理）
メール送信：Resend（購入完了メールの自動送信）

工夫した点
① X.com の React 仮想 DOM 対策
X.com は React で構築されており、DOM が動的に書き換わります。通常の document.querySelector だけでは要素が見つからないケースが多いため、MutationObserver を使って DOM の変化を監視し、ツイートが追加されるたびに処理を走らせる設計にしました。デバウンスは 250ms に設定してパフォーマンスを確保しています。
② CSP（コンテンツセキュリティポリシー）対応
Chrome 拡張機能の Manifest V3 では、ポップアップ HTML にインライン JavaScript を書くことが禁止されています。onclick などのイベント属性や <script> タグ内の JS はすべて外部ファイルに分離し、サイドパネル用の window.IS_SIDE_PANEL = true の設定も sidepanel-init.js という専用ファイルに切り出しました。
③ クロス認証防止
複数の拡張機能で同じ API を共用しているため、他の拡張機能のライセンスキーで認証されてしまうリスクがあります。ライセンス検証時に product パラメータで商品 ID を照合することで、キーの使い回しを防いでいます。
④ 8言語対応
日本語・英語・ポルトガル語・スペイン語・ドイツ語・フランス語・韓国語・ロシア語の 8言語に対応しています。フランス語のアポストロフィ（d'abord など）がシングルクォートと衝突してシンタックスエラーになるバグがあり、リリース後に修正しました。多言語対応は思ったより地雷が多いです。

さいごに

「X をもっと快適に使いたい」という個人的な動機で作り始めた拡張機能ですが、機能を増やしていくうちに、かなりの完成度になりました。

無料版だけでも広告非表示・SNS断食モード・NGワードフィルターなど主要機能は使えるので、ぜひ試してみてください。

フィードバック・バグ報告は gifuto474@gmail.com またはコメントまでお気軽にどうぞ！

Discussion