Demystify

Video Demo: text

Description:

DEMYSTIFY is a Fire-Fox web extension that utilizes the power of Artificial Intelligence to simplify and summarize text content for the user. This Project is broken into two applications.

1. Web Extension
2. Backend Server

Project Structure:

demystify ├── backend │ ├── services │ │ └── simplify.js │ ├── .env │ ├── app.js │ ├── package.json ├── web_extensions │ ├── dist │ │ ├── imgs │ │ │ └── logo.png │ │ ├── background.bundle.js │ │ └── content.bundle.js │ ├── src │ │ ├── imgs │ │ │ └── logo.png │ │ ├── utils │ │ │ ├── bootstrapInjector.js │ │ │ ├── contentInjector.js │ │ │ ├── eventListeners.js │ │ │ └── utils.js │ │ ├── background.js │ │ └── main.js │ ├── .babelrc │ ├── manifest.json │ ├── package-lock.json │ ├── package.json │ ├── README.md │ └── webpack.config.js

GETTING STARTED

WEB EXTENSION(FRONTEND):

From the root directory of the project you can run the following instructions to get your web_extension ready

cd ../web_extension

1. The above command will navigate from the root directory to the web_extension directory.

npm install

2. The above command will install all the necessary packages for your project to run.

npm run build

3. The above command will build and bundle your javascript and assests.

about:debugging#/runtime/this-firefox

4. Enter the above in the search bar of firefox browser to open the debug section

5. Select Load Temporary Add-on and navigate to the project directory. Go tho the web_extension directory and select the manifest.json

BACKEND:

cd ../backend

1. The above command will navigate from the root directory to the backend directory

npm install

2. The above command will install all the necessary packages for your backend to run.

npm run start-dev

3. The above command this will run the backend in development mode.

npm run start

3. The above command this will run the backend in production mode.

WEB EXETENSION (Frontend):

The web extension consists of a manifest, content script, background script, and utility functions. The entire web extension is bundled using webpack.

• manifest: Contains information about the web extension, such as the manifest version, actions, and scripts that the extension runs
• content script: The main script that runs on every active tab in the user's browser.
• background script: Communicates with our backend and sends responses back to the content script.
• utility functions: Functions that inject bootstrap, inject a button, scrape the web page for the main content section, and display results back to the users

Utility Functions

1. utils.js => The utility file has the following functions : isVisible(element): This function checks if the element passed as an argument is visible on the screens by checking that the offsetWidth and offsetHeight are greater than zero and the length of getClientRects() is greater than zero. This function then returns a boolean value. isSideBar(element): This function uses regex to check the className of the element for common names used to denote a sidebar, navbar, rightbar, leftbar, or menu. Then this function will return a boolean value. isContent(element): This function checks if the offset Width and Height of the element is greater than 300px then return a boolean value. createDemystifyButton(): This function returns an html button as a string
2. bootstrapInjector.js injectBootrap(): This functions injects bootstrap scripts and link into the head section of the page. The function will first use a querySelectorAll tp get all the link elements in the head section. Then links will be checked for a href that contains the word "bootstrap" as part of the href. Then if no matching link is found then the bootstrap link is injected at the top of the head section. This decision to inject it at the top allows an web pages native styles not to be overpowered by bootstrap.
3. contentInjector.js injectContent(content): This function takes in a content array as an argument (in this context a content refers to html elements that match certain keywords). This function utilizes the functions defined in the utils.js to find the best element to inject a button into. The best element is basically an html section that has the highest word count, the element has to be a content element, it has to be visble, not a sidebar. When such an element is found then a button will be injected into the element.
4. eventListeners.js addDemystifyButtonEventListener(): This function checks the body for an element that has the class demystify and adds a click event listener. When the button is clicked a loading spinner will be displayed. Then the innerText of the grandparent element of the button is sent to the background script using the sendMessage function. Then the content script will wait for a response from the background script. Once a response is received an accordion is injected into the bottom of the page and the accordion will be brought into focus. The accordion has two buttons one to copy and the other to close. The eventlisteners of the buttons are attached. One is to copy the simplified text into the clipboard and the other button is to close the accordion.

Content Script

1. main.js: This is the main script that is executed when the web extension runs. This script imports injectBootstrap, injectConent, and addDemystifyButtonEventListener. This script will inject bootstrap, get the body element of the page, then use the querySelectorAll to find all the elments that match the keywords passed and save the response to an array called content. If the content array is not null or undefined inject content using the injectContent(content) function. After injecting content run the addDemystifyButtonEvenListener function to add functionality to the demystify button.

Background Script

1. background.js: getData(server_url,user_data): This function uses the fetch api to send a request to our backend sever and return the response to the caller. browser.runtime.onMessage.addListener: This function listens for events triggered by the content script. The specific event its listening for is called "simplify". When the event is triggered the function will use the getData function to to fetch data from our backend server. If there is a valid response from the server then send the JSONified response it to the caller.

Webpack

1. webpack.config.js: This is a configuration file for webpack. This configuration is used when building the web extension. This bundles the utilities with the content script. This configuration includes two plugins CleanWebpackPlugin and CopyPlugin. The CleanWebpackPlugin cleans the dist folder before building the bundles. The CopyPlugin creates copies for the assets used in the web extension.

Demystify Server (Backend):

This backend server is a simple express server that listens for a get and post request from our web extension.

Server

1. app.js: This is a basic nodeJs http server implemented using the express library This server uses express,morgan,simplify, and cors This server uses cors(), express.json(), express.urlencoded(), morgan() gunctions middleware The server listens on a specified port number. Endpoints
   • GET: This endpoint just returns simple text to the caller.
   • POST: This endpoint listens to this url, base_url/p The endpoint will look at the req for data payload of the body. The endpoint will also validate the data recieved via the request. Once the data is validated then the simplify function will be called. If the simplify function runs successfully then the data will be sent back as a response if the simplify returns an error then that error will be send back to the call where it will be handled gracefully.

Environment Variables

1. .env This environment file stores vital system data like the API_KEY, DATABASE_CONNECTION string or PORT

Services

1. simplify.js simplify(text): This function takes the text passed as an argument and makes a request to the Gemini endpoint. This request will include the prompt, input text and api key. Once Gemini responds that data is returned to the caller, if something goes wrong the returns an error