FireBaseによるクロム拡張機能:マニフェストv 3

イントロ

昨日、私は個人的なプロジェクトのためにChrome Extensionに取り組んだ.その一方で、私はエクステンションにFireBaseを使用するという点でクロム拡張マニフェストV 2とV 3の違いについていくつかの問題を抱えていました.
ここで私はどのように解決したかを共有したい.

ファイアウォールの設定

{
  "name": "Linkeeper Chrome Extension",
  "description": "Achieve current web link to Linkeeper fast",
  "version": "1.0",
  "manifest_version": 3,
  "host_permissions": [
    "<all_urls>"
  ],
  "background": {
    "service_worker": "serviceWorker/background.js"
  },
  "permissions": [
    "tabs",
    "scripting",
    "activeTab",
    "identity"
  ],
  "action": {
    "default_popup": "view/popup/popup.html",
    "default_icon": {
      ...
    }
  },
  "icons": {
        ...
  },
  "oauth2": {
    "client_id": "<Your Client Id>",
    "scopes": [
      "https://www.googleapis.com/auth/userinfo.email",
      "https://www.googleapis.com/auth/userinfo.profile"
    ]
  },
  "key": "-----BEGIN PUBLIC KEY-----<Your Chrome Extension Public Key>-----END PUBLIC KEY-----"
}

あなたのマニフェストを形成する良い記事があります.以下のリンクのJSON.
https://firebaseopensource.com/projects/firebase/quickstart-js/auth/chromextension/readme/
しかし、現在、私たちはv 3をマニフェストしているので多少時代遅れです.マニフェストを書くとき.v 3のJSONは、フィールドの下に注意する必要があります.

host_permissions → それは上記のリンクの例に含まれません、しかし、V 3で

background → 代わりにpage フィールド内部background フィールドを使用する必要がありますservice_worker

それ以外は、それは同じです.

背景サービスワーカーを使用してFirebase

// serviceWorker/background.js
try {
    // you need to manually have firebase-compat.js file in your dir
  self.importScripts('../firebase/firebase-compat.js');

  var config = {
    apiKey: "...",
    authDomain: "...",
    databaseURL: "...",
    projectId: "...",
    storageBucket: "...",
    messagingSenderId: "...",
    appId: "..."
  };
  firebase.initializeApp(config);

  var db = firebase.firestore();

  chrome.runtime.onMessage.addListener(function (request, sender) {
    if (request.command === "post") {
            // in here, you can use both firebase and data from popup view
      console.log(request.data);
            return true;
    }
  });
} catch (e) {
  console.error(e);
}

バックグラウンドサービスワーカーファイルでは、FireBaseを初期化する必要があります.そのためには、まずFireBaseをインポートする必要があります.あなたがバックグラウンドを使用することができないので、これは少しトリッキーでした.HTMLスクリプトのタグをインポートしたり、Web URLから直接インポートします.マニフェストv 3のための答えはちょうどコピーと貼り付けのコードを下にリンクし、手動であなたのクロム拡張フォルダにJavaScriptファイルを含める.
https://www.gstatic.com/firebasejs/9.6.10/firebase-compat.js
それから、あなたのサービスワーカーでそのファイルをインポートしてくださいself.importScripts .
もちろん、FireBaseとのユーザー相互作用データと対話することができます.使用によってchrome.runtime.onMessage.addListenser あなたのサービスワーカーchrome.runtime.sendMessage あなたのビュースクリプトでは、それを行うことができます.このようにして、サービスワーカーファイルにユーザー入力データとFireBaseの両方にアクセスできます.

//view/popup/script.js
...
chrome.runtime.sendMessage({
        command: 'post', data: {
          ...
        }
      }, (response) => {
        console.log(response);
      }
    );
...

結論

私は、あなたがChrome拡張を加えるとき、あなたのウェブプロジェクトの多くがより注意を得ると思います.私はこの記事があなたの旅を助けることを願っています.
乾杯!