Google Driveのファイルを快適にプレビュー・管理できるChrome拡張機能
Drive Contents Viewerは、Google Driveのファイルをより効率的に閲覧・管理するためのChrome拡張機能です。直感的なインターフェースで、複数のファイルを同時にプレビューし、ドラッグ&ドロップで整理できます。
- Google Driveのファイルを頻繁に閲覧する方
- 複数のドキュメントを同時に確認したい方
- ファイルの整理・管理を効率化したい方
- デザイナーやコンテンツクリエイター
- Google Workspace ファイル: Docs、Sheets、Slides
- 画像ファイル: JPEG、PNG、GIF、WebP
- ドキュメント: PDF
- 動画ファイル: MP4、WebM
- その他: 直接リンクでの表示
- グリッド表示: 1-5列まで調整可能
- 表示方向: 横長/縦長の切り替え
- レスポンシブデザイン: 画面サイズに自動対応
- ドラッグ&ドロップ: ファイルの順序変更
- ワンクリックアクセス: ファイルの直接表示
- URLコピー: クリップボードへの簡単コピー
- 国際化（i18n）対応
- 英語・日本語サポート
🚧 準備中: Chrome Web Storeでの公開準備中です。
-
リポジトリのクローン
git clone https://github.com/overdozer1124/drive-contents-viewer.git cd drive-contents-viewer -
Chrome拡張機能管理画面を開く
- Chromeで
chrome://extensions/にアクセス - 右上の「デベロッパーモード」を有効化
- Chromeで
-
拡張機能を読み込む
- 「パッケージ化されていない拡張機能を読み込む」をクリック
- クローンしたフォルダを選択
-
OAuth設定を完了 （下記の詳細手順参照）
Google Drive APIを使用するため、Google Cloud Platform（GCP）でのOAuth設定が必要です。
- Googleアカウント
- Google Cloud Platformアカウント（無料）
-
Google Cloud Consoleにアクセス
https://console.cloud.google.com/ -
新しいプロジェクトを作成
- 「プロジェクトを選択」→「新しいプロジェクト」
- プロジェクト名:
drive-contents-viewer（任意） - 「作成」をクリック
-
APIライブラリにアクセス
- 左メニュー「APIとサービス」→「ライブラリ」
-
Google Drive APIを検索・有効化
- 検索ボックスに「Google Drive API」と入力
- 「Google Drive API」を選択
- 「有効にする」をクリック
-
OAuth同意画面にアクセス
- 左メニュー「APIとサービス」→「OAuth同意画面」
-
基本情報を入力
- ユーザータイプ: 「外部」を選択
- アプリ名:
Drive Contents Viewer - ユーザーサポートメール: あなたのメールアドレス
- デベロッパーの連絡先情報: あなたのメールアドレス
-
スコープの設定
- 「スコープを追加または削除」をクリック
- 以下のスコープを追加:
../auth/drive.readonly ../auth/drive.metadata.readonly
-
テストユーザーの追加
- 「テストユーザー」タブで自分のメールアドレスを追加
-
認証情報ページにアクセス
- 左メニュー「APIとサービス」→「認証情報」
-
OAuth クライアントIDを作成
- 「認証情報を作成」→「OAuth クライアント ID」
- アプリケーションの種類: 「ウェブアプリケーション」
- 名前:
Drive Contents Viewer Extension
-
拡張機能IDを取得
- Chromeの拡張機能管理画面で、読み込んだ拡張機能のIDをコピー
- 例:
abcdefghijklmnopqrstuvwxyz123456
-
承認済みJavaScript生成元を設定
chrome-extension://[YOUR_EXTENSION_ID][YOUR_EXTENSION_ID]を実際のIDに置き換え
-
クライアントIDをコピー
- 作成されたクライアントIDをコピー
-
manifest.jsonの編集
{ "oauth2": { "client_id": "YOUR_CLIENT_ID_HERE.apps.googleusercontent.com", "scopes": [ "https://www.googleapis.com/auth/drive.readonly", "https://www.googleapis.com/auth/drive.metadata.readonly" ] } } -
拡張機能の再読み込み
- Chrome拡張機能管理画面で「更新」ボタンをクリック
-
動作確認
- 拡張機能アイコンをクリック
- 認証画面が表示されれば設定完了
-
拡張機能の起動
- ツールバーの拡張機能アイコンをクリック
-
Google Driveへの接続
- 初回起動時に認証画面が表示
- Googleアカウントでサインイン
-
ファイルの閲覧
- 自動的にマイドライブのファイルが表示
- ファイルをクリックでプレビュー
- 列数変更: 右上のボタンで1-5列に調整
- 表示方向: 横長/縦長の切り替え
- ドラッグ&ドロップ: ファイルを他の位置に移動
- URLコピー: ファイル名の右クリックでURLをコピー
- フォルダ移動: フォルダをクリックで中身を表示
- 戻る: 上部の「←」ボタンで前のフォルダに戻る
- Manifest Version: 3
- API: Google Drive API v3
- 認証: OAuth 2.0
- UI Framework: Vanilla JavaScript + CSS Grid
- 国際化: Chrome Extension i18n API
drive-contents-viewer/
├── manifest.json # 拡張機能の設定
├── background.js # バックグラウンドスクリプト
├── preview.html # メインUI
├── preview.js # UI制御ロジック
├── content_script.js # コンテンツスクリプト
└── _locales/ # 多言語対応
└── en/
└── messages.json
-
リポジトリのフォーク
git clone https://github.com/your-username/drive-contents-viewer.git
-
開発サーバーの起動
# 特別なサーバーは不要 # Chromeに直接読み込んで開発
-
デバッグ
- Chrome DevToolsでコンソールを確認
background.jsのログを確認
貢献を歓迎します！詳細はCONTRIBUTING.mdをご覧ください。
- フォークしてブランチを作成
- 変更を実装
- テストを実行
- プルリクエストを送信
セキュリティの問題を発見した場合は、SECURITY.mdの手順に従って報告してください。
このプロジェクトはMIT Licenseの下で公開されています。詳細はLICENSEファイルをご覧ください。
- Google Drive API
- Chrome Extension API
- オープンソースコミュニティ
- Issues: GitHub Issues
- Discussions: GitHub Discussions
- Email: プロジェクトページのContactから
⭐ このプロジェクトが役に立ったら、ぜひスターを付けてください！