1

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

4
  • When you wrote "and stores it in his account", which kind of account should that be if not the one on a server (of yours?) where the user is registered? If that's the case, of course you need a server-side app. Or do you have a 3rd party service in mind, like Google Drive, Amazon Cloud Drive or Microsoft OneDrive? Then you can utilize that and use their API instead of developing your own.
    – Doc Brown
    Feb 4 '20 at 6:55
  • ... Concerning PWAs: I am not an expert on this, but after following the pointers in this older SO question, I think detecting the current selection is most probably not possible without a browser extension.
    – Doc Brown
    Feb 4 '20 at 7:01
  • @DocBrown I plan on using my own server. So I need an extension and a backend then. What would the connection between the extension and the web app be then? Do I build two separate projects (and thus two separate git repos) that communicate to each other, or is there somehow a way to have my web app have an extension, or my extension have a backend?
    – epilef
    Feb 4 '20 at 23:46
  • You need a frontend part (as a browser extension, maybe more than one if you want to support different browsers) and a backend which communicate to each other. If you manage the source code of them in one or two repos is mostly independent from that decision.
    – Doc Brown
    Feb 5 '20 at 7:01
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:

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.