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
