how extension can be build effectively using Vuejs.
Have you searched a lot about build extension using Vue js?
Do you want to use your extension inside any other website ?
If one of your answers is Yes then you are at the right place to play bugle
in the extension field.
This article will surely help you.
Let’s start by understanding the extension first.
What are the extensions
Extensions are small software programs that customize the browsing experience.
They enable users to tailor Chrome functionality and behavior to individual
needs or preferences.
How to build an extension
normal web page you build regularly. However compared to web pages, extensions
use a lot of built-in Apis which makes them more interesting.
I hope you know about making a simple extension using the aforementioned technologies.
If not then no worries, here is a good explanation about chrome extensions for us by the mercy of God.
Know a detailed description of chrome extensions.
How to build extensions in Vuejs
Your wait ends here. Let’s start exploring Vuejs in extensions.
Before starting, I assumed that you have already installed Npm and Node
Modules in your machine or installed them from
Install Nodejs and NPM.
We also need to install Vue-CLI as well.
$ npm install -g @vue/cli
After completing the installation let’s follow the
Vue boilerplate to
quickly install the Vue dependencies.
This will ask you a few questions, here is the snapshot of what I answered, you
can handle it as per your convenience.
Now change your directory to the freshly installed Vue-extension.
$ cd my-vue-extension
Here you will see how Vue boilerplate has set up a nice configuration for us to
build extensions smoothly with
and much more. You can check the
file and background.js
file to know the basic configuration about the extension.
To run the extension, we need to make the build of it first by running this command
$ npm run build
When you run this command the boilerplate builds the extension into the dist folder,
the browser can understand.
Now run the below command which will track your modifications every time you make inside your code.
$ npm run watch:dev
Now let’s check how our extension is working.
Open the chrome://extensions/ URL in your browser and toggle on the Developer mode at
the top right corner of the web page.
Now click on the button Load Unpacked at the top left corner. This will open the window
which will say “select your extension directory”.
Make sure that you are selecting the dist directory of extension.
After that, if you see an alert prompt then you have successfully
built your first extension in Vue js.
Let’s understand what stuff is going on here -
Contains basic info about the extension. You can see it here.
Vue Router -
The router directory which
defines all the routes inside
Vue Pages -
the Pages directory
where all the pages can be defined.
When you click on the extension icon at the top right corner you will
get a popup message "Hello World".
Let's try to understand what is happening here.
the Vuex Store
and Vue Router have been imported and the
newly created Vue instance is using id #app (Which is the id of an
element inside popup.html file.)
and it is rendering the component named App.vue
in DOM. Here we can see the App.vue
using router-view which imports the component of home path (‘/’) and at
router.js the home
path is serving the component PageIndex.vue
at location pages/Index.vue
and inside this file the text “Hello World” has written.
Gotcha !! you figured out how Vue is playing in your extension.
Now you understand how you can make your own components inside the popup directory and
use them on different routes.
How to inject Vue extension into any other web page
You have seen how you can make an extension using Vuejs and run it in your browser.
What if you want your extension to behave differently at different sites ?
For example, If I would say that whenever I opened a URL let’s say
then the extension should inject my custom component (any) inside the web page.
This can be done by making a
Content Script (Content scripts are files that run in the context of web pages).
So the fun begins from here. Let’s grab it.
Make a content folder inside the src directory (src/content)
then create a content.js file inside this (src/content/content.js).
Now open your manifest.json file and do some changes inside it.
Imp: If you can not see the changes at web page then do two things -
Open your file system and go into your extension directory and delete
the existing dist folder.
Come back to editor and make the build again by running the build command (mentioned above)
Reload the extension from chrome://extensions/ dashboard.
Congratulations !! You have done a lot.
Hope you were able to find out what you were searching for.
This article is just about the important configurations towards making an extension in Vuejs
and using it on different web pages. Just play by making mini extensions using Vuejs and use your extension
to change the behavior of web pages.
If you find any difficulties in configurations then please let us know in the comment box. We will get back to you ASAP.
Happy codification in extension :)