I want to build a Chrome extension that allows all users to be able to submit a chat or string and it shows up on all other users' screens. This will later be adapted to fit further needs but this is what I have been trying to accomplish so far.
My understanding is that this cannot be done with chrome.storage because that does not store data on the cloud that can be received by another user with the extension downloaded. This has led me to find a cloud storage system that suits my needs. Originally I tried Firebase which I got to work with Manifest V2 but since I wanted to future-proof it I tried migrating the working example to V3 and found that it was very unlikely it was going to happen. This is the repository that worked for V2 but I could not adapt for V3. I found that Manfiest V3 and Firestore have become less compatible than Manfiest V2 and Firestore and even after following guides like this I still had no luck due to there not being much compatibility anymore and very few resources out there that weren't for authentication.
I have now tried Supabase which is an alternative to Firestore with a little more luck but still haven't had great success. I've been hitting dead ends for a week now. I assume the SQL database that Supabase offers is a step in the right direction but maybe there is a better way.
All I need is an easy way to store text with maybe an id# and name that is on the cloud and can be populated and accessed via a Chrome extension.
If anyone knows of a better method to achieve this or a solution to my Supabase code below that would be amazing! Thanks!
This is my attempt at accessing the table called "test_chat" I have in my Supabase database. The table is populated with two columns and a row of data. The printout from this code is below.
manifest.json:
{
"manifest_version": 3,
"name": "Supabase Table Printer",
"version": "1.0",
"permissions": ["storage", "scripting"],
"action": {
"default_popup": "popup.html"
},
"background": {
"service_worker": "background.js",
"type": "module"
}
}
background.js:
chrome.runtime.onInstalled.addListener(function() {
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
if (request.action === 'printTableContents') {
const supabaseUrl = 'HERE';
const tableName = 'test_chat';
const apiKey = 'HERE';
fetch(`${supabaseUrl}/rest/v1/${tableName}`, {
headers: {
'apikey': apiKey
}
})
.then(response => response.json())
.then(data => {
console.log(data);
})
.catch(error => {
console.error('Error fetching table contents:', error);
});
}
});
});
popup.js:
document.addEventListener('DOMContentLoaded', function() {
var printButton = document.getElementById('printButton');
printButton.addEventListener('click', function() {
chrome.runtime.sendMessage({ action: 'printTableContents' });
});
});
popup.html:
<!DOCTYPE html>
<html>
<head>
<title>Supabase Table Printer</title>
<script src="popup.js"></script>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js"></script>
<button id="printButton">Print Table Contents</button>
</body>
</html>
service-worker console prinout:
[]length: 0[[Prototype]]: Array(0)
Note: I have installed the package like so "npm install @supabase/supabase-js" and followed the basis of the Supabase documentation here while adapting it for a Chrome extension.