DEV Community


Handy note

dialaeke profile image Eke Enyinnaya Diala ・2 min read

Hello everyone. It is my first programming related post anywhere ever so bear with me.

I got interested in coding in my final year studying mechanical engineering in the university because;

a) I hated mechanical engineering. I got into it because I wanted to be like my father.

b). My grades were poor.

I decided to go into coding and the rest is history.

Recently, I find myself carrying a small note around because I did most of my reading on the web with a browser on a PC. Sometimes, I'd forget to go somewhere with my notes and I'd have to buy a new one. I racked up quite a number of notes which kind of defeated the whole purpose of taking notes because I could have notes related to one topic in different notes and wouldn't be able to find it when I needed it.

I installed quite a few extensions but they mostly opened a new tab. I just wanted a pop up to type in and after that download what I typed.

Last week I decided to make it myself and today it is on chrome web store with the name "Handy notes."

I used the vue web extension repository by klocal

GitHub logo Kocal / vue-web-extension

🛠️ A boilerplate for quickly starting a web extension with Vue, webpack 4, ESLint and more!


Build Status (Travis) Build Status (AppVeyor)

This template allows you to quickly start a web extension containing:



$ vue init kocal/vue-web-extension my-extension
$ cd my-extension
$ npm install
$ npm run build

npm run build

Build the extension into dist folder for production.

npm run build:dev

Build the extension into dist folder for development.

npm run watch

Watch for modifications then run npm run build.

to scaffold it.

I've made the it available for free on chrome web store and the code is available on github

GitHub logo ekediala / web-note-extension

Take notes as you surf the web.


Take notes as you surf the web.


I will hopefully do a post on how I made the extension for newbies like me and publish it.

I'd welcome reviews and criticism. Thank you for your patience reading through my babble.

Here's what the extension looks like in use.

handy notes image

Discussion (0)

Editor guide