Buy Me A Coffee 😇
Cover Image Create Chrome Extension Using Vue The Easiest Way

Create Chrome Extension Using Vue The Easiest Way

/ In this article, Let us look at how easy it is to create a Chrome extension using VueJS. Google Chrome extensions are programs you can install in your Chrome browser to help you automate certain functions in your browser, modify existing behaviors, and improve your software's convenience.

May. 31, 2023. 11:28 AM

Let us first create a new project by running this command and answer some of the questions. For this example, I'm going to press enter on everything.

npm init vue@latest

Then we can now go to our project by cd vue-project and let us install our packages. For me I am going to use yarn to install dependences, and then yarn dev to run the project.

cd vue-project && yarn && yarn dev

It should run, and show something like this, it means our app is working fine.

Now, that our app is working properly. Create a manifest.json inside the public folder with this content something like this, also make sure to create/add your Logo.png file in the public folder. And You can change the content of this manifest.json file.

    "manifest_version": 3,
    "name": "BroJ Extension Example",
    "description": "This is our sample extension",
    "version": "1.0",
    "action": {
        "default_popup": "index.html",
        "default_icon": "Logo.png"

Thats It! now to test it out, lets run this command to build.

yarn build

Now, open your Chrome browser and go to chrome://extensions/ and make sure to toggle developer mode.

and then click load unpacked and select your dist folder of your vue project.

Then after adding dist. A new extension will be added that looks like this.

And then you now click pin your extension to show your extension icon. For me I have this icon, so after pinning it I can just open my extension by clicking it.

THAT'S IT! 🙌😁 Now, you can just modify the content you want to show. This is a sample of what I created. Here is the source Code: This is my extension. I don't like sending annoying emails to my readers, but if you want to be updated on my latest articles, you can use this extension BroJenuelArticle-Extension Download.

If you like to publish your extension, you can read how to publish here:

Cheers! and have a great day! 😁❤️‍🩹🍻

If you enjoy this article and would like to show your support, you can easily do so by buying me a coffee. Your contribution is greatly appreciated!

Jenuel Ganawed Buy me Coffee