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!