A chrome extension for finding the meaning of a word.
The word noema in greek means mental object. Since words are mental objects, I thought the name fits the usecase for the extension.
- Shows the meaning of the word along with its source in a drawer that pops from the bottom of the page.
- Highlights all the words which match the selected word.
- Copies the selected word to the clipboard.
- Opens a new tab with a google search of the word.
I observed that, I often used this feature in my iphone. In IOS, this is a native feature. The experience of using this feature was pretty delightful and useful. So I thought building something similar but for the web would be fun. Plus an attempt to build something apple-like is in itself a good excersie to understand how well the apple folks master the details of all their interactions.
- Clone the repo.
git clone git@github.com:{your_username}/noema.git
2 Go in the noema folder and run this command
npm run build
3 Go to the manage extensions page of your browser.
Note: Here the instructions are based on chrome.
4 On the top right side click on the three vertical dots.
5 Click on Extensions -> Manage Extensions and a new page will open.
6 On the top right side, turn on the developer mode.
7 On the top left side, click on an option called Load Unpacked.
8 Go to the noema folder and select the dist folder and the extension should appear.
Screen.Recording.2024-04-28.at.1.50.00.AM.mov
If you click on any of the extensions installed in the browser, a menu appears. We will call this a popup menu. Chrome extensions give you the ability to design this popup menu as per your own liking.
This is nothing between but rather your good old document object just like any other website has. But the the thing is this document object does not have any link with the document object which is rendered to you by the browser allowing you to see a website. So to do something in the popup and make it affect something in the website felt a bit difficult initially. You sort of have to send messages between the two document objects. Drawing these states was helpul in visualizing that logic.
Icon used for the logo:
Dictionary icons created by PixelVerse - Flaticon
Article used for recording the video: https://daily.stoa.com/newsletter/on-good-taste