Chrome Extension(拡張機能) MV3 × Firebase(RealTime Database)

開発する拡張機能の前提

• MV(manifest version)3
• Firebaseを使用
• 「Node.js」, 「npm」を使用しない
• 開発に使用しているのはHTML, CSS, JavaScriptのみ
• contentもしくはbackgroundからFirebaseを使用したい

本題

まず簡単に拡張機能でFirebaseを使用する手順を以下に示します。

1. 使用したいFirebase アプリケーションのコードを取得
2. インポートしたコードを修正
3. Manifestを修正する

1.使用したいFirebase アプリケーションのコードをインポートする

npm経由でのインストールができないので、必要なアプリケーションのコードだけを取得します。
コードは以下のURLから取得します。
https://www.gstatic.com/firebasejs/VERSION/firebase-SERVICE.js

• VERSION：ライブラリのバージョン
• SERVICEはfirestoreなどのSDK名

URLを開くとコードが表示されるので、全体をコピーし自身の拡張機能内にペーストします。
この手順でapp(必須)とdatabaseのコードをローカルに取得しました。

例）自分はRealTime Databaseを使用したかったので以下のURLからコードを取得しました（１つ目は必須）
また、コードは「firebase」というディレクトリを作成し、その中に保存しました。
URL

• https://www.gstatic.com/firebasejs/9.6.4/firebase-app.js
• https://www.gstatic.com/firebasejs/9.6.4/firebase-database.js

ローカル

    ├── firebase
    │   ├── firebase-app.js
    │   └── firebase-database.js

2. インポートしたコードを修正

注意点として、firebaseのすべてのサービスファイルがfirebase-app.jsに依存しているため、プロジェクト内のfirebase-app.jsの相対パスへのインポートを編集する必要があります。

自分はapp以外の「firebase-〇〇.js」のフォルダ内で「app」のインポート箇所を検索し、ローカルのfirebase-app.jsを参照するように修正しました。

あとは、ライブラリをインストールした場合と同様に操作を行えます。

3. Manifestを修正する

インポートを使用しているため、firebaseを使用するコードはモジュールである必要があり、manifest.jsonファイルに次のように記述します。

"background": {
    "service_worker": "〇〇.js",
    "type": "module"
  }

補足

ローカルに持ってきたライブラリを使用してRealTime Databaseにデータを挿入する処理の例

import * as firebase from "../firebase/firebase-app.js"; //ローカルを参照
import * as database from "../firebase/firebase-database.js"; //ローカルを参照

// Initialize Firebase
var config = {
    apiKey: "",
    authDomain: "",
    databaseURL: "",
    projectId: "",
    storageBucket: "",
    messagingSenderId: "",
    appId: ""
};
const app = firebase.initializeApp(config);
const db = database.getDatabase(app);

chrome.runtime.onMessage.addListener(function (info) {
    database.set(database.ref(db, 'aaa'), {
        aa: "aaaa",
    });
    return true
})

参考文献

本記事は以下の内容をもとに執筆しました
https://stackoverflow.com/questions/69160743/connect-a-manifest-version-3-chrome-extension-to-a-firestore-database

終わりに

最後までお読みいただきありがとうございました。
少しでもお役に立てれば幸いです。

また、内容について不備があればコメントをいただけると幸いです。