Firebase Functions Setup

Overview

Firebase Functions provide a powerful way to run backend code in response to events triggered by Firebase features and HTTPS requests. This guide will help you set up Firebase Functions in your ChromeQuick project, including a specific use case of verifying Gumroad license keys.

Adding Firebase Functions to Your Project

Step 1: Enable Firebase Functions

Before you can add Firebase Functions to your project, ensure that Firebase CLI is installed and your Firebase project is already set up during the authentication step.

1. Navigate to Your Firebase Console:

• Access your Firebase project by visiting the Firebase Console.

2. Add Firebase Functions

• In the Firebase console, locate and select the "Functions" section from the sidebar.

• Click on "Get started" if you haven't used Firebase Functions before, and follow the setup flow to enable Functions.

Step 2: Developer Your Functions

Navigate to the functions directory in your ChromeQuick project. This is where your server-side code will reside.

1. Open the cloned project

• Navigate to the functions/src/index.ts file. This file contains the boilerplate code for setting up an Express app which handles HTTP requests.

2. Configure CORS:

• Include both your local and production Chrome extension IDs in the CORS configuration to allow your extension to make secure requests to your functions.

• Example CORS setup:

const allowedOrigins = [
  "chrome-extension://YourLocalChromeExtensionID", // Local Chrome Extension ID
  "chrome-extension://YourProductionChromeExtensionID", // Production Chrome Extension ID
];

app.use((req, res, next) => {
  const origin = req.headers.origin;
  if (origin && allowedOrigins.includes(origin)) {
    res.header("Access-Control-Allow-Origin", origin);
  }
  next();
});

Example Function: Verifying Gumroad License Keys

The provided example demonstrates how to set up an endpoint that verifies Gumroad license keys:

app.post("/api/proxy/activateLicense", async (req, res) => {
  const { licenseKey } = req.body;
  const apiUrl = "https://api.gumroad.com/v2/licenses/verify";
  const productId = "your_product_id_here"; // Replace with your actual product ID

  try {
    const response = await fetch(apiUrl, {
      method: "POST",
      headers: {
        "Content-Type": "application/x-www-form-urlencoded",
      },
      body: `product_id=${productId}&license_key=${licenseKey}`,
    });

    const data = await response.json();
    res.json(data);
  } catch (error) {
    console.error("Proxy request failed:", error);
    res.status(500).json({ error: "Proxy request failed" });
  }
});

Step 3: Deploy Your Functions

Deploy your Firebase Functions using the Firebase CLI:

This command will upload your functions to Firebase, making them accessible via HTTP requests.

Step 4: Locate Your Firebase Function URL

1. Navigate to the Firebase Console:

• Go to the Firebase Console and select your project.

• Click on the "Functions" tab to view your list of deployed functions.

2. Find Your Function's Trigger URL:

• Under the "Dashboard" or "Triggers" column, find the URL next to the function you need for your extension. This URL is the endpoint to which your background scripts will send requests.

Step 5: Update Background Script with Function URL

Once you have your Firebase Function URL, you need to update your background script to use this URL when making API calls:

• Navigate to Your Background Script:

  • Open the background.js file in your project where API calls are handled.

• Update the Fetch Call:

  • Replace the placeholder URL in the fetch calls "getPremiumStatus" and "activateLicense" with your actual Firebase Function URL:

const response = await fetch(
  `https://us-central1-Your-Firebase-Function.cloudfunctions.net/app/api/proxy/activateLicense`, // Your firebase function URL
  {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify({ licenseKey }),
  }
);

Conclusion

Firebase Functions are essential for handling tasks that require server-side logic, such as external API calls. By following these steps, you can integrate Firebase Functions into your ChromeQuick project, enhancing its capabilities and allowing for more complex operations like verifying Gumroad license keys. Ensure to test your functions thoroughly and monitor their execution in the Firebase Console.