Using Vue.js to develop Chrome browser plug-ins: from zero to one
Chrome browser extensions are powerful tools that provide users with a richer browsing experience. In this blog, we will explore how to use the Vue.js framework to build a Chrome browser plug-in.
Step 1: Preparation
First, make sure you have Node.js and Vue CLI installed. If it is not installed yet, you can install Vue CLI by running the following command in the terminal:
npm install -g @vue/cli
Step 2: Create Vue.js project
Using the Vue CLI, we can easily create a new Vue.js project. In the terminal, run the following command to create a new Vue project:
vue create chrome-extension-vue-example
Then, choose the default configuration or manual configuration to set it up according to your needs. Make sure you check the Babel and Linter / Formatter options in manual configuration.
Step 3: Build Configuration
In a Vue.js project, you need a configuration file to handle the construction and packaging of the project (here I use webpack and some plug-ins). Add the following content to the vue.config.js file:
const CopyWebpackPlugin = require("copy-webpack-plugin");
const path = require("path");
const packageName = "chrome-extension-vue-example";
const copyFiles = [
{<!-- -->
from: path.resolve("src/manifest.json"),
to: path.resolve(packageName, "manifest.json")
},
{<!-- -->
from: path.resolve("public"),
to: path.resolve(packageName)
}
];
const plugins = [
new CopyWebpackPlugin({<!-- -->
patterns: copyFiles
})
];
module.exports = {<!-- -->
pages: {<!-- -->
popup: {<!-- -->
entry: `src/popup/popup.js`,
template: `src/popup/popup.html`,
filename: `popup.html`
}
},
productionSourceMap: false,
outputDir: path.join(__dirname, packageName),
configureWebpack: {<!-- -->
watch: true,
entry: {<!-- -->
content: "./src/content-scripts/content-script.js",
background: "./src/background/background.js",
popup: "./src/popup/popup.js",
},
output: {<!-- -->
filename: "js/[name].js" //Output path
},
plugins,
optimization: {<!-- -->
splitChunks: false // Splitting is not allowed. If the file is too large during packaging, it will be split into several files by webpack.
}
},
css: {<!-- -->
extract: {<!-- -->
filename: "css/[name].css" // Extract CSS
}
}
};
In this Webpack configuration file, we use the CopyWebpackPlugin plug-in to copy the contents of the manifest.json and public folders to the packaged in directory
Project structure:
Structure after construction
package.json
{<!-- -->
"name": "chrome-extension",
"version": "0.1.0",
"private": true,
"scripts": {<!-- -->
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {<!-- -->
"core-js": "^3.8.3",
"vue": "^3.2.13"
},
"devDependencies": {<!-- -->
"@babel/core": "^7.12.16",
"@babel/eslint-parser": "^7.12.16",
"@vue/cli-plugin-babel": "~5.0.0",
"@vue/cli-plugin-eslint": "~5.0.0",
"@vue/cli-service": "~5.0.0",
"copy-webpack-plugin": "^6.0.2",
"eslint": "^7.32.0",
"eslint-plugin-vue": "^8.0.3"
},
"eslintConfig": {<!-- -->
"root": true,
"env": {<!-- -->
"node": true
},
"extends": [
"plugin:vue/vue3-essential",
"eslint:recommended"
],
"parserOptions": {<!-- -->
"parser": "@babel/eslint-parser"
},
"rules": {<!-- -->}
},
"browserslist": [
">1%",
"last 2 versions",
"not dead",
"not ie 11"
]
}
Step 4: Write the Chrome plug-in manifest file (manifest.json)
The Chrome browser plug-in requires a manifest file to define the basic information of the plug-in. In the root directory of your project, create a manifest.json file and define the name, version, icon and other information of the plug-in. The following is an example manifest.json file:
{<!-- -->
"manifest_version": 3,
"name": "Vue Chrome Extension",
"version": "1.0",
"default_locale": "en",
"permissions": [
],
"background": {<!-- -->
"service_worker": "js/background.js"
},
"action": {<!-- -->
"default_title": "popup",
"default_icon": {<!-- -->
"16": "assets/icon/16.png"
},
"default_popup": "popup.html"
},
"icons": {<!-- -->
"16": "assets/icon/16.png",
"48": "assets/icon/48.png",
"128": "assets/icon/128.png"
},
"content_scripts": [
{<!-- -->
"js": ["js/content.js" ],
"css": ["css/content.css"],
"matches": ["<all_urls>" ],
"run_at": "document_idle"
}
]
}
In the above manifest file, we define the name, version, permissions, icon and other information of the plug-in. default_popup specifies the popup page of the plug-in, which we will create in the next step.
Step 5: Use Vue to create a pop-up page
1.popup.html file
In your Vue project, create a file named popup.html to be used as the popup page of the plug-in. In this page, you can use Vue.js to build your user interface. Here is a simple popup.html example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>popup</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
Vue component in 2.popup
In a Vue project, you can write components according to the normal Vue.js development method. For example, create a component named App.vue:
<template>
<div class="example">
hello, this is chrome extension vue
</div>
</template>
<style scoped>
.example {
align-items: center;
display: flex;
position: relative;
margin: 0 16px;
}
</style>
3.popup.js content, introduce VUE components
import {<!-- --> createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')
4.popup renderings
Step 6: Build your content-script using vue
content-script.js is injected into a specific browser page to run. We declared in manifest.json that the JS will be injected into all browser pages. Next, let’s see how to use vue to build content-script. a page
content-script.js file
/* eslint-disable */
// Create an anchor point using native JS and render the vue component to this anchor point
import {<!-- -->createApp} from 'vue'
import App from './App.vue'
window.onload = function () {<!-- -->
createExample()
}
function createExample() {<!-- -->
const container = document.createElement('div');
container.setAttribute('id', 'example-content-app')
container.setAttribute('style', 'position: absolute;\
' +
'display: flex;\
' +
' top: 50%;\
' +
' width: 400px;\
' +
' left: 50%;\
' +
' height: 400px;\
' +
' transform: translate(-50%, -50%);\
' +
' align-items: center;\
' +
' justify-content: center;\
' +
' background: #507ebf45;\
' +
' border: 1px solid rgba(0, 0, 0, 0.05);\
' +
' box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);\
' +
' border-radius: 12px;')
document.body.appendChild(container)
const url = window.location.href;
console.log(url)
const app = createApp(App,{<!-- -->url: url}) // Demonstrate how to pass values to components
app.mount('#example-content-app');
}
chrome.runtime.onMessage.addListener(function(request)
{<!-- -->
if (request.target === 'CONTENT' & amp; & amp; request.from === 'BACKGROUND') {<!-- -->
}
});
2.vue component in content-script
<template>
<div class="example">
hello, this is chrome extension vue. URL: {<!-- -->{ url }}
</div>
</template>
<script>
export default {
props: {
URL: String
}
}
</script>
<style scoped> // scoped means that this CSS only takes effect in this component to avoid affecting elements on the page.
.example {
align-items: center;
display: flex;
position: relative;
margin: 0 16px;
font-size: 24px;
font-weight: 700;
}
</style>
3. Renderings
Step 7: Build and load the plugin
In your Vue project, run the following command to build the plugin:
vue-cli-service build
This will generate the built plugin file in the chrome-extension-vue-example directory. Set the chrome-extension-vue-example directory as the root directory of your Chrome plug-in and load the plug-in into the Chrome browser.
Project source code: https://github.com/ordersheet/chrome-extension/tree/main/chrome-extension
(This code is just a simple example and does not have complex functions. If you want to know how to implement more complex functions, you can refer to my previous article)
The above is a complete guide to using Vue.js to develop Chrome browser plug-ins from scratch. I hope this blog is helpful to you, and I wish you happy development!