This boilerplate provides a quick and easy way to create a Chrome extension using Manifest V3 and Firebase 9. This is particularly useful since Manifest V3 does not allow you to import Firebase using a CDN. Instead, you will use local Firebase files and interact with them through the background.js using event listeners.

1. Set up your Firebase project and get your configuration keys.
2. Replace the placeholders [ENTER-YOUR-KEYS] in the firebaseConfig object inside background.js with your actual Firebase configuration keys.
3. Modify the COLLECTION-NAME in background.js to match the desired Firestore collection name.
4. Update the matches property in the manifest.json file to match the target website(s) where your extension will be active.

async function fetchData() {
  chrome.runtime.sendMessage({ action: "fetchData" }, (response) => {
    if (response.data) {
      const messages = response.data.messages;
      messages.forEach((message) => {
        console.log(message);
      });
    } else if (response.error) {
      console.error("Error loading data:", response.error);
    }
  });
}

function addData(data) {
  chrome.runtime.sendMessage({ action: "addData", data }, (response) => {
    if (response.id) {
      console.log("Data added with ID:", response.id);
    } else if (response.error) {
      console.error("Error adding data:", response.error);
    }
  });
}

If you have any suggestions or improvements, please feel free to create a pull request or contact me.

Happy coding!