Create Chrome Extension Using Vue The Easiest Way

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: https://github.com/BroJenuel/BroJenuelBlogChromeExtension. 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: https://developer.chrome.com/docs/webstore/publish/.

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!