Background
Hey! To write the extension, I will use:
- Vuejs
- Vue Router
- Vitejs
- TailwindCSS
- SASS
To create a new project, run the command in the console:
npm init vite@latest chrome-extension -- --template vue-ts
To install TailwindCSS:
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
npx tailwindcss init -p
Updates tailwind.config.js:
module.exports = {
purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}
In the project I will use SASS to install it along with TailwindCSS, execute the following commands:
npm install postcss-import
Updates postcss.config.js:
module.exports = {
plugins: [
require('postcss-import'),
require('tailwindcss'),
require('autoprefixer'),
]
}
Install SASS with the command:
npm i -D sass
Create a main.scss file in the assets/scss folder with the following content:
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
html {
body {
#app {
height: 100%;
width: 100%;
overflow-x: hidden;
}
&.popup {
width: 357px;
min-height: 600px;
height: 600px;
max-height: 600px;
}
}
}
Connect the main.scss into the main.ts file
import './assets/scss/main.scss'
To install, run the command:
npm i -S vue-router@4.x
Create router/index.ts file with content:
import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'
const routes: Array<RouteRecordRaw> = [
{
path: '/',
name: 'Index',
component: () => import('../views/Index.vue')
},
{
path: '/about',
name: 'About',
component: () => import('../views/About.vue')
},
{
path: '/contacts',
name: 'Contacts',
component: () => import('../views/Contacts.vue')
},
]
const router = createRouter({
history: createWebHashHistory(),
routes
})
export default router
Connect the router/index.ts into the main.ts file
import router from './router'
For example pages, I created 3 files in the views folder: Index.vue, About.vue, Contacts.vue
Index.vue
<template>
<div class="flex flex-col items-start w-full p-6 pb-8">
<div class="flex flex-col items-center w-full p-6 space-y-8 mt-4">
<div class="flex flex-col items-center space-y-3">
<span class="text-base">Home</span>
</div>
</div>
</div>
</template>
About.vue
<template>
<div class="flex flex-col items-start w-full p-6 pb-8">
<div class="flex flex-col items-center w-full p-6 space-y-8 mt-4">
<div class="flex flex-col items-center space-y-3">
<span class="text-base">About</span>
</div>
</div>
</div>
</template>
Contacts.vue
<template>
<div class="flex flex-col items-start w-full p-6 pb-8">
<div class="flex flex-col items-center w-full p-6 space-y-8 mt-4">
<div class="flex flex-col items-center space-y-3">
<span class="text-base">Contacts</span>
</div>
</div>
</div>
</template>
At the root of our project, create a manifest.json file:
{
"manifest_version": 2,
"name": "Extension",
"version": "0.1.0",
"version_name": "0.1.0",
"description": "Chrome Extension Example",
"author": "Leonid Rezvitsky",
"icons": {
"128": "public/128.png"
},
"browser_action": {
"default_popup": "dist/index.html",
"default_title": "Extension"
}
}
To build the extension, run the command:
npm run build
Now go to the chrome://extensions page and enable developer mode.
Click on the button download the extension and select the folder where manifest.json is located in the crust.