Skip to content
This repository has been archived by the owner on Jan 11, 2024. It is now read-only.

Getting started with the Data host library

Jump to bottom
Nikola Dimitroff edited this page Jan 23, 2022 · 6 revisions

What the data host library is and what can it do

The Fractal Protocol is a a blockchain-based protocol that can gather user data while securing it from malicious usage. This is possible as all of the data remains on the user's device while any access to it is controlled and anonymized. In exchange, the user is paid with some amount of FCL tokens.

If you are a browser extension developer, you might be interested in integrating our data host library which essentially embeds our wallet in your extension. This allows the user to access the Fractal Protocol through your extension. In exchange, you might charge some amount of FCL or accept FCL as a payment option for your services.

This document outlines how to use the library in your projects.

If you are interested in how the underlying tech works, have a [read here](INSERT LINK HERE).

Support

Reach out to us by opening a issue here on GitHub or, if you are unable or unwilling to talk about your issue in public, send us an email to [email protected]

Getting started

Install with

npm install TBA

Add these permissions to your manifest file:

  "content_security_policy": "script-src 'self' 'wasm-eval' 'unsafe-eval'; object-src 'self'",
  "permissions":[
     "tabs",
     "storage",
     "unlimitedStorage"
  ],

NOTE: We currently only support Manifest v.2. If you are using Manifest v.3, reach out to us to discuss our work-in-progress v.3 version.

In your popup.html, add the root element for our UI and include our script:

<head>
     ...
     <script defer src="data-host-build/popup.bundle.js"></script>
</head>
<body>
     ...
      <div id="fractal-data-host-container"></div>
</body>

Load your extension and our wallet should be right there! You probably want to hide our UI in a tab somewhere in your extension which would be very different depending on what you are building your app with (React, Angular, something else, etc.) so consult the docs of your app if you need further help.

Reference implementation

A minimal reference implementation can be found in the very same repo you are looking at. Feel free to copy as much or as little off of it to get your work started and don't hesitate to contact us for any questions you might have.

Clone this wiki locally