Chrome Extensions

Integrating Eartho into Your Chrome Extension

This section describes how to integrate Eartho into a Chrome Extension.

1. Install the SDK

You can install the SDK using npm.

Using npm:

npm install @eartho/one-client-js
npm install @eartho/one-client-extension-browser

2. Retrieve Eartho Client ID and Access ID

Go to Eartho Creator and copy your Eartho client ID and access ID from the "Developers Integration" section.

3. Initialize and Configure the SDK

Integrate Eartho into your Chrome Extension by configuring the SDK and handling authentication.

Example Code:

background.js

Add the following code to initialize and handle authentication in your background script.

// background.js
import { createEarthoOne } from '@eartho/one-client-js';
import { EarthoOneExtensionBrowser } from '@eartho/one-client-extension-browser';

// Initialize Eartho
const earthoOne = createEarthoOne({
  clientId: 'YOUR_EARTHO_CLIENT_ID',
});

const earthoOneExtensionBrowser = new EarthoOneExtensionBrowser({ earthoOne });

chrome.runtime.onInstalled.addListener(() => {
  chrome.action.onClicked.addListener((tab) => {
    earthoOneExtensionBrowser.connectWithPopup({ accessId: 'YOUR_EARTHO_ACCESS_ID' })
      .then(() => {
        console.log('Connected to Eartho');
        earthoOneExtensionBrowser.getUser().then(user => {
          console.log('User:', user);
        });
      })
      .catch(error => {
        console.error('Error:', error);
      });
  });
});

popup.html

Create a popup HTML file for your extension.

<!-- popup.html -->
<!DOCTYPE html>
<html>
<head>
  <title>Eartho Extension</title>
  <script src="popup.js" defer></script>
</head>
<body>
  <button id="login">Log in</button>
  <button id="logout" style="display:none;">Log out</button>
  <div id="user" style="display:none;">
    <p id="username"></p>
    <img id="userpic" />
  </div>
</body>
</html>

popup.js

Add the following code to handle authentication in your popup script.

// popup.js
import { createEarthoOne } from '@eartho/one-client-js';
import { EarthoOneExtensionBrowser } from '@eartho/one-client-extension-browser';

// Initialize Eartho
const earthoOne = createEarthoOne({
  clientId: 'YOUR_EARTHO_CLIENT_ID',
});

const earthoOneExtensionBrowser = new EarthoOneExtensionBrowser({ earthoOne });

document.addEventListener('DOMContentLoaded', () => {
  const loginButton = document.getElementById('login');
  const logoutButton = document.getElementById('logout');
  const userDiv = document.getElementById('user');
  const username = document.getElementById('username');
  const userpic = document.getElementById('userpic');

  loginButton.addEventListener('click', () => {
    earthoOneExtensionBrowser.connectWithPopup({ accessId: 'YOUR_EARTHO_ACCESS_ID' })
      .then(() => {
        return earthoOneExtensionBrowser.getUser();
      })
      .then(user => {
        username.textContent = `Hello, ${user.displayName}`;
        userpic.src = user.photoURL;
        loginButton.style.display = 'none';
        logoutButton.style.display = 'block';
        userDiv.style.display = 'block';
      })
      .catch(error => {
        console.error('Error:', error);
      });
  });

  logoutButton.addEventListener('click', () => {
    earthoOneExtensionBrowser.disconnect()
      .then(() => {
        loginButton.style.display = 'block';
        logoutButton.style.display = 'none';
        userDiv.style.display = 'none';
      })
      .catch(error => {
        console.error('Error:', error);
      });
  });
});

4. Update manifest.json

Update your manifest.json file to include the appropriate permissions and background script.

{
  "manifest_version": 3,
  "name": "Eartho Chrome Extension",
  "version": "1.0",
  "permissions": ["storage", "activeTab", "identity"],
  "background": {
    "service_worker": "background.js"
  },
  "action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "icons/icon16.png",
      "48": "icons/icon48.png",
      "128": "icons/icon128.png"
    }
  },
  "icons": {
    "16": "icons/icon16.png",
    "48": "icons/icon48.png",
    "128": "icons/icon128.png"
  }
}

Additional Resources

For more detailed examples and usage, visit the Eartho Chrome Extension Example Repository.

Last updated