@snickerdoodlelabs/synamint-extension-sdk v1.0.1

@snickerdoodlelabs/synamint-extension-sdk

Description

The @snickerdoodlelabs/synamint-extension-sdk serves as a powerful bridge for browser extensions, seamlessly connecting them to the expansive capabilities of Snickerdoodle Protocol. By integrating the SDK, your extensions can effortlessly harness the full suite of features found in the Snickerdoodle browser extension, offering users an enhanced and rewarding browsing experience.

🔒 Privacy First: Keep Your Data Private

Snickerdoodle prioritizes data privacy. Users can share data for rewards only with explicit consent. The SDK enables the collection of web2 data (browser activity and user demographics) and web3 data (blockchain activities). User data remains in their custody and is never accessed or shared without explicit consent. Explore our comprehensive data policy here.

🚀 Unlock New Capabilies for Your Extension

As a bridge to the Snickerdoodle Protocol, the SDK provides your extension with seamless access to every capability found in the Snickerdoodle browser extension like from anonymous data sharing to exclusive rewards through airdrops.

Installation

To install the package, use npm:

npm install @snickerdoodlelabs/synamint-extension-sdk

Setup

Choose one of the following options to set up the Snickerdoodle extension SDK in your project:

Automated Setup (Recommended)

1. Run the following command to automatically configure your extension using the provided script:

node node_modules/@snickerdoodlelabs/synamint-extension-sdk/shim.js

or you can add node_modules/@snickerdoodlelabs/synamint-extension-sdk/shim.js at the end of your build script in package.json

{

  // ... package.json
  scripts: {
    <your build command>: <your existing build script> && node_modules/@snickerdoodlelabs/synamint-extension-sdk/shim.js
  }
}

Follow the on-screen instructions to complete the configuration process. The script will detect your manifest file, copy the required bundle, and update your manifest settings.

Manual Setup

If you prefer manual setup or encounter issues with the automated script, follow these steps:

1. Locate Your Manifest File

If the automated script couldn't detect or configure your manifest file correctly, manually locate your manifest file (typically named manifest.json). This file is crucial for configuring your extension.

2. Copy the Bundle

Copy the bundled JavaScript file, `dataWalletProxy.bundle.js`, from the SDK into your extension's build directory. You can find this file in the injectables folder of the SDK.

cp node_modules/@snickerdoodlelabs/synamint-extension-sdk/injectables/dataWalletProxy.bundle.js <path/to/your/extension/build/>

Replace <path/to/your/extension/build/> with the actual path to your extension's build directory.

3. Update Your Manifest

Open your manifest file (manifest.json). Ensure it contains the necessary keys for permissions and web accessible resources.

{
  "permissions": ["tabs", "storage", "activeTab"],
  "web_accessible_resources": [
    {
      "resources": ["dataWalletProxy.bundle.js"],
      "matches": ["<all_urls>"]
    }
    // Add other web accessible resources if needed
  ]
  // ... other manifest configurations
}

Make sure to add the required permissions and include the injected bundle as a web accessible resource.

Usage

In background.ts

// background.ts

// Import the initializeSDKCore function and IExtensionSdkConfigOverrides from the SDK
import { initializeSDKCore } from "@snickerdoodlelabs/synamint-extension-sdk";
import { IExtensionSdkConfigOverrides } from "@snickerdoodlelabs/objects";

// Customize the SDK configuration
const sdkOptions: IExtensionSdkConfigOverrides = {
  // Your configuration options here
};

// Initialize the SDK with custom options
initializeSDKCore(sdkOptions);

// Your additional code here

In content.ts

// content.ts

// Import the initWebComponent function from the SDK
import { initWebComponent } from "@snickerdoodlelabs/synamint-extension-sdk/content";
import { IPaletteOverrides } from "@snickerdoodlelabs/objects";

// Customize the palette with overrides if needed
const paletteOverrides: IPaletteOverrides | undefined = {
  // Your palette override options here
};

// Initialize the web component
initWebComponent(paletteOverrides);

// Your additional code here

Configuration

Customize the behavior of the Snickerdoodle extension SDK by providing configuration overrides. You can adjust various settings to tailor the SDK to your extension's requirements.

initializeSDKCore(config: IExtensionSdkConfigOverrides)

initWebComponent(paletteOverrides?: IPaletteOverrides)

Troubleshooting

ECMAScript Version Compatibility

If you encounter compatibility issues with JavaScript features or failing builds, ensure that your environment supports ECMAScript 2020 (ES11) or later.

// Example vite.config.js
export default {
  // other Vite config options
  build: {
    target: 'es2020',
  },
};