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
Kocal
/
vue-web-extension
🛠️ A boilerplate for quickly starting a web extension with Vue, webpack 4, ESLint and more!
vue-web-extension
This template allows you to quickly start a web extension containing:
- Boilerplate for
manifest.jsonandbackground.jsfiles, and foricons/popupfolders - Vue
- Vue-router (configurable)
- Vuex (configurable)
- Axios (configurable)
- Webpack 4
- Babel with preset-env
- ESLint (configurable)
- Prettier (configurable)
- A git precommit hook for running Prettier by using pretty-quick or precise-commits (configurable)
- CSS extraction, with mini-css-extract-plugin
- Compliable with the Content Security Policy of Chrome and Firefox web stores (some usages
evalare removed) - A script to package your extension into a
.zipfile
Requirements
Usage
$ 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.
I've made the it available for free on chrome web store and the code is available on github
ekediala
/
web-note-extension
Take notes as you surf the web.
web-note-extension
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.
Top comments (0)