Building a Chrome Extension with Vue 3 – A Beginner’s Guide
Chrome extensions enhance browser functionality, allowing users to customize their browsing experience. If you’re a Vue 3 developer, building a Chrome extension can be an excellent way to extend your skills and create useful tools. In this guide, we’ll walk you through the process of developing a Chrome extension using Vue 3, step by step.
1. Understanding Chrome Extensions
A Chrome extension consists of various components, including a manifest file, background scripts, content scripts, and a user interface. These elements work together to modify browser behavior, interact with web pages, or introduce new functionalities.
Key Components of a Chrome Extension:
- Manifest File – Defines extension metadata and permissions.
- Content Scripts – Run in web pages and modify content.
- Background Scripts – Manage events and listen for browser actions.
- Popup UI – The visible part of the extension that users interact with.
2. Setting Up Your Vue 3 Project
Before we begin, make sure you have Node.js and Vue CLI installed. If not, install them using:
cd chrome-extension-vue
3. Configuring the Manifest File
The manifest.json file is the core of your Chrome extension. It defines permissions, background scripts, and UI elements.
Inside your public folder, create a new file named manifest.json and add the following content:
{
“name”: “Vue 3 Chrome Extension”,
“version”: “1.0”,
“manifest_version”: 3,
“action”: {
“default_popup”: “index.html”,
“default_icon”: “icon.png”
},
“permissions”: [“storage”],
“background”: {
“service_worker”: “background.js”
},
“content_scripts”: [
{
“matches”: [“<all_urls>”],
“js”: [“content.js”]
}
]
}
Explanation:
- manifest_version: 3 – The latest Chrome extension format.
- action – Defines the popup UI and default icon.
- permissions – Lists what the extension can access.
- background – Includes a background script for handling logic.
- content_scripts – Injects scripts into web pages.
4. Creating the Extension UI
Now, let’s modify App.vue to create a simple popup UI:
<template>
<div class=”popup”>
<h1>Vue 3 Extension</h1>
<button @click=”showMessage”>Click Me</button>
</div>
</template>
<script>
export default {
methods: {
showMessage() {
alert(“Hello from Vue 3 Extension!”);
}
}
}
</script>
<style>
.popup {
width: 200px;
padding: 10px;
text-align: center;
}
</style>
Explanation:
- Displays a simple h1 header.
- A button triggers an alert when clicked.
- Styled using basic CSS for a clean UI.
5. Adding Background and Content Scripts
In the public folder, create background.js:
chrome.runtime.onInstalled.addListener(() => {
console.log(“Vue 3 Chrome Extension Installed!”);
});
Conclusion
Building a Chrome extension with Vue 3 is a great way to expand your development skills while creating useful tools. By following this guide, you’ve successfully built a basic Chrome extension with a Vue-powered popup UI, background scripts, and content scripts.
Want to take it further? Add API integrations, dynamic styling, or additional Chrome permissions to enhance functionality.
Ready to build your own extension? Start coding today and make something amazing! 🚀