Building a VueJS Tips Chrome Extension With VueJS

We all Know About VueJS by now, which is a progressive framework for building web apps but if you don’t know you can check my previous post to get started. We would be using it today for building a simple tips generator for VueJS which would be used to remember tips about the framework and increase the simplicity for learning VueJS \_(:))_/.

First before we start ,you can download the code here to follow along.

Go to the Directory you want to put your project and create this files

the asset folder is where your main app code is, which contain the app.js and the data.js, we also have manifest.json that contain a configuration setting for making the chrome extension while the vue.js is the vue library but this is the content security policy version that allow us make our app secure which we would be using for the chrome extension. So open the index.html and add this to it.

I believe you are already familiar with vueJS, here we are just telling vue to import the script and the styles, then outputting string to HTML and also listening to click event.go to the data.js file and add this code to it.

Ok what did we do here, we created a simple object and called it structs which we hold all the structure of this app is like the backend for the app,it stores the vue data which is an object that have an array of tips ,initial tips,initial code, counter ,tipsLeft, twitter handle and Tip, which are all output for the app. Still in the structure let add methods for the structure like generate tips, generate random tip and one that handle logic for click event.

first we create a method called getRandomNumber that return a random number from the length of the tips in the data object, we also created another method that generate random tip and code with the random number and assign the tip and code to the Tip object that has a code and tip which we output in the HTML with the v-HTML in index.html because some of the array items have HTML inside, make sense now right, then finally we added a method that handle the logic for button click, so when i user click it would reduce the tips left by 1 and add 1 to the counter only if the counter is less than 5 but when the counter is 5 we change the state of the tips left to zero and also add a disable class of the tip button. Go to the app.js and add the other code snippet.

Here we made an instance of Vue, which have an element of app. Data from the “structs” variable in the data.js file and also have a method that handle a click event, that when been called upon we call the logic from the “structs” which we created.then finally go to the manifest.json and add this to it.

i believe that this is self explanatory.Let make our app now a chrome extension,Go to the URL in your chrome enter chrome://extensions,then click the developer mode checkbox, and click the load unpack entension….. button, which would open your file directory, navigate to where your project is and click select.you should get this when you open a new tab.

time get some Hi 5 :).

thanks to Codecademy , this tutorial was inspired by them.I hope you enjoyed it, you can also contribute to the project so we can make Vue more simple and awesome for people to learn.Thanks for reading.