23 March, 2020

Chrome extension in Vuejs (v.2.x)

how extension can be build effectively using Vuejs.
Hey everyone,
  • 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

Extensions are built in web technology HTML, CSS, and Javascript, just like a 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.

$ vue init kocal/vue-web-extension my-vue-extension

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 Vue Router, Vuex and much more. You can check the manifest.json 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, it will pipe any .vue files through the Vue-loader and output a JavaScript bundle which 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 -
  1. manifest.json - Contains basic info about the extension. You can see it here.


  2. background.js - This script will run in the background every time we load the extension or on behalf of events defined in the manifest.json file. (Know more about background events).
  3. dist - build of the extension
  4. store - Vuex (state,action,mutation,getters etc.)
  5. popup - This directory contains two directories -
    • Vue Router - The router directory which defines all the routes inside routes.js file.
    • 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.
    In popup.js 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 https://developer.chrome.com/extensions 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.
  1. Make a content folder inside the src directory (src/content) then create a content.js file inside this (src/content/content.js).
  2. Now open your manifest.json file and do some changes inside it.


    You can see that I have given the path of content.js which should be loaded when the web-page matches the URL https://developer.chrome.com/extensions.
  3. Now make a component named Content.vue inside the content directory (src/content/Content.vue) and do some stuff inside it.

  4. Now paste the below code inside content.js file.

    What I am doing here is I import the Vue and Content.vue component which will render inside the webpage element having id '#topnav' ( you can take any other element id ).
  5. Now the last thing to do is update your webpack.config.js file's entry. which will tell the dist directory to update itself by giving entry to content.js file.


  6. Now make a build of your extension by running the command.

    $ npm run build

  7. Go to the URL https://developer.chrome.com/extensions here you can see that your component is successfully loaded inside this webpage.


    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.

Conclusion

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 :)

blog comments powered by Disqus