スプレッドシートでブックマーク管理を実現するChrome拡張機能を作った話

PONOS Advent Calendar 2024の18日目の記事です。
前回は@iixd_pogさんでした。

はじめに

私は普段から情報管理ツールとしてNotionを愛用しており、特に「Save to Notion」を使ってWebページのブックマークを整理しています。この機能が便利だなと感じたため、「同じことを業務で使用しているGoogleスプレッドシートでも実現できないか？」と考えたのが、今回の開発のきっかけでした。

実際の動き

セットアップ手順

1. スプレッドシートの準備

1. Googleドライブで新しいスプレッドシートを作成
2. 1行目に以下のヘッダーを入力:
   • A1: タイトル
   • B1: URL
   • C1: タグ
   • D1: 備考

2. 拡張機能のインストール

1. 以下のリポジトリをクローンまたはダウンロード
   https://github.com/tequila0725/web-memo-database-on-spreadsheet

2. Chrome拡張機能の設定ページ（chrome://extensions/）を開く

3. 「デベロッパーモード」を有効にする

4. 「パッケージ化されていない拡張機能を読み込む」をクリックし、クローンしたディレクトリを選択

3. Google Cloud Platform (GCP) の設定

1. Google Cloud Consoleで新しいプロジェクトを作成:

   • ヘッダーメニューの「コンソール」をクリック
   • 「プロジェクトを選択」→「新しいプロジェクト」
   • プロジェクト名は任意、組織は「組織なし」を選択

2. 必要なAPIと認証情報の設定:

   • APIとサービスから「Google Sheets API」を有効化
   • 認証情報でAPIキーとOAuthクライアントIDを作成

3. OAuth同意画面の設定:

   • User Type: 外部
   • アプリ名: 任意
   • ユーザーサポートメール: 任意
   • デベロッパーの連絡先情報: 任意
   • テストユーザー: 拡張機能を使用するGoogleアカウント

4. OAuthクライアントIDの作成:

   • アプリケーションの種類: Chrome拡張機能
   • 名前: 任意
   • アイテムID: Chrome拡張機能のID

4. 拡張機能の設定

1. .env.sampleをコピーして.envを作成し、以下の情報を設定:

   API_KEY=your_api_key
   SPREADSHEET_ID=your_spreadsheet_id
   SPREADSHEET_TAB_NAME=your_sheet_name
   CLIENT_ID=your_client_id
   

2. manifest.jsonのclient_idフィールドにOAuthクライアントIDを入力

使用方法

1. Chrome拡張機能をインストールすると、ツールバーにアイコンが追加されます
2. 保存したいWebページを開いた状態でアイコンをクリック
3. ポップアップウィンドウで情報を編集:
   • タイトル（自動取得）
   • URL（自動取得）
   • タグ（カンマ区切りで複数入力可能）
   • 備考
4. 「スプレッドシートに保存」ボタンをクリックして保存

まとめ

今回、初めてChrome拡張機能を開発してみました。
感想としては「Chrome上で拡張機能を実行すること自体」は思っていたよりも簡単でした。
しかし、ChromeのAPIを使用する場合は、認証情報を取得しサービスワーカー(background.js)を作成しなければならないなど、込み入った知識が必要になり混乱しました。

まとめると、特に以下の点が印象的でした：

• HTML/JavaScriptの基本的な知識があれば、拡張機能の開発は思ったより敷居が低い
• Google Spreadsheet APIとの連携を通じて、実践的なAPI統合の知識を得られた
• 身近な業務効率化ツールを自作することで､ 実践的な学びになった

---

今回の経験を活かして、今後も業務効率化に役立つツールを開発していきたいと思います。
完全なソースコードはGitHubリポジトリで公開していますので、興味のある方はぜひご覧ください。

次回は@nisei275さんのRustのゲームエンジンBevyでマスタデータを扱ってみるです。

参考