How do I make my Browser Extension send a Selection it captured to a Database/Web App so it can be stored in the user's account?

Question

I am building a Browser Extension that captures a Selection made by the user in any web page, and stores it in his account. I don't quite know how to proceed with this, however.

My initial thought was that I had to build an extension for this functionality [capturing the Selection], and a web app to receive it and deal with it -- a back end to store the user's selections in a database, and a front end to present the saved selections in his account.

So I would have to build 2 separate projects, that somehow interact?

I've been doing research online for a couple of weeks now and I couldn't find definitive answers...

In this one: How do browser extensions interact with web apps? the answer had it that a back end would be necessary, which I can deduct, but what would be its relation to the extension? There was no specific answer. Because extensions don't have a back end, right? So it would have to be a separate thing that connects to the extension?

The same answer in the post above also mentioned how PWA's can have many of the functionality extensions have. In my case, would a PWA suffice? Because I need to listen for a user selection, but in any web page. (something like Web Clipper from Evernote, but I don't want to save the entire page, just the selections).

And that is why I thought of creating an extension in the first place, because it can access all pages a user visits, whereas if I use the Selection API in a web app, it would only work within the web app itself, right? I mean, it would only be able to capture the selections made in the web app's pages?

And if I really have to build two separate things, what would be the most efficient way to go about this? I mean, folder-wise, would it have to be different projects? Or just separate folders in the same project?

Sorry for the many doubts, but please give me some light in this one? If there is a better way of proceeding, or if I misunderstood any of the functionalities of an extension, web app, pwa, etc...

Any help will be very much appreciated!

Thanks

Answer 1

Here is the detailed solution I arrived at to grab the user selection from any webpage with the extension, and send it to the web application / server. I used one GitHub repo only.

How to connect a browser extension to a web application:

1. Develop the browser extension in its own folder

   • For this project specifically, we will need access to tabs and activeTab, which we declare in the manifest.json permissions;
   • The extension's content.js will listen for our desired event. In this case, I have it listening for a mouseup since I intend to grab the user selection when he releases the mouse button after selecting the desired text;
   • We can use chrome.runtime.sendMessage() to send content from content.js to background.js (in this case, the user selection);
   • background.js file will listen for a message from content.js with chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {...});
   • Upon receiving the message, we use the Fetch API to POST the data to the server.

2. Set up the backend

   • Define the model for the data (in this case a Note - the highlight made by the user and captured by the browser extension) and the database structure (I'm using MongoDB Atlas for this;

   • Have the appropriate routes/endpoints set up in the backend to receive and deal with the data, updating the database accordingly;

   • Here is also where all the auth stuff is gonna play out. I haven't implemented all of it, been using it locally.

3. Set up the frontend

   • Use the technology of your choice to design it and connect to the backend (I used the MEAN Stack for the project);

   • Make sure you update the frontend as the backend receives content from the extension.

I believe the steps don't have to be performed in that specific order.

Some of the links that helped me:

• Google's Extensions Dev Guide
• Messaging within the Extension
• The getSelection method