@bringweb3/chrome-extension-kit

Table of content

• Table of content
• Description
• Prerequisites
• Installing
  • Package
  • Manifest
• Importing
  • import
  • require
• Example
  • background.js
  • contentScript.js
• Contact us

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 >= V2 with required permissions
• Obtain an identifier key from Bringweb3
• Provide a specific logo for the specific outlet

Installing

Package

Using npm:

$ npm install @bringweb3/chrome-extension-kit

Using yarn:

$ yarn add @bringweb3/chrome-extension-kit

Using pnpm:

$ pnpm add @bringweb3/chrome-extension-kit

Manifest

Include this configuration inside your manifest.json file:

  "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/*"
  ]

Importing

Once the package is installed, you can import the library using import or require approach:

import

import { bringInitBackground } from '@bringweb3/chrome-extension-kit';

import { bringInitContentScript } from '@bringweb3/chrome-extension-kit';

require

const { bringInitBackground } = require('@bringweb3/chrome-extension-kit');

const { bringInitContentScript } = require('@bringweb3/chrome-extension-kit');

Example

background.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

import { bringInitContentScript } from "@bringweb3/chrome-extension-kit";

bringInitContentScript({
    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"], // An optional list of custom events that dispatched when the user's wallet address had changed, don't add it if you are using walletAddressUpdateCallback
    walletAddressUpdateCallback: (callback)=>{...}, //an optional function that runs when the user's wallet address had changed and execute the callback, don't add it if you are using walletAddressUpdateCallback
    themeMode: 'light' // 'light' | 'dark',
    text:'lower' // 'lower' | 'upper'
    darkTheme: {...}, // Same as lightTheme
    lightTheme: {
        // font
        fontUrl: 'https://fonts.googleapis.com/css2?family=Matemasie&display=swap',
        fontFamily: "'Matemasie', system-ui",
        // Popup
        popupBg: "#192E34",
        popupShadow: "",
        // Primary button
        primaryBtnBg: "linear-gradient(135deg, #5DEB5A 0%, #FDFC47 100%)",
        primaryBtnFC: "#041417",
        primaryBtnFW: "600",
        primaryBtnFS: "14px",
        primaryBtnBorderC: "transparent",
        primaryBtnBorderW: "0",
        primaryBtnRadius: "8px",
        // Secondary button
        secondaryBtnBg: "transparent",
        secondaryBtnFS: "12px",
        secondaryBtnFW: "500",
        secondaryBtnFC: "white",
        secondaryBtnBorderC: "rgba(149, 176, 178, 0.50)",
        secondaryBtnBorderW: "2px",
        secondaryBtnRadius: "8px",
        // Markdown
        markdownBg: "#07131766",
        markdownFS: "12px",
        markdownFC: "#DADCE5",
        markdownBorderW: "0",
        markdownRadius: "4px",
        markdownBorderC: "black",
        markdownScrollbarC: "#DADCE5",
        // Wallet address
        walletBg: "#33535B",
        walletFS: "10px",
        walletFW: "400",
        walletFC: "white",
        walletBorderC: "white",
        walletBorderW: "0",
        walletRadius: "4px",
        // Details of offering
        detailsBg: "#33535B",
        detailsTitleFS: "15px",
        detailsTitleFW: "600",
        detailsTitleFC: "white",
        detailsSubtitleFS: "14px",
        detailsSubtitleFW: "500",
        detailsSubtitleFC: "#A8ADBF",
        detailsRadius: "8px",
        detailsBorderW: "0",
        detailsBorderC: "transparent",
        detailsAmountFC: "#5DEB5A",
        detailsAmountFW: "700",
        // Overlay
        overlayBg: "#192E34E6",
        overlayFS: "13px",
        overlayFW: "400",
        overlayFC: "#DADCE5",
        loaderBg: "#0A2EC0",
        // Optout \ Turn off
        optoutBg: "#192E34",
        optoutFS: "14px",
        optoutFW: "400",
        optoutFC: "white",
        optoutRadius: "56px",
        // X Button and close buttons
        closeFS: "9px",
        closeFW: "300",
        closeFC: "#B9BBBF",
        // Token name
        tokenBg: "transparent",
        tokenFS: "13px",
        tokenFW: "600",
        tokenFC: "#DADCE5",
        tokenBorderW: "2px",
        tokenBorderC: "#DADCE5",
        tokenRadius: "8px",
        // Notification popup
        notificationFS: "14px",
        notificationFW: "500",
        notificationFC: "white",
        notificationBtnBg: "linear-gradient(135deg, #5DEB5A 0%, #FDFC47 100%)",
        notificationBtnFS: "12px",
        notificationBtnFW: "500",
        notificationBtnFC: "#041417",
        notificationBtnBorderW: "0",
        notificationBtnBorderC: "transparent",
        notificationBtnRadius: "8px",
        activateTitleFS: "14px",
        activateTitleFW: "600",
        activateTitleFC: "white",
        activateTitleBoldFS: "14px",
        activateTitleBoldFW: "700",
        activateTitleBoldFC: "white",
    }
});

Contact us

For more information: contact us