MagicSync v1 - browser extension

Demo

Getting Started

1. Install the necessary dependencies:

   npm install 

2. Build the project:

   npm run build 

3. Add the extension to your browser. To do this, go to chrome://extensions/, enable developer mode (top right), and click "Load unpacked". Select the build directory from the dialog which appears and click "Select Folder".

4. That's it! You should now be able to open the extenion's popup and use the model in your browser!

Source

All source code can be found in the ./src/ directory:

• background.js (service worker) - handles all the requests from the UI, does processing in the background, then returns the result. You will need to reload the extension (by visiting chrome://extensions/ and clicking the refresh button) after editing this file for changes to be visible in the extension.

• content.js (content script) - contains the code which is injected into every page the user visits. You can use the sendMessage api to make requests to the background script. Similarly, you will need to reload the extension after editing this file for changes to be visible in the extension.

• popup.html, popup.css, popup.js (toolbar action) - contains the code for the popup which is visible to the user when they click the extension's icon from the extensions bar. For development, we recommend opening the popup.html file in its own tab by visiting chrome-extension://<ext_id>/popup.html (remember to replace <ext_id> with the extension's ID). You will need to refresh the page while you develop to see the changes you make.