Create a Chrome Extension with Vite + Vue
Chrome extensions are a great way to enhance your browsing experience by adding additional functionality to the Chrome browser. In this tutorial, we’ll explore how to create a Chrome extension using Vite and Vue.js, two powerful tools for frontend development.
Getting Started
To begin, make sure you have Node.js installed on your machine. You can download it from the official website (https://nodejs.org/). Once Node.js is installed, open your terminal and run the following command to install Vite globally:
<span style="color:blue;">$ npm install -g create-vite
With Vite installed, let’s create a new Vue project for our Chrome extension. Run the following command in your terminal:
<span style="color:blue;">$ create-vite my-chrome-extension --template vue
This command will create a new directory called `my-chrome-extension` with a pre-configured Vue.js project structure. Change to the project directory using the following command:
<span style="color:blue;">$ cd my-chrome-extension
Building the Chrome Extension
Now that we have our project set up, let’s start building our Chrome extension. First, create a new directory called `chrome` in the root of your project. This directory will contain all the necessary files for our Chrome extension.
In the `chrome` directory, create a new file called `manifest.json`. This file serves as the main configuration file for your Chrome extension. Add the following content to the `manifest.json` file:
<span style="color:red;">{
"manifest_version": 2,
"name": "My Chrome Extension",
"version": "1.0.0",
"description": "A Chrome extension built with Vite + Vue",
"permissions": ["activeTab"],
"background": {
"scripts": ["background.js"],
"persistent": false
},
"browser_action": {
"default_popup": "index.html",
"default_icon": {
"16": "icon-16.png",
"48": "icon-48.png",
"128": "icon-128.png"
}
},
"icons": {
"16": "icon-16.png",
"48": "icon-48.png",
"128": "icon-128.png"
}
}
In this manifest file, we specify the name, version, and description of our Chrome extension. We also declare the required permissions and define the background scripts that will run in the background. Additionally, we define the browser action, which is the main UI element of our extension.
Next, create a new JavaScript file called `background.js` in the `chrome` directory. This file will contain the background script of our Chrome extension. Add the following content to the `background.js` file:
<span style="color:green;">chrome.action.onClicked.addListener((tab) => {
chrome.scripting.executeScript({
target: { tabId: tab.id },
files: ["contentScript.js"]
});
});
In this background script, we’re adding a click event listener to the browser action. When the browser action is clicked, the content script `contentScript.js` will be executed on the active tab.
Now, let’s create the content script. In the `chrome` directory, create a new JavaScript file called `contentScript.js`. This file will contain the logic that will be injected into web pages. For simplicity, let’s add a simple console log statement:
<span style="color:purple;">console.log("Hello from content script!");
Adding Chrome Extension UI
Now that we have the necessary background and content scripts, let’s create the UI for our Chrome extension using Vue.js. In the root of your project, open the `index.html` file and replace the existing content with the following code:
<span style="color:orange;"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Chrome Extension</title>
</head>
<body>
<div id="app">
<h1>Welcome to my Chrome extension!</h1>
</div>
<script src="/src/main.js"></script>
</body>
</html>
In this file, we’re creating a simple heading element inside a `div` element with the id `app`. This is the root element of our Vue.js application.
Finally, open the `src/main.js` file and replace the existing content with the following code:
<span style="color:brown;">import { createApp } from 'vue';
import App from './App.vue';
createApp(App).mount('#app');
In this file, we’re importing the `createApp` function from Vue.js and mounting our Vue.js application to the `#app` element.
Building and Testing the Extension
With everything in place, let’s build our Chrome extension. Open the terminal and run the following command from the root of your project:
<span style="color:blue;">$ npm run build
This command will create a `dist` directory containing the optimized and production-ready version of our Chrome extension.
Next, open the Chrome browser and go to `chrome://extensions`. Toggle the developer mode on, and click on the “Load unpacked” button. Select the `dist` directory and click “Open”.
Congratulations! Your Chrome extension is now installed. You should see the browser action icon in the Chrome toolbar. When you click on it, the Vue.js application will be loaded, displaying the “Welcome to my Chrome extension!” message.
Conclusion
In this tutorial, we learned how to create a Chrome extension using Vite and Vue.js. We explored the basic file structure, manifest configuration, background and content scripts, and building and testing the extension. Chrome extensions can be a powerful tool to enhance your browsing experience, and combining Vite and Vue.js makes the development process fast and efficient.
Now that you have the foundation, feel free to further customize your Chrome extension by adding more functionality and UI elements using Vite and Vue.js. Happy coding!
just send dist file in your vue project to fu*ing extension project. overwhalming!
when build project, chrom console says Uncaught (in promise) Error: Could not establish connection. Receiving end does not exist.
I couldn't figure it out
Thanks!😀 Is it possible to inject a vue component (like a button for example) on the web page? And how to do it ?
Hey. Great tutorial. Thanks!
However, can you please explain in /src/manifest.json there is no css content_script, but in /dist/manifest.json we have:
"css": [
"content-scripts/main.d828ac0f.css"
]
How did you do that?
how about using ts?
Theres no vite-vue-chrome-extension package in yarn. Can you give any help in this situation?
I'm having problems with my styles not working on my vue templates. already removed the scope tag
老铁你好
great video, thank you man.
Awesome stuff dude! This is really helpful for Vite noobs like me 🙂
I have only one question: Is it possible to use Vite's HMR while developing the chrome extension?
So basically what I want to do is fire up vite, make changes in the code and then load the extension – without having to write `yarn build` every single time I make a change.
Edit: I tried `yarn build –watch` but I always get this error
Generated an empty chunk: "manifest"
[chrome-extension] There were problems with the extension manifest.
so useful tutorial