DEV Community

Cover image for Deja-Vu your AI✦ Bookmarking Tool
Sanket Kalekar
Sanket Kalekar

Posted on

Deja-Vu your AI✦ Bookmarking Tool

An AI powered Chrome Extension which offers a seamless way to find bookmarks. by @sanket-kalekar

Installation

1) Clone the installation repo locally by

git clone https://github.com/ooye-sanket/Deja-Vu-Installation-Files.git
Enter fullscreen mode Exit fullscreen mode

Image description

OR

Download the ZIP files

Image description

2) Go to Chrome(or any Chromium-based browsers like Brave, Opera etc.) and click on the Kebab Menu on the top-right and go to "Extensions" > "Manage Extensions".

Image description

3) Switch ON the Developer Mode at the top-right corner.

Image description

4) Click on Load Unpack at the top-left corner

Image description

5) Choose the directory in which you cloned the repo-and click Open

Image description

🎉 The extension has been installed.

Image description

Running the Project Locally

  1. Clone the repo and enter the project directory:
   git clone https://github.com/ooye-sanket/deja-vu
   cd Deja-Vu
Enter fullscreen mode Exit fullscreen mode
  1. Install the necessary dependencies:
   npm install
Enter fullscreen mode Exit fullscreen mode
  1. Build the project:
   npm run build
Enter fullscreen mode Exit fullscreen mode
  1. 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".

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

Development

We recommend running npm run dev while editing the project as it will rebuild the project when changes are made.

All source code can be found in the ./src/ directory but the options (The page where you see all your bookmarks) will be found in .public/options.*:

  • 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.

  • 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.

Resources

Top comments (2)

Collapse
 
ooye_sanket profile image
Sanket Kalekar
Collapse
 
im45145v profile image
Info Comment hidden by post author - thread only accessible via permalink
ashish malla

Wow nice
am so proud of you that you were able to build a project like this
github.com/Sushants-Git/Deja-Vu

Some comments have been hidden by the post's author - find out more