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.

<p>
    <h4>How to build an extension</h4>
    <div>
        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.
        <br>
        I hope you know about making a simple extension using the aforementioned technologies.
        <br>
        If not then no worries, here is a good explanation about chrome extensions for us by the mercy of God.
        <br>
        <a href="https://developer.chrome.com/extensions">
            Know a detailed description of chrome extensions.
        </a>
    </div>
</p>

<p>
    <h4>How to build extensions in Vuejs</h4>
    <div>
        Your wait ends here. Let’s start exploring Vuejs in extensions.
        <br>
        Before starting, I assumed that you have already installed Npm and Node
        Modules in your machine or installed them from
        <a href="https://www.digitalocean.com/community/tutorials/how-to-install-node-js-on-ubuntu-18-04">
            Install Nodejs and NPM.
        </a>
        <br>

        We also need to install Vue-CLI as well.
        <p style="color:#34495E ;background:#F7F7F7;margin:9px;padding:2px 4px;font-weight:bold">
            $ npm install -g @vue/cli
        </p>

        After completing the installation let’s follow the
        <a href="https://github.com/Kocal/vue-web-extension">Vue boilerplate</a> to
        quickly install the Vue dependencies.

        <p style="color: #34495E;background:#F7F7F7;margin:9px;padding:2px 4px;font-weight:bold">
            $ vue init kocal/vue-web-extension my-vue-extension
        </p>

        This will ask you a few questions, here is the snapshot of what I answered, you
        can handle it as per your convenience.

        <br><br>
            <figure><img alt="" src="https://readybytes.in/media/pages/blog/chrome-extensions-in-vuejs/f45429ac73-1611996407/installation.png"></figure>
        <br>

        Now change your directory to the freshly installed Vue-extension.
        <p style="color: #34495E;background:#F7F7F7;margin:9px;padding:2px 4px;font-weight:bold">
            $ cd  my-vue-extension
        </p>

        Here you will see how Vue boilerplate has set up a nice configuration for us to
        build extensions smoothly with
        <a href="https://router.vuejs.org/">Vue Router</a>,
        <a href="https://vuex.vuejs.org/">Vuex</a>
        and much more. You can check the
        <span style="color: #008000">manifest.json</span>
        file and <span style="color:#008000">background.js</span>
        file to know the basic configuration about the extension.

        <br><br>

        To run the extension, we need to make the build of it first by running this command
        <p style="color: #34495E;background:#F7F7F7;margin:9px;padding:2px 4px;font-weight:bold">
            $  npm  run  build
        </p>

        <i>
            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.
        </i>

        <br><br>

        Now run the below command which will track your modifications every time you make inside your code.
        <p style="color: #34495E;background:#F7F7F7;margin:9px;padding:2px 4px;font-weight:bold">
            $ npm  run  watch:dev
        </p>

        Now let’s check how our extension is working.

        <ul>
            <li>
                Open the <span style="color:#3D8CB9">chrome://extensions/</span> URL in your browser and toggle on the Developer mode at
                the top right corner of the web page.
            </li>
            <li>
                Now click on the button Load Unpacked at the top left corner. This will open the window
                which will say <b>“select your extension directory”</b>.
            </li>
            <li>
                Make sure that you are selecting the <span style="color: #DD4A67">dist</span> directory of extension.
            </li>
            <li>
                After that, if you see an alert prompt then you have successfully
                built your first extension in Vue js.
                <br>
            </li>
        </ul>
        <br>
        <figure><img alt="" src="https://readybytes.in/media/pages/blog/chrome-extensions-in-vuejs/d82a641c3f-1611996407/alert-after-installation.png"></figure>
        <br>
        Let’s understand what stuff is going on here -
        <ol>
            <li>
                <b>manifest.json</b> -
                Contains basic info about the extension. You can see it here.
                <br><br>
                <figure><img alt="" src="https://readybytes.in/media/pages/blog/chrome-extensions-in-vuejs/ef070606cb-1611996407/extension-overview.png"></figure>
                <br>
            </li>
            <li>
                <b>background.js</b> -
                This script will run in the background every time we load the extension
                or on behalf of events defined in the manifest.json file.
                <a href="https://developer.chrome.com/extensions/background_pages">
                    (Know more about background events).
                </a>
            </li>
            <li>
                <b>dist</b> -
                build of the extension
            </li>
            <li>
                <b>store</b> -
                Vuex (state,action,mutation,getters etc.)
            </li>
            <li>
                <b>popup</b> -
                This directory contains two directories -
                <ul>
                    <li>
                        <b>Vue Router</b> -
                        The <span style="color: #DD4A67">router</span> directory which
                        defines all the routes inside
                        <span style="color: #008000">routes.js</span> file.
                    </li>
                    <li>
                        <b>Vue Pages</b> -
                        the <span style="color: #DD4A67">Pages</span> directory
                         where all the pages can be defined.
                    </li>
                </ul>
                When you click on the extension icon at the top right corner you will
                get a popup message "Hello World".
                <br><br>
                <figure><img alt="" src="https://readybytes.in/media/pages/blog/chrome-extensions-in-vuejs/18266f7332-1611996407/popup1.png"></figure>
                <br>
                Let's try to understand what is happening here.
                <br>
                <i>In <span style="color: #008000">popup.js</span>
                the <a href="https://vuex.vuejs.org/">Vuex Store</a>
                and <a href="https://router.vuejs.org/">Vue Router</a> have been imported and the
                newly created Vue instance is using id  <b>#app</b>  (Which is the id of an
                element inside <span style="color: #008000">popup.html</span> file.)
                and it is rendering the component named <span style="color: #008000">App.vue
                </span> in DOM. Here we can see the <span style="color: #008000">App.vue</span>
                using <b>router-view</b> which imports the component of home path (‘/’) and at
                <span style="color: #008000">router.js</span> the home
                path is serving the component <span style="color: #008000">PageIndex.vue</span>
                at location <span style="color: #DD4A67">pages/Index.vue</span>
                and inside this file the text “Hello World” has written.</i>
            </li>
        </ol>
        <b>Gotcha !! you figured out how Vue is playing in your extension.</b>
        <br>
        Now you understand how you can make your own components inside the popup directory and
        use them on different routes.
    </div>
</p>

<p>
    <h4>How to inject Vue extension into any other web page</h4>
    <div>
        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
        <a href="https://developer.chrome.com/extensions">https://developer.chrome.com/extensions</a>
        then the extension should inject my custom component (any) inside the web page.
        <br>
        This can be done by making a <a href="https://developer.chrome.com/extensions/content_scripts">
        Content Script </a> (Content scripts are files that run in the context of web pages).
        <br>
        So the fun begins from here. Let’s grab it.
        <br>
        <ol>
            <li>
                Make a content folder inside the src directory <span style="color: #DD4A67">(src/content)</span>
                then create a content.js file inside this <span style="color: #DD4A67">(src/content/content.js)</span>.
            </li>
            <li>
                Now open your <span style="color: #008000">manifest.json</span> file and do some changes inside it.
                <br><br>
                <script src="https://gist.github.com/Nehasoni988/0cddd93f617b49e86cf7618ea661e811.js"></script>
                <br>
                You can see that I have given the path of <span style="color: #008000">content.js</span> which should be loaded when the web-page
                matches the URL <a href="https://developer.chrome.com/extensions">https://developer.chrome.com/extensions</a>.
            </li>
            <li>
                Now make a component named <span style="color: #008000">Content.vue</span> inside the content directory <span style="color: #DD4A67">(src/content/Content.vue)
                </span> and do some stuff inside it.
                <br><br>
                <script src="https://gist.github.com/Nehasoni988/8b0668c692bcb7129e3c5c02d92323b9.js"></script>

            </li>
            <li>
                Now paste the below code inside <span style="color: #008000">content.js</span> file.
                <br><br>
                <script src="https://gist.github.com/Nehasoni988/b32192eece7aa816115ac300b0b491bb.js"></script>
                <i>
                    What I am doing here is I import the <a href="https://vuejs.org/">Vue</a> and
                    <span style="color: #008000">Content.vue</span> component which will render inside
                    the webpage element having id <b>'#topnav'</b> ( you can take any other element id ).
                </i>
            </li>
            <li>
                Now the last thing to do is update your <span style="color: #008000">webpack.config.js</span> file's entry.
                which will tell the <span style="color: #DD4A67">dist</span> directory
                to update itself by giving entry to <span style="color: #008000">content.js</span> file.
                <br><br>
                <script src="https://gist.github.com/Nehasoni988/090bc2f979b007e01f7bf6d9e3368a96.js"></script>
                <br>
            </li>
            <li>
                Now make a build of your extension by running the command.
                <p style="color: #34495E;background:#F7F7F7;margin:9px;padding:2px 4px;font-weight:bold">
                    $ npm run build
                </p>
            </li>
            <li>
                Go to the URL <a href="https://developer.chrome.com/extensions">https://developer.chrome.com/extensions</a>
                here you can see that your component is successfully loaded inside this webpage.
                <br><br>
                <figure><img alt="" src="https://readybytes.in/media/pages/blog/chrome-extensions-in-vuejs/ac770a5c80-1611996407/component-injection.png"></figure>
                <br>
                <p>
                    <b>Imp: </b>If you can not see the changes at web page then do two things -
                    <ul>
                        <li>Open your file system and go into your extension directory and delete
                            the existing dist folder.
                        </li>
                        <li>
                            Come back to editor and make the build again by running the build command (mentioned above)
                        </li>
                        <li>
                            Reload the extension from <span style="color:#3D8CB9">chrome://extensions/</span> dashboard.
                        </li>
                    </ul>
                </p>
            </li>
        </ol>
        <b>Congratulations !! You have done a lot.</b>
    </div>
</p>
<p>
    <h4>Conclusion</h4>
    <div>
        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.
        <br>
        Happy codification in extension :)
    </div>
</p>
blog comments powered by Disqus