@bringweb3/chrome-extension-kit 1.0.0

package/.changeset/README.md

@@ -0,0 +1,8 @@
+# Changesets
+
+Hello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that works
+with multi-package repos, or single-package repos to help you version and publish your code. You can
+find the full documentation for it [in our repository](https://github.com/changesets/changesets)
+
+We have a quick list of common questions to get you started engaging with this project in
+[our documentation](https://github.com/changesets/changesets/blob/main/docs/common-questions.md)

package/.changeset/config.json

@@ -0,0 +1,11 @@
+{
+  "$schema": "https://unpkg.com/@changesets/config@3.0.2/schema.json",
+  "changelog": "@changesets/cli/changelog",
+  "commit": false,
+  "fixed": [],
+  "linked": [],
+  "access": "restricted",
+  "baseBranch": "main",
+  "updateInternalDependencies": "patch",
+  "ignore": []
+}

package/CHANGELOG.md

@@ -0,0 +1,7 @@
+# @bringweb3/chrome-extension-kit
+
+## 1.0.0
+
+### Major Changes
+
+- fb4c76e: Initial release of @bringweb3/chrome-extension-kit - Chrome Extension Kit from Bringweb3

package/README.md

@@ -0,0 +1,166 @@
+<img src="https://avatars.githubusercontent.com/u/122225882?s=96&v=4"/>
+<br><br>
+<h1 align="center">@bringweb3/chrome-extension-kit</h1>
+
+## Table of content
+- [Table of content](#table-of-content)
+- [Description](#description)
+- [Prerequisites](#prerequisites)
+- [Installing](#installing)
+  - [Package](#package)
+  - [Manifest](#manifest)
+- [Importing](#importing)
+- [Example](#example)
+  - [background.js](#backgroundjs)
+  - [contentScript.js](#contentscriptjs)
+
+## Description
+This integration kit is designed to enhance existing Chrome extensions by adding functionality that enables automatic crypto cashback on online purchases.
+
+This kit consists of a set of JavaScript files that crypto outlets can integrate into their crypto wallet extensions. This integration facilitates a seamless addition of cashback features, leveraging cryptocurrency transactions in the context of online shopping.
+
+When a user visits supported online retailer websites, the Crypto Cashback system determines eligibility for cashback offers based on the user's location and the website's relevance.
+
+## Prerequisites
+
+- Node.js >= 14
+- Chrome extension manifest >= V3 with required permissions
+- Obtain an identifier key from Bringweb3
+- Provide a specific logo for the specific outlet
+
+##  Installing
+
+### Package
+Using npm:
+```bash
+$ npm install @bringweb3/chrome-extension-kit
+```
+
+Using yarn:
+
+```bash
+$ yarn add @bringweb3/chrome-extension-kit
+```
+
+Using pnpm:
+
+```bash
+$ pnpm add @bringweb3/chrome-extension-kit
+```
+
+### Manifest
+
+Include this configuration inside your `manifest.json` file:
+
+```json
+  "permissions": [
+    "storage",
+    "tabs",
+    "alarms"
+  ],
+  "content_scripts": [
+    {
+      "matches": [
+        "<all_urls>"
+      ],
+      "js": [
+        "contentScript.js" // The name of the file importing the bringContentScriptInit
+      ]
+    }
+  ],
+  "host_permissions": [
+    "https://*.bringweb3.io/*"
+  ]
+```
+
+Once the package is installed, you can import the library using `import` or `require` approach:
+
+
+## Importing
+
+```js
+import { bringInitBackground } from '@bringweb3/chrome-extension-kit';
+```
+
+## Example
+
+### background.js
+
+```js
+
+import { bringInitBackground } from '@bringweb3/chrome-extension-kit';
+
+bringInitBackground({
+    identifier: process.env.PLATFORM_IDENTIFIER, // The identifier key you obtained from Bringweb3
+    apiEndpoint: 'sandbox', // 'sandbox' || 'prod'
+    cashbackPagePath: '/wallet/cashback' // The relative path to your Cashback Dashboard if you have one inside your extension
+})
+```
+
+### contentScript.js
+
+```js 
+import { bringInitContentScript } from "@bringweb3/chrome-extension-kit";
+
+bringInitContentScript({
+    iframeEndpoint: process.env.IFRAME_ENDPOINT,
+    getWalletAddress: async () => await new Promise(resolve => setTimeout(() => resolve('<USER_WALLET_ADDRESS>'), 200)),// Async function that returns the current user's wallet address
+    promptLogin: () => {...}, // Function that prompts a UI element asking the user to login
+    walletAddressListeners: ["customEvent:addressChanged"], // A list of custom events that dispatched when the user's wallet address had changed
+    customTheme: { // All optional
+        fontUrl: 'https://fonts.googleapis.com/css2?family=Matemasie&display=swap',
+        fontFamily: "'Matemasie', system-ui",
+
+        popupBg: "#192E34",
+        popupShadow: "",
+
+        primaryBtnBg: "linear-gradient(135deg, #5DEB5A 0%, #FDFC47 100%)",
+        primaryBtnColor: "#041417",
+        primaryBtnBorderColor: "transparent",
+        primaryBtnBorderW: "0",
+        primaryBtnRadius: "8px",
+
+        secondaryBtnBg: "transparent",
+        secondaryBtnColor: "white",
+        secondaryBtnBorderColor: "rgba(149, 176, 178, 0.50)",
+        secondaryBtnBorderW: "2px",
+        secondaryBtnRadius: "8px",
+
+        markdownBg: "#07131766",
+        markdownColor: "#DADCE5",
+        markdownBorderW: "0",
+        markdownRadius: "4px",
+        markdownBorderColor: "black",
+        markdownScrollbarColor: "#DADCE5",
+
+        walletColor: "white",
+        walletBg: "#33535B",
+        walletBorderColor: "white",
+        walletBorderW: "0",
+        walletRadius: "4px",
+
+        detailsBg: "#33535B",
+        detailsColor: "white",
+        detailsRadius: "8px",
+        detailsBorderW: "0",
+        detailsBorderColor: "transparent",
+        detailsCashbackColor: "linear-gradient(135deg, #5DEB5A 0%, #FDFC47 100%)",
+
+        overlayBg: "#192E34E6",
+        overlayColor: "#DADCE5",
+
+        optoutBg: "#192E34",
+        optoutColor: "white",
+        optoutRadius: "56px",
+
+        closeColor: "#B9BBBF",
+
+        tokenBg: "transparent",
+        tokenColor: "#DADCE5",
+
+        notificationBtnColor: "#041417",
+        notificationBtnBg: "linear-gradient(135deg, #5DEB5A 0%, #FDFC47 100%)",
+        notificationBtnRadius: "8px"
+    }
+});
+```

package/bringInitBackground.ts

@@ -0,0 +1,301 @@
+import fetchDomains from "./utils/api/fetchDomains.js"
+import validateDomain from "./utils/api/validateDomain.js"
+import checkEvents from "./utils/api/checkEvents.js"
+import { ApiEndpoint } from "./utils/apiEndpoint.js"
+
+import { UPDATE_CACHE_ALARM_NAME } from './utils/constants.js'
+import storage from "./utils/storage.js"
+
+const quietTime = 30 * 60 * 1000
+
+const getWalletAddress = async (tabId?: number): Promise<WalletAddress> => {
+    let walletAddress: WalletAddress = await storage.get('walletAddress')
+
+    try {
+        if (!tabId) {
+            const tabs = await chrome.tabs.query({ active: true, currentWindow: true })
+            if (!tabs || !tabs[0] || !tabs[0].id) return walletAddress;
+            tabId = tabs[0].id
+        }
+
+        const res = await sendMessage(tabId, { action: 'GET_WALLET_ADDRESS' });
+
+        if (res?.walletAddress && walletAddress !== res?.walletAddress) {
+            walletAddress = res?.walletAddress
+            await storage.set('walletAddress', walletAddress as string)
+        }
+    } catch (error) {
+        // console.log("Can't update wallet address");
+    }
+
+    return walletAddress
+}
+
+const calcDelay = (timestamp: number) => {
+    const now = Date.now()
+    return (timestamp - now) / 1000 / 60 // milliseconds to minutes
+}
+
+const updateCache = async (apiKey: string) => {
+    const res = await fetchDomains(apiKey)
+
+    storage.set('relevantDomains', res.relevantDomains)
+
+    const { nextUpdateTimestamp } = res
+
+    const delay = calcDelay(nextUpdateTimestamp)
+
+    chrome.alarms.create(UPDATE_CACHE_ALARM_NAME, {
+        delayInMinutes: delay
+    })
+}
+
+const checkNotifications = async (apiKey: string, tabId: number, cashbackUrl: string | undefined, isAfterActivation?: boolean) => {
+    const falseReturn = { showNotification: false, token: '' };
+
+    const nextNotificationCheck = await storage.get('notificationCheck');
+
+    if (nextNotificationCheck?.check && Date.now() < nextNotificationCheck.check) return falseReturn;
+
+    const walletAddress = await getWalletAddress(tabId)
+
+    if (!walletAddress) return falseReturn;
+
+    const res = await checkEvents({ apiKey, walletAddress, cashbackUrl });
+    const notifications = {
+        check: isAfterActivation ? res.nextRequestTimestampActivated : res.nextRequestTimestampRegular,
+        nextRequestTimestampActivated: res.nextRequestTimestampActivated,
+        nextRequestTimestampRegular: res.nextRequestTimestampRegular
+    }
+    storage.set('notificationCheck', notifications);
+
+    return {
+        showNotification: res.showNotification as boolean,
+        token: res.token as string
+    };
+}
+
+const getDomain = (url: string) => {
+    return url.replace(/^(https?:\/\/)?(www\.)?/, '');
+}
+
+const getRelevantDomain = async (url: string | undefined) => {
+    const relevantDomains = await storage.get('relevantDomains')
+    if (!url || !relevantDomains || !relevantDomains.length) return ''
+    const domain = getDomain(url)
+    for (const relevantDomain of relevantDomains) {
+        if (domain.startsWith(relevantDomain)) {
+
+            const quietDomains = await storage.get('quietDomains')
+            if (quietDomains && quietDomains[relevantDomain] && Date.now() < quietDomains[relevantDomain]) {
+                return ''
+            }
+            return relevantDomain
+        }
+    }
+    return ''
+}
+
+const addQuietDomain = async (domain: string, time?: number) => {
+    if (!time) time = quietTime
+
+    let quietDomains = await storage.get('quietDomains')
+
+    if (typeof quietDomains === 'object') {
+        quietDomains[domain] = Date.now() + time
+    } else {
+        quietDomains = { [domain]: Date.now() + quietTime }
+    }
+    storage.set('quietDomains', quietDomains)
+}
+
+const getCashbackUrl = (cashbackUrl: string | undefined): string | undefined => {
+    return cashbackUrl ? chrome.runtime.getURL(cashbackUrl) : undefined;
+}
+
+interface Message {
+    action: 'INJECT' | 'GET_WALLET_ADDRESS'
+    domain?: string
+    token?: string
+    page?: string
+}
+
+const sendMessage = async (tabId: number, message: Message) => {
+    const maxRetries = 5;
+    const baseDelay = 1000; // 1 second
+
+    for (let attempt = 0; attempt < maxRetries; attempt++) {
+        try {
+            // Check if tab still exists
+            const tabInfo = await chrome.tabs.get(tabId);
+            if (chrome.runtime.lastError) {
+                // console.warn("Tab no longer exists:", chrome.runtime.lastError);
+                return;
+            }
+
+            const res = await chrome.tabs.sendMessage(tabId, message);
+            // console.log("Message sent successfully");
+            return res;
+        } catch (error) {
+            // console.warn(`Attempt ${attempt + 1} failed:`, error);
+            if (attempt < maxRetries - 1) {
+                await new Promise(resolve => setTimeout(resolve, baseDelay * Math.pow(2, attempt)));
+            }
+        }
+    }
+}
+
+const showNotification = async (identifier: string, tabId: number, cashbackPagePath: string | undefined): Promise<void> => {
+    const notification = await checkNotifications(identifier, tabId, getCashbackUrl(cashbackPagePath))
+
+    if (!notification.showNotification) return;
+    await sendMessage(tabId, {
+        action: 'INJECT',
+        token: notification.token,
+        page: 'notification',
+    })
+}
+
+interface UrlDict {
+    [key: string]: string
+}
+
+const urlsDict: UrlDict = {}
+
+interface Configuration {
+    identifier: string
+    apiEndpoint: string
+    cashbackPagePath?: string
+}
+/**
+ * Initializes the background script for the Bring extension.
+ *
+ * @async
+ * @function bringInitBackground
+ * @param {Object} configuration - The configuration object.
+ * @param {string} configuration.identifier - The identifier for the extension.
+ * @param {string} configuration.apiEndpoint - The API endpoint ('prod' or 'sandbox').
+ * @param {string} [configuration.cashbackPagePath] - Optional path to the cashback page.
+ * @throws {Error} Throws an error if identifier or apiEndpoint is missing, or if apiEndpoint is invalid.
+ * @returns {Promise<void>}
+ *
+ * @description
+ * This function sets up the background processes for the Bring extension. It initializes
+ * the API endpoint, sets up listeners for alarms, runtime messages, and tab updates.
+ * It handles various actions such as opting out, closing notifications, injecting content
+ * based on URL changes, and managing quiet domains.
+ *
+ * The function performs the following tasks:
+ * - Validates and sets the API endpoint
+ * - Updates the cache
+ * - Sets up listeners for alarms to update cache periodically
+ * - Handles runtime messages for opting out and closing notifications
+ * - Monitors tab updates to inject content or show notifications based on URL changes
+ * - Validates domains and manages quiet domains
+ *
+ * @example
+ * bringInitBackground({
+ *   identifier: 'my-extension-id',
+ *   apiEndpoint: 'sandbox',
+ *   cashbackPagePath: '/cashback.html'
+ * });
+ */
+const bringInitBackground = async ({ identifier, apiEndpoint, cashbackPagePath }: Configuration) => {
+    if (!identifier || !apiEndpoint) throw new Error('Missing configuration')
+    if (!['prod', 'sandbox'].includes(apiEndpoint)) throw new Error('unknown apiEndpoint')
+
+    ApiEndpoint.getInstance().setApiEndpoint(apiEndpoint)
+
+
+    updateCache(identifier)
+
+    chrome.alarms.onAlarm.addListener(async (alarm) => {
+        const { name } = alarm
+
+        switch (name) {
+            case UPDATE_CACHE_ALARM_NAME:
+                updateCache(identifier)
+                break;
+            default:
+                console.error('alarm with no use case:', name);
+                break;
+        }
+    })
+
+    chrome.runtime.onMessage.addListener(async (request, sender) => {
+        const { action, time } = request
+
+        switch (action) {
+            case 'ACTIVATE':
+                const notificationCheck = await storage.get('notificationCheck')
+                if (!notificationCheck.check || !notificationCheck.nextRequestTimestampActivated) break;
+                notificationCheck.check = notificationCheck.nextRequestTimestampActivated;
+                storage.set('notificationCheck', notificationCheck)
+                break;
+            case 'OPT_OUT':
+                storage.set('optOut', Date.now() + time)
+                break;
+            case 'CLOSE':
+                const domain = await getRelevantDomain(sender.tab?.url || sender.origin)
+                if (!domain) break;
+                addQuietDomain(domain, time)
+                break;
+            default:
+                console.warn(`Bring unknown action: ${action}`);
+                break;
+        }
+    })
+
+    chrome.tabs.onUpdated.addListener(async (tabId, changeInfo, tab) => {
+        const optOut = await storage.get('optOut');
+
+        if (optOut && optOut > Date.now()) {
+            await showNotification(identifier, tabId, cashbackPagePath);
+            return;
+        }
+
+        if (!tab.url) return;
+
+        const urlObj = new URL(tab.url)
+        const url = `${urlObj.hostname.replace('www.', '')}${urlObj.pathname}`
+
+        const previousUrl = urlsDict[tabId];
+
+        if (changeInfo.status !== 'complete' || url === previousUrl) return;
+
+        urlsDict[tabId] = url
+
+        const match = await getRelevantDomain(tab.url);
+
+        if (!match || !match.length) {
+            await showNotification(identifier, tabId, cashbackPagePath)
+            return;
+        };
+
+        const address = await getWalletAddress(tabId);
+
+        const { token, isValid } = await validateDomain({
+            apiKey: identifier,
+            query: {
+                domain: match,
+                url: tab.url,
+                address
+            }
+        });
+
+        if (!isValid) {
+            addQuietDomain(match);
+            return;
+        }
+
+        sendMessage(tabId, {
+            action: 'INJECT',
+            token,
+            domain: url
+        });
+    })
+
+    chrome.tabs.onRemoved.addListener(tabId => delete urlsDict[tabId])
+}
+
+export default bringInitBackground

package/bringInitContentScript.ts

@@ -0,0 +1,101 @@
+import injectIFrame from "./utils/contentScript/injectIFrame.js";
+import handleIframeMessages from "./utils/contentScript/handleIframeMessages.js";
+import startListenersForWalletAddress from "./utils/contentScript/startLIstenersForWalletAddress.js";
+
+let iframeEl: IFrame = null
+let isIframeOpen = false
+
+interface Configuration {
+    iframeEndpoint: string
+    getWalletAddress: () => Promise<WalletAddress>
+    promptLogin: () => Promise<WalletAddress>
+    walletAddressListeners: string[]
+    customTheme?: Style
+}
+
+/**
+ * Initializes the content script for the Bring extension.
+ * 
+ * @async
+ * @function bringInitContentScript
+ * @param {Object} configuration - The configuration object.
+ * @param {Function} configuration.getWalletAddress - A function that returns a Promise resolving to the wallet address.
+ * @param {Function} configuration.promptLogin - A function to prompt the user to login.
+ * @param {string[]} configuration.walletAddressListeners - An array of strings representing wallet address listeners.
+ * @param {Object} [configuration.customTheme] - Optional custom theme settings.
+ * @param {string} configuration.iframeEndpoint - The endpoint URL for the iframe.
+ * @throws {Error} Throws an error if any required configuration is missing.
+ * @returns {Promise<void>}
+ * 
+ * @description
+ * This function sets up event listeners for wallet address changes, iframe messages,
+ * and Chrome runtime messages. It handles actions such as getting the wallet address
+ * and injecting iframes based on received messages.
+ * 
+ * @example
+ * bringInitContentScript({
+ *   getWalletAddress: async () => '0x1234...',
+ *   promptLogin: () => { ... },
+ *   walletAddressListeners: ["listener1", "listener2"],
+ *   iframeEndpoint: 'https://example.com/iframe'
+ * });
+ */
+const bringInitContentScript = async ({
+    getWalletAddress,
+    promptLogin,
+    walletAddressListeners,
+    customTheme,
+    iframeEndpoint
+}: Configuration) => {
+    if (!getWalletAddress || !promptLogin || !walletAddressListeners?.length || !iframeEndpoint) throw new Error('Missing configuration')
+
+    startListenersForWalletAddress({
+        walletAddressListeners,
+        getWalletAddress,
+        iframeEl
+    })
+
+    window.addEventListener('message', (e) => handleIframeMessages({
+        event: e,
+        iframeEl,
+        promptLogin
+    }))
+
+    // Listen for message
+    chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
+
+        const { action } = request
+
+        switch (action) {
+
+            case 'GET_WALLET_ADDRESS':
+                getWalletAddress()
+                    .then(walletAddress => sendResponse({ status: 'success', walletAddress }))
+                    .catch(err => sendResponse({ status: 'success', walletAddress: undefined }))
+                return true
+
+            case 'INJECT':
+                if (isIframeOpen) {
+                    return
+                }
+                const { token, page } = request;
+                // console.log(`injecting to: ${request.domain}`);
+
+                iframeEl = injectIFrame({
+                    query: { token },
+                    iframeSrc: page === 'notification' ?
+                        `${iframeEndpoint}notification` : iframeEndpoint,
+                    theme: customTheme
+                });
+                isIframeOpen = true
+                sendResponse({ status: 'success' });
+                return true
+
+            default:
+                console.error(`Unknown action: ${action}`);
+                break;
+        }
+    });
+}
+
+export default bringInitContentScript;

package/config.ts

@@ -0,0 +1 @@
+export const API_URL = 'https://sandbox-api.bringweb3.io/v1/extension'

package/dist/index.d.mts

@@ -0,0 +1,77 @@
+interface Configuration$1 {
+    iframeEndpoint: string;
+    getWalletAddress: () => Promise<WalletAddress>;
+    promptLogin: () => Promise<WalletAddress>;
+    walletAddressListeners: string[];
+    customTheme?: Style;
+}
+/**
+ * Initializes the content script for the Bring extension.
+ *
+ * @async
+ * @function bringInitContentScript
+ * @param {Object} configuration - The configuration object.
+ * @param {Function} configuration.getWalletAddress - A function that returns a Promise resolving to the wallet address.
+ * @param {Function} configuration.promptLogin - A function to prompt the user to login.
+ * @param {string[]} configuration.walletAddressListeners - An array of strings representing wallet address listeners.
+ * @param {Object} [configuration.customTheme] - Optional custom theme settings.
+ * @param {string} configuration.iframeEndpoint - The endpoint URL for the iframe.
+ * @throws {Error} Throws an error if any required configuration is missing.
+ * @returns {Promise<void>}
+ *
+ * @description
+ * This function sets up event listeners for wallet address changes, iframe messages,
+ * and Chrome runtime messages. It handles actions such as getting the wallet address
+ * and injecting iframes based on received messages.
+ *
+ * @example
+ * bringInitContentScript({
+ *   getWalletAddress: async () => '0x1234...',
+ *   promptLogin: () => { ... },
+ *   walletAddressListeners: ["listener1", "listener2"],
+ *   iframeEndpoint: 'https://example.com/iframe'
+ * });
+ */
+declare const bringInitContentScript: ({ getWalletAddress, promptLogin, walletAddressListeners, customTheme, iframeEndpoint }: Configuration$1) => Promise<void>;
+
+interface Configuration {
+    identifier: string;
+    apiEndpoint: string;
+    cashbackPagePath?: string;
+}
+/**
+ * Initializes the background script for the Bring extension.
+ *
+ * @async
+ * @function bringInitBackground
+ * @param {Object} configuration - The configuration object.
+ * @param {string} configuration.identifier - The identifier for the extension.
+ * @param {string} configuration.apiEndpoint - The API endpoint ('prod' or 'sandbox').
+ * @param {string} [configuration.cashbackPagePath] - Optional path to the cashback page.
+ * @throws {Error} Throws an error if identifier or apiEndpoint is missing, or if apiEndpoint is invalid.
+ * @returns {Promise<void>}
+ *
+ * @description
+ * This function sets up the background processes for the Bring extension. It initializes
+ * the API endpoint, sets up listeners for alarms, runtime messages, and tab updates.
+ * It handles various actions such as opting out, closing notifications, injecting content
+ * based on URL changes, and managing quiet domains.
+ *
+ * The function performs the following tasks:
+ * - Validates and sets the API endpoint
+ * - Updates the cache
+ * - Sets up listeners for alarms to update cache periodically
+ * - Handles runtime messages for opting out and closing notifications
+ * - Monitors tab updates to inject content or show notifications based on URL changes
+ * - Validates domains and manages quiet domains
+ *
+ * @example
+ * bringInitBackground({
+ *   identifier: 'my-extension-id',
+ *   apiEndpoint: 'sandbox',
+ *   cashbackPagePath: '/cashback.html'
+ * });
+ */
+declare const bringInitBackground: ({ identifier, apiEndpoint, cashbackPagePath }: Configuration) => Promise<void>;
+
+export { bringInitBackground, bringInitContentScript };

package/dist/index.d.ts

@@ -0,0 +1,77 @@
+interface Configuration$1 {
+    iframeEndpoint: string;
+    getWalletAddress: () => Promise<WalletAddress>;
+    promptLogin: () => Promise<WalletAddress>;
+    walletAddressListeners: string[];
+    customTheme?: Style;
+}
+/**
+ * Initializes the content script for the Bring extension.
+ *
+ * @async
+ * @function bringInitContentScript
+ * @param {Object} configuration - The configuration object.
+ * @param {Function} configuration.getWalletAddress - A function that returns a Promise resolving to the wallet address.
+ * @param {Function} configuration.promptLogin - A function to prompt the user to login.
+ * @param {string[]} configuration.walletAddressListeners - An array of strings representing wallet address listeners.
+ * @param {Object} [configuration.customTheme] - Optional custom theme settings.
+ * @param {string} configuration.iframeEndpoint - The endpoint URL for the iframe.
+ * @throws {Error} Throws an error if any required configuration is missing.
+ * @returns {Promise<void>}
+ *
+ * @description
+ * This function sets up event listeners for wallet address changes, iframe messages,
+ * and Chrome runtime messages. It handles actions such as getting the wallet address
+ * and injecting iframes based on received messages.
+ *
+ * @example
+ * bringInitContentScript({
+ *   getWalletAddress: async () => '0x1234...',
+ *   promptLogin: () => { ... },
+ *   walletAddressListeners: ["listener1", "listener2"],
+ *   iframeEndpoint: 'https://example.com/iframe'
+ * });
+ */
+declare const bringInitContentScript: ({ getWalletAddress, promptLogin, walletAddressListeners, customTheme, iframeEndpoint }: Configuration$1) => Promise<void>;
+
+interface Configuration {
+    identifier: string;
+    apiEndpoint: string;
+    cashbackPagePath?: string;
+}
+/**
+ * Initializes the background script for the Bring extension.
+ *
+ * @async
+ * @function bringInitBackground
+ * @param {Object} configuration - The configuration object.
+ * @param {string} configuration.identifier - The identifier for the extension.
+ * @param {string} configuration.apiEndpoint - The API endpoint ('prod' or 'sandbox').
+ * @param {string} [configuration.cashbackPagePath] - Optional path to the cashback page.
+ * @throws {Error} Throws an error if identifier or apiEndpoint is missing, or if apiEndpoint is invalid.
+ * @returns {Promise<void>}
+ *
+ * @description
+ * This function sets up the background processes for the Bring extension. It initializes
+ * the API endpoint, sets up listeners for alarms, runtime messages, and tab updates.
+ * It handles various actions such as opting out, closing notifications, injecting content
+ * based on URL changes, and managing quiet domains.
+ *
+ * The function performs the following tasks:
+ * - Validates and sets the API endpoint
+ * - Updates the cache
+ * - Sets up listeners for alarms to update cache periodically
+ * - Handles runtime messages for opting out and closing notifications
+ * - Monitors tab updates to inject content or show notifications based on URL changes
+ * - Validates domains and manages quiet domains
+ *
+ * @example
+ * bringInitBackground({
+ *   identifier: 'my-extension-id',
+ *   apiEndpoint: 'sandbox',
+ *   cashbackPagePath: '/cashback.html'
+ * });
+ */
+declare const bringInitBackground: ({ identifier, apiEndpoint, cashbackPagePath }: Configuration) => Promise<void>;
+
+export { bringInitBackground, bringInitContentScript };

package/dist/index.js

@@ -0,0 +1 @@
+"use strict";var h=Object.defineProperty;var W=Object.getOwnPropertyDescriptor;var j=Object.getOwnPropertyNames;var F=Object.prototype.hasOwnProperty;var K=(e,t)=>{for(var r in t)h(e,r,{get:t[r],enumerable:!0})},V=(e,t,r,n)=>{if(t&&typeof t=="object"||typeof t=="function")for(let s of j(t))!F.call(e,s)&&s!==r&&h(e,s,{get:()=>t[s],enumerable:!(n=W(t,s))||n.enumerable});return e};var Q=e=>V(h({},"__esModule",{value:!0}),e);var le={};K(le,{bringInitBackground:()=>q,bringInitContentScript:()=>v});module.exports=Q(le);var B=e=>{let t=new URLSearchParams,{query:r,prefix:n}=e;return Object.entries(r).forEach(([s,o])=>{o&&(n&&(s=`${n}_${s}`),s==="url"?t.append(s,encodeURIComponent(o)):t.append(s,o))}),t.toString()},f=B;var G=({query:e,theme:t,iframeSrc:r})=>{let n=chrome.runtime.id,s=f({query:{...e,extensionId:n}}),o=t?`&${f({query:t,prefix:"t"})}`:"",i=document.createElement("iframe");return i.id=`bringweb3-iframe:${n}`,i.src=`${r}?${s}${o}`,i.setAttribute("sandbox","allow-popups allow-scripts allow-same-origin allow-top-navigation-by-user-activation"),i.style.position="fixed",i.scrolling="no",i.style.overflow="hidden",i.style.width="1px",i.style.height="1px",i.style.right="8px",i.style.borderRadius="10px",i.style.border="none",i.style.cssText+="z-index: 99999999999999 !important;",t?.popupShadow&&(i.style.boxShadow=t.popupShadow),document.documentElement.appendChild(i),i},b=G;var J=(e,t)=>{!e||!t||!Object.keys(t).length||Object.entries(t).forEach(([r,n])=>{r in e.style&&(e.style[r]=n)})},T=J;var H=e=>{if(!e||!e.length)return;let t=document.createElement("style");document.head.appendChild(t);let r=t.sheet;r?e.forEach(({name:n,rules:s})=>{r.insertRule(`@keyframes ${n} { ${s} }`,r.cssRules.length)}):console.error("Failed to create stylesheet")},k=H;var l={OPEN:"OPEN",CLOSE:"CLOSE",ACTIVATE:"ACTIVATE",PROMPT_LOGIN:"PROMPT_LOGIN",OPT_OUT:"OPT_OUT",ADD_KEYFRAMES:"ADD_KEYFRAMES"},Y=[l.ACTIVATE],z=({event:e,iframeEl:t,promptLogin:r})=>{let{data:n}=e,{from:s,action:o,style:i,keyFrames:a,time:c,extensionId:p}=n;if(s==="bringweb3"&&!(p!==chrome.runtime.id&&!Y.includes(o)))switch(o){case l.OPEN:T(t,i);break;case l.CLOSE:t&&t.parentNode?.removeChild(t),c&&chrome.runtime.sendMessage({action:o,time:c});break;case l.PROMPT_LOGIN:r();break;case l.ACTIVATE:chrome.runtime.sendMessage({action:o});break;case l.OPT_OUT:chrome.runtime.sendMessage({action:o,time:c});break;case l.ADD_KEYFRAMES:k(a);break;default:break}},x=z;var X=({walletAddressListeners:e,getWalletAddress:t,iframeEl:r})=>{for(let n=0;n<e.length;n++){let s=e[n];s&&window.addEventListener(s,async o=>{if(!r&&(r=document.querySelector(`#bringweb3-iframe:${chrome.runtime.id}`),!r)||!r.contentWindow)return;let i=await t();r.contentWindow.postMessage({action:"WALLET_ADDRESS_UPDATE",walletAddress:i},"*")})}},D=X;var w=null,C=!1,Z=async({getWalletAddress:e,promptLogin:t,walletAddressListeners:r,customTheme:n,iframeEndpoint:s})=>{if(!e||!t||!r?.length||!s)throw new Error("Missing configuration");D({walletAddressListeners:r,getWalletAddress:e,iframeEl:w}),window.addEventListener("message",o=>x({event:o,iframeEl:w,promptLogin:t})),chrome.runtime.onMessage.addListener((o,i,a)=>{let{action:c}=o;switch(c){case"GET_WALLET_ADDRESS":return e().then(g=>a({status:"success",walletAddress:g})).catch(g=>a({status:"success",walletAddress:void 0})),!0;case"INJECT":if(C)return;let{token:p,page:m}=o;return w=b({query:{token:p},iframeSrc:m==="notification"?`${s}notification`:s,theme:n}),C=!0,a({status:"success"}),!0;default:console.error(`Unknown action: ${c}`);break}})},v=Z;var u=class e{static instance=null;apiEndpoint="";constructor(){}static getInstance(){return e.instance||(e.instance=new e),e.instance}setApiEndpoint(t){this.apiEndpoint=t==="prod"?"https://api.bringweb3.io/v1/extension":"https://sandbox-api.bringweb3.io/v1/extension"}getApiEndpoint(){if(!this.apiEndpoint)throw new Error("API endpoint not set. Call setApiEndpoint first.");return this.apiEndpoint}};var ee=async e=>{let t=u.getInstance().getApiEndpoint();return await(await fetch(`${t}/domains?country=us`,{headers:{"x-api-key":e}})).json()},P=ee;var te=async({apiKey:e,query:t})=>{let r=u.getInstance().getApiEndpoint(),n=f({query:{...t,country:"us"}});return await(await fetch(`${r}/token?${n.toString()}`,{headers:{"x-api-key":e}})).json()},S=te;var ne=async({apiKey:e,walletAddress:t,cashbackUrl:r})=>{let n=u.getInstance().getApiEndpoint(),s={walletAddress:t,test:!0};return r&&(s.cashbackUrl=r),await(await fetch(`${n}/check-events`,{method:"POST",headers:{"Content-Type":"application/json","x-api-key":e},body:JSON.stringify(s)})).json()},R=ne;var y="updateCache";var re=async(e,t)=>{chrome.storage.local.set({[e]:t})},se=async e=>(await chrome.storage.local.get(e))[e],ie=async e=>{chrome.storage.local.remove(e)},d={set:re,get:se,remove:ie};var O=30*60*1e3,_=async e=>{let t=await d.get("walletAddress");try{if(!e){let n=await chrome.tabs.query({active:!0,currentWindow:!0});if(!n||!n[0]||!n[0].id)return t;e=n[0].id}let r=await E(e,{action:"GET_WALLET_ADDRESS"});r?.walletAddress&&t!==r?.walletAddress&&(t=r?.walletAddress,await d.set("walletAddress",t))}catch{}return t},oe=e=>{let t=Date.now();return(e-t)/1e3/60},L=async e=>{let t=await P(e);d.set("relevantDomains",t.relevantDomains);let{nextUpdateTimestamp:r}=t,n=oe(r);chrome.alarms.create(y,{delayInMinutes:n})},ae=async(e,t,r,n)=>{let s={showNotification:!1,token:""},o=await d.get("notificationCheck");if(o?.check&&Date.now()<o.check)return s;let i=await _(t);if(!i)return s;let a=await R({apiKey:e,walletAddress:i,cashbackUrl:r}),c={check:n?a.nextRequestTimestampActivated:a.nextRequestTimestampRegular,nextRequestTimestampActivated:a.nextRequestTimestampActivated,nextRequestTimestampRegular:a.nextRequestTimestampRegular};return d.set("notificationCheck",c),{showNotification:a.showNotification,token:a.token}},ce=e=>e.replace(/^(https?:\/\/)?(www\.)?/,""),I=async e=>{let t=await d.get("relevantDomains");if(!e||!t||!t.length)return"";let r=ce(e);for(let n of t)if(r.startsWith(n)){let s=await d.get("quietDomains");return s&&s[n]&&Date.now()<s[n]?"":n}return""},M=async(e,t)=>{t||(t=O);let r=await d.get("quietDomains");typeof r=="object"?r[e]=Date.now()+t:r={[e]:Date.now()+O},d.set("quietDomains",r)},de=e=>e?chrome.runtime.getURL(e):void 0,E=async(e,t)=>{for(let s=0;s<5;s++)try{let o=await chrome.tabs.get(e);return chrome.runtime.lastError?void 0:await chrome.tabs.sendMessage(e,t)}catch{s<4&&await new Promise(i=>setTimeout(i,1e3*Math.pow(2,s)))}},N=async(e,t,r)=>{let n=await ae(e,t,de(r));n.showNotification&&await E(t,{action:"INJECT",token:n.token,page:"notification"})},A={},ue=async({identifier:e,apiEndpoint:t,cashbackPagePath:r})=>{if(!e||!t)throw new Error("Missing configuration");if(!["prod","sandbox"].includes(t))throw new Error("unknown apiEndpoint");u.getInstance().setApiEndpoint(t),L(e),chrome.alarms.onAlarm.addListener(async n=>{let{name:s}=n;switch(s){case y:L(e);break;default:console.error("alarm with no use case:",s);break}}),chrome.runtime.onMessage.addListener(async(n,s)=>{let{action:o,time:i}=n;switch(o){case"ACTIVATE":let a=await d.get("notificationCheck");if(!a.check||!a.nextRequestTimestampActivated)break;a.check=a.nextRequestTimestampActivated,d.set("notificationCheck",a);break;case"OPT_OUT":d.set("optOut",Date.now()+i);break;case"CLOSE":let c=await I(s.tab?.url||s.origin);if(!c)break;M(c,i);break;default:console.warn(`Bring unknown action: ${o}`);break}}),chrome.tabs.onUpdated.addListener(async(n,s,o)=>{let i=await d.get("optOut");if(i&&i>Date.now()){await N(e,n,r);return}if(!o.url)return;let a=new URL(o.url),c=`${a.hostname.replace("www.","")}${a.pathname}`,p=A[n];if(s.status!=="complete"||c===p)return;A[n]=c;let m=await I(o.url);if(!m||!m.length){await N(e,n,r);return}let g=await _(n),{token:U,isValid:$}=await S({apiKey:e,query:{domain:m,url:o.url,address:g}});if(!$){M(m);return}E(n,{action:"INJECT",token:U,domain:c})}),chrome.tabs.onRemoved.addListener(n=>delete A[n])},q=ue;0&&(module.exports={bringInitBackground,bringInitContentScript});

package/dist/index.mjs

@@ -0,0 +1 @@
+var q=e=>{let t=new URLSearchParams,{query:r,prefix:n}=e;return Object.entries(r).forEach(([s,o])=>{o&&(n&&(s=`${n}_${s}`),s==="url"?t.append(s,encodeURIComponent(o)):t.append(s,o))}),t.toString()},f=q;var U=({query:e,theme:t,iframeSrc:r})=>{let n=chrome.runtime.id,s=f({query:{...e,extensionId:n}}),o=t?`&${f({query:t,prefix:"t"})}`:"",i=document.createElement("iframe");return i.id=`bringweb3-iframe:${n}`,i.src=`${r}?${s}${o}`,i.setAttribute("sandbox","allow-popups allow-scripts allow-same-origin allow-top-navigation-by-user-activation"),i.style.position="fixed",i.scrolling="no",i.style.overflow="hidden",i.style.width="1px",i.style.height="1px",i.style.right="8px",i.style.borderRadius="10px",i.style.border="none",i.style.cssText+="z-index: 99999999999999 !important;",t?.popupShadow&&(i.style.boxShadow=t.popupShadow),document.documentElement.appendChild(i),i},E=U;var $=(e,t)=>{!e||!t||!Object.keys(t).length||Object.entries(t).forEach(([r,n])=>{r in e.style&&(e.style[r]=n)})},b=$;var W=e=>{if(!e||!e.length)return;let t=document.createElement("style");document.head.appendChild(t);let r=t.sheet;r?e.forEach(({name:n,rules:s})=>{r.insertRule(`@keyframes ${n} { ${s} }`,r.cssRules.length)}):console.error("Failed to create stylesheet")},T=W;var l={OPEN:"OPEN",CLOSE:"CLOSE",ACTIVATE:"ACTIVATE",PROMPT_LOGIN:"PROMPT_LOGIN",OPT_OUT:"OPT_OUT",ADD_KEYFRAMES:"ADD_KEYFRAMES"},j=[l.ACTIVATE],F=({event:e,iframeEl:t,promptLogin:r})=>{let{data:n}=e,{from:s,action:o,style:i,keyFrames:a,time:c,extensionId:p}=n;if(s==="bringweb3"&&!(p!==chrome.runtime.id&&!j.includes(o)))switch(o){case l.OPEN:b(t,i);break;case l.CLOSE:t&&t.parentNode?.removeChild(t),c&&chrome.runtime.sendMessage({action:o,time:c});break;case l.PROMPT_LOGIN:r();break;case l.ACTIVATE:chrome.runtime.sendMessage({action:o});break;case l.OPT_OUT:chrome.runtime.sendMessage({action:o,time:c});break;case l.ADD_KEYFRAMES:T(a);break;default:break}},k=F;var K=({walletAddressListeners:e,getWalletAddress:t,iframeEl:r})=>{for(let n=0;n<e.length;n++){let s=e[n];s&&window.addEventListener(s,async o=>{if(!r&&(r=document.querySelector(`#bringweb3-iframe:${chrome.runtime.id}`),!r)||!r.contentWindow)return;let i=await t();r.contentWindow.postMessage({action:"WALLET_ADDRESS_UPDATE",walletAddress:i},"*")})}},x=K;var h=null,D=!1,V=async({getWalletAddress:e,promptLogin:t,walletAddressListeners:r,customTheme:n,iframeEndpoint:s})=>{if(!e||!t||!r?.length||!s)throw new Error("Missing configuration");x({walletAddressListeners:r,getWalletAddress:e,iframeEl:h}),window.addEventListener("message",o=>k({event:o,iframeEl:h,promptLogin:t})),chrome.runtime.onMessage.addListener((o,i,a)=>{let{action:c}=o;switch(c){case"GET_WALLET_ADDRESS":return e().then(g=>a({status:"success",walletAddress:g})).catch(g=>a({status:"success",walletAddress:void 0})),!0;case"INJECT":if(D)return;let{token:p,page:m}=o;return h=E({query:{token:p},iframeSrc:m==="notification"?`${s}notification`:s,theme:n}),D=!0,a({status:"success"}),!0;default:console.error(`Unknown action: ${c}`);break}})},Q=V;var u=class e{static instance=null;apiEndpoint="";constructor(){}static getInstance(){return e.instance||(e.instance=new e),e.instance}setApiEndpoint(t){this.apiEndpoint=t==="prod"?"https://api.bringweb3.io/v1/extension":"https://sandbox-api.bringweb3.io/v1/extension"}getApiEndpoint(){if(!this.apiEndpoint)throw new Error("API endpoint not set. Call setApiEndpoint first.");return this.apiEndpoint}};var B=async e=>{let t=u.getInstance().getApiEndpoint();return await(await fetch(`${t}/domains?country=us`,{headers:{"x-api-key":e}})).json()},C=B;var G=async({apiKey:e,query:t})=>{let r=u.getInstance().getApiEndpoint(),n=f({query:{...t,country:"us"}});return await(await fetch(`${r}/token?${n.toString()}`,{headers:{"x-api-key":e}})).json()},v=G;var J=async({apiKey:e,walletAddress:t,cashbackUrl:r})=>{let n=u.getInstance().getApiEndpoint(),s={walletAddress:t,test:!0};return r&&(s.cashbackUrl=r),await(await fetch(`${n}/check-events`,{method:"POST",headers:{"Content-Type":"application/json","x-api-key":e},body:JSON.stringify(s)})).json()},P=J;var w="updateCache";var H=async(e,t)=>{chrome.storage.local.set({[e]:t})},Y=async e=>(await chrome.storage.local.get(e))[e],z=async e=>{chrome.storage.local.remove(e)},d={set:H,get:Y,remove:z};var S=30*60*1e3,M=async e=>{let t=await d.get("walletAddress");try{if(!e){let n=await chrome.tabs.query({active:!0,currentWindow:!0});if(!n||!n[0]||!n[0].id)return t;e=n[0].id}let r=await A(e,{action:"GET_WALLET_ADDRESS"});r?.walletAddress&&t!==r?.walletAddress&&(t=r?.walletAddress,await d.set("walletAddress",t))}catch{}return t},X=e=>{let t=Date.now();return(e-t)/1e3/60},R=async e=>{let t=await C(e);d.set("relevantDomains",t.relevantDomains);let{nextUpdateTimestamp:r}=t,n=X(r);chrome.alarms.create(w,{delayInMinutes:n})},Z=async(e,t,r,n)=>{let s={showNotification:!1,token:""},o=await d.get("notificationCheck");if(o?.check&&Date.now()<o.check)return s;let i=await M(t);if(!i)return s;let a=await P({apiKey:e,walletAddress:i,cashbackUrl:r}),c={check:n?a.nextRequestTimestampActivated:a.nextRequestTimestampRegular,nextRequestTimestampActivated:a.nextRequestTimestampActivated,nextRequestTimestampRegular:a.nextRequestTimestampRegular};return d.set("notificationCheck",c),{showNotification:a.showNotification,token:a.token}},ee=e=>e.replace(/^(https?:\/\/)?(www\.)?/,""),O=async e=>{let t=await d.get("relevantDomains");if(!e||!t||!t.length)return"";let r=ee(e);for(let n of t)if(r.startsWith(n)){let s=await d.get("quietDomains");return s&&s[n]&&Date.now()<s[n]?"":n}return""},L=async(e,t)=>{t||(t=S);let r=await d.get("quietDomains");typeof r=="object"?r[e]=Date.now()+t:r={[e]:Date.now()+S},d.set("quietDomains",r)},te=e=>e?chrome.runtime.getURL(e):void 0,A=async(e,t)=>{for(let s=0;s<5;s++)try{let o=await chrome.tabs.get(e);return chrome.runtime.lastError?void 0:await chrome.tabs.sendMessage(e,t)}catch{s<4&&await new Promise(i=>setTimeout(i,1e3*Math.pow(2,s)))}},I=async(e,t,r)=>{let n=await Z(e,t,te(r));n.showNotification&&await A(t,{action:"INJECT",token:n.token,page:"notification"})},y={},ne=async({identifier:e,apiEndpoint:t,cashbackPagePath:r})=>{if(!e||!t)throw new Error("Missing configuration");if(!["prod","sandbox"].includes(t))throw new Error("unknown apiEndpoint");u.getInstance().setApiEndpoint(t),R(e),chrome.alarms.onAlarm.addListener(async n=>{let{name:s}=n;switch(s){case w:R(e);break;default:console.error("alarm with no use case:",s);break}}),chrome.runtime.onMessage.addListener(async(n,s)=>{let{action:o,time:i}=n;switch(o){case"ACTIVATE":let a=await d.get("notificationCheck");if(!a.check||!a.nextRequestTimestampActivated)break;a.check=a.nextRequestTimestampActivated,d.set("notificationCheck",a);break;case"OPT_OUT":d.set("optOut",Date.now()+i);break;case"CLOSE":let c=await O(s.tab?.url||s.origin);if(!c)break;L(c,i);break;default:console.warn(`Bring unknown action: ${o}`);break}}),chrome.tabs.onUpdated.addListener(async(n,s,o)=>{let i=await d.get("optOut");if(i&&i>Date.now()){await I(e,n,r);return}if(!o.url)return;let a=new URL(o.url),c=`${a.hostname.replace("www.","")}${a.pathname}`,p=y[n];if(s.status!=="complete"||c===p)return;y[n]=c;let m=await O(o.url);if(!m||!m.length){await I(e,n,r);return}let g=await M(n),{token:N,isValid:_}=await v({apiKey:e,query:{domain:m,url:o.url,address:g}});if(!_){L(m);return}A(n,{action:"INJECT",token:N,domain:c})}),chrome.tabs.onRemoved.addListener(n=>delete y[n])},re=ne;export{re as bringInitBackground,Q as bringInitContentScript};

package/index.ts

@@ -0,0 +1,7 @@
+import bringInitContentScript from "./bringInitContentScript.js"
+import bringInitBackground from "./bringInitBackground.js"
+
+export {
+    bringInitBackground,
+    bringInitContentScript
+}

package/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "@bringweb3/chrome-extension-kit",
+  "version": "1.0.0",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "license": "MIT",
+  "private": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "watch": "tsup index.ts --format cjs,esm --dts --watch",
+    "build": "tsup index.ts --format cjs,esm --dts --minify",
+    "lint": "tsc",
+    "test": "vitest --coverage",
+    "release": "yarn build & changeset publish"
+  },
+  "devDependencies": {
+    "@changesets/cli": "^2.27.7",
+    "@types/chrome": "^0.0.268",
+    "@vitest/coverage-v8": "^2.0.5",
+    "tsup": "^8.2.1",
+    "typescript": "^5.5.3",
+    "vitest": "^2.0.5"
+  }
+}

package/tests/getQueryParams.test.ts

@@ -0,0 +1,23 @@
+import getQueryParams from '../utils/getQueryParams'
+import { describe, it, expect } from 'vitest'
+
+describe('getQueryParams', () => {
+    it('return params', () => {
+
+        const query = { param1: 'value1', param2: 'value2' }
+        const params = getQueryParams({ query })
+
+        expect(params).toEqual('param1=value1&param2=value2')
+    })
+    it('return empty string', () => {
+        const params = getQueryParams({ query: {} })
+
+        expect(params).toEqual('')
+    })
+    it('adds prefix', () => {
+        const query = { param1: 'value1', param2: 'value2' }
+        const params = getQueryParams({ query, prefix: 't' })
+
+        expect(params).toEqual('t_param1=value1&t_param2=value2')
+    })
+})

package/tsconfig.json

@@ -0,0 +1,12 @@
+{
+  "compilerOptions": {
+    "module": "commonjs", /* Specify what module code is generated. */
+    "target": "es2023", /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
+    "esModuleInterop": true, /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */
+    "forceConsistentCasingInFileNames": true, /* Ensure that casing is correct in imports. */
+    "strict": true, /* Enable all strict type-checking options. */
+    "skipLibCheck": true, /* Skip type checking all .d.ts files. */
+    "noUncheckedIndexedAccess": true, /* Add 'undefined' to a type when accessed using an index. */
+    "noEmit": true, /* Disable emitting files from a compilation. */
+  }
+}

package/types.d.ts

@@ -0,0 +1,25 @@
+type WalletAddress = string | undefined
+
+type Endpoint = 'sandbox' | 'prod';
+
+type IFrame = HTMLIFrameElement | null
+
+interface Style {
+    [key: string]: string
+}
+
+interface KeyFrame {
+    name: string
+    rules: string
+}
+
+interface BringEvent {
+    data: {
+        from: string
+        action: string
+        style?: Style[]
+        keyFrames?: KeyFrame[]
+        extensionId: string
+        time?: number
+    }
+}

package/utils/api/checkEvents.ts

@@ -0,0 +1,33 @@
+import { ApiEndpoint } from "../apiEndpoint";
+
+interface CheckEventsProps {
+    apiKey: string;
+    walletAddress: string
+    cashbackUrl: string | undefined;
+}
+
+interface Body {
+    walletAddress: string;
+    cashbackUrl?: string;
+    test?: boolean
+}
+
+const checkEvents = async ({ apiKey, walletAddress, cashbackUrl }: CheckEventsProps) => {
+    const endpoint = ApiEndpoint.getInstance().getApiEndpoint()
+    const body: Body = { walletAddress, test: true }
+    if (cashbackUrl) body.cashbackUrl = cashbackUrl;
+
+    const res = await fetch(`${endpoint}/check-events`, {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+            'x-api-key': apiKey
+        },
+        body: JSON.stringify(body)
+    })
+    const json = await res.json()
+
+    return json
+}
+
+export default checkEvents;

package/utils/api/fetchDomains.ts

@@ -0,0 +1,16 @@
+import { ApiEndpoint } from "../apiEndpoint"
+
+const fetchDomains = async (apiKey: string) => {
+    const endpoint = ApiEndpoint.getInstance().getApiEndpoint()
+
+    const res = await fetch(`${endpoint}/domains?country=us`, {
+        headers: {
+            'x-api-key': apiKey
+        }
+    })
+    const json = await res.json()
+    // console.log({ json });
+    return json
+}
+
+export default fetchDomains

package/utils/api/validateDomain.ts

@@ -0,0 +1,28 @@
+import { ApiEndpoint } from "../apiEndpoint";
+import getQueryParams from "../getQueryParams";
+
+interface ValidateDomainProps {
+    apiKey: string,
+    query: {
+        url: string,
+        domain: string,
+        address: WalletAddress,
+        country?: string
+    }
+}
+
+const validateDomain = async ({ apiKey, query }: ValidateDomainProps) => {
+    const endpoint = ApiEndpoint.getInstance().getApiEndpoint()
+    const params = getQueryParams({ query: { ...query, country: 'us' } })
+
+    const res = await fetch(`${endpoint}/token?${params.toString()}`, {
+        headers: {
+            'x-api-key': apiKey
+        }
+    })
+    const json = await res.json()
+    // console.log({ json });
+    return json
+}
+
+export default validateDomain;

package/utils/apiEndpoint.ts

@@ -0,0 +1,28 @@
+
+export class ApiEndpoint {
+  private static instance: ApiEndpoint | null = null;
+  private apiEndpoint: string = '';
+
+  private constructor() {
+  }
+
+  public static getInstance(): ApiEndpoint {
+    if (!ApiEndpoint.instance) {
+      ApiEndpoint.instance = new ApiEndpoint();
+    }
+    return ApiEndpoint.instance;
+  }
+
+  public setApiEndpoint(endpoint: string): void {
+    this.apiEndpoint = endpoint === 'prod'
+      ? 'https://api.bringweb3.io/v1/extension'
+      : 'https://sandbox-api.bringweb3.io/v1/extension';
+  }
+
+  public getApiEndpoint(): string {
+    if (!this.apiEndpoint) {
+      throw new Error('API endpoint not set. Call setApiEndpoint first.');
+    }
+    return this.apiEndpoint;
+  }
+}

package/utils/constants.ts

@@ -0,0 +1,2 @@
+export const UPDATE_CACHE_ALARM_NAME = 'updateCache'
+export const CHECK_EVENTS_ALARM_NAME = 'checkEvents'

package/utils/contentScript/addKeyFrames.ts

@@ -0,0 +1,20 @@
+const addKeyframes = (keyFrames: KeyFrame[] | undefined): void => {
+
+    if (!keyFrames || !keyFrames.length) return
+
+    const style = document.createElement('style');
+
+    document.head.appendChild(style);
+
+    const sheet = style.sheet;
+
+    if (sheet) {
+        keyFrames.forEach(({ name, rules }) => {
+            sheet.insertRule(`@keyframes ${name} { ${rules} }`, sheet.cssRules.length);
+        })
+    } else {
+        console.error('Failed to create stylesheet');
+    }
+}
+
+export default addKeyframes;

package/utils/contentScript/applyStyles.ts

@@ -0,0 +1,11 @@
+const applyStyles = (element: IFrame, style: Style[] | undefined) => {
+    if (!element || !style || !Object.keys(style).length) return;
+
+    Object.entries(style).forEach(([key, value]) => {
+        if (key in element.style) {
+            (element.style as any)[key] = value;
+        }
+    });
+}
+
+export default applyStyles;

package/utils/contentScript/handleIframeMessages.ts

@@ -0,0 +1,56 @@
+import applyStyles from "./applyStyles"
+import addKeyframes from "./addKeyFrames"
+
+interface Props {
+    event: BringEvent
+    iframeEl: IFrame
+    promptLogin: () => Promise<WalletAddress>
+}
+
+const ACTIONS = {
+    OPEN: 'OPEN',
+    CLOSE: 'CLOSE',
+    ACTIVATE: 'ACTIVATE',
+    PROMPT_LOGIN: 'PROMPT_LOGIN',
+    OPT_OUT: 'OPT_OUT',
+    ADD_KEYFRAMES: 'ADD_KEYFRAMES'
+}
+
+const UNION_ACTIONS = [ACTIONS.ACTIVATE]
+
+const handleIframeMessages = ({ event, iframeEl, promptLogin }: Props) => {
+    const { data } = event
+    const { from, action, style, keyFrames, time, extensionId } = data
+
+    if (from !== 'bringweb3') return
+
+    // If the event comes from another extension that installed our package, ignore it (unless it ACTIVATE action)
+    if (extensionId !== chrome.runtime.id && !UNION_ACTIONS.includes(action)) return
+
+    switch (action) {
+        case ACTIONS.OPEN:
+            applyStyles(iframeEl, style)
+            break;
+        case ACTIONS.CLOSE:
+            if (iframeEl) iframeEl.parentNode?.removeChild(iframeEl)
+            if (time) chrome.runtime.sendMessage({ action, time })
+            break;
+        case ACTIONS.PROMPT_LOGIN:
+            promptLogin()
+            break;
+        case ACTIONS.ACTIVATE:
+            chrome.runtime.sendMessage({ action })
+            break;
+        case ACTIONS.OPT_OUT:
+            chrome.runtime.sendMessage({ action, time })
+            break;
+        case ACTIONS.ADD_KEYFRAMES:
+            addKeyframes(keyFrames)
+            break;
+        default:
+            // console.log('Non exist ACTION:', action);
+            break;
+    }
+}
+
+export default handleIframeMessages;

package/utils/contentScript/injectIFrame.ts

@@ -0,0 +1,36 @@
+import getQueryParams from "../getQueryParams";
+
+interface Query {
+    [key: string]: string
+
+}
+
+interface Props {
+    query: Query
+    theme?: Style
+    iframeSrc: string
+}
+
+const injectIFrame = ({ query, theme, iframeSrc }: Props): HTMLIFrameElement => {
+    const extensionId = chrome.runtime.id;
+    const params = getQueryParams({ query: { ...query, extensionId } })
+    const customStyles = theme ? `&${getQueryParams({ query: theme, prefix: 't' })}` : ''
+    const iframe = document.createElement('iframe');
+    iframe.id = `bringweb3-iframe:${extensionId}`;
+    iframe.src = `${iframeSrc}?${params}${customStyles}`;
+    iframe.setAttribute('sandbox', "allow-popups allow-scripts allow-same-origin allow-top-navigation-by-user-activation")
+    iframe.style.position = "fixed";
+    iframe.scrolling = "no";
+    iframe.style.overflow = "hidden";
+    iframe.style.width = "1px";
+    iframe.style.height = "1px";
+    iframe.style.right = "8px";
+    iframe.style.borderRadius = "10px";
+    iframe.style.border = "none";
+    iframe.style.cssText += `z-index: 99999999999999 !important;`;
+    if (theme?.popupShadow) iframe.style.boxShadow = theme.popupShadow;
+    document.documentElement.appendChild(iframe);
+    return iframe
+}
+
+export default injectIFrame;

package/utils/contentScript/startLIstenersForWalletAddress.ts

@@ -0,0 +1,30 @@
+interface Props {
+    walletAddressListeners: string[],
+    getWalletAddress: () => Promise<WalletAddress>
+    iframeEl: IFrame
+}
+
+const startListenersForWalletAddress = ({ walletAddressListeners, getWalletAddress, iframeEl }: Props) => {
+    for (let i = 0; i < walletAddressListeners.length; i++) {
+        const eventName = walletAddressListeners[i]
+        if (!eventName) continue
+        window.addEventListener(eventName, async (e) => {
+            // console.log('NEW EVENT');
+            // console.log(e.detail);
+
+
+            if (!iframeEl) {
+                iframeEl = document.querySelector(`#bringweb3-iframe:${chrome.runtime.id}`)
+                if (!iframeEl) return
+            }
+            if (!iframeEl.contentWindow) {
+                return
+            }
+            const address = await getWalletAddress()
+
+            iframeEl.contentWindow.postMessage({ action: 'WALLET_ADDRESS_UPDATE', walletAddress: address }, '*')
+        });
+    }
+}
+
+export default startListenersForWalletAddress;

package/utils/getQueryParams.ts

@@ -0,0 +1,27 @@
+interface Query {
+    [key: string]: string | undefined
+
+}
+
+interface props {
+    query: Query
+    prefix?: string
+}
+
+const getQueryParams = (props: props) => {
+    const params = new URLSearchParams()
+    const { query, prefix } = props
+
+    Object.entries(query).forEach(([key, value]) => {
+        if (!value) return
+        if (prefix) key = `${prefix}_${key}`
+        if (key === 'url') {
+            params.append(key, encodeURIComponent(value))
+        } else {
+            params.append(key, value)
+        }
+    })
+    return params.toString()
+}
+
+export default getQueryParams

package/utils/storage.ts

@@ -0,0 +1,25 @@
+const set = async (key: string, value: any) => {
+    chrome.storage.local.set({ [key]: value });
+}
+
+const get = async (key: string) => {
+    const data = await chrome.storage.local.get(key)
+    return data[key]
+}
+
+const remove = async (key: string) => {
+    chrome.storage.local.remove(key)
+}
+
+// const clear = async () => {
+//     chrome.storage.local.clear(() => {
+//         console.log('Cache cleared successfully')
+//     })
+// }
+
+export default {
+    set,
+    get,
+    remove,
+    // clear
+}