DEV Community

Leonid Rezvitsky
Leonid Rezvitsky

Posted on

Chrome Extension (Vue 3 + Vue Router + Typescript + Vite + TailwindCSS)

#chrome #vue #tailwindcss #typescript


Background

Hey! To write the extension, I will use:

  • Vuejs
  • Vue Router
  • Vitejs
  • TailwindCSS
  • SASS

Start 🚀

To create a new project, run the command in the console:

npm init vite@latest chrome-extension -- --template vue-ts
Enter fullscreen mode Exit fullscreen mode

TailwindCSS

To install TailwindCSS:

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
Enter fullscreen mode Exit fullscreen mode 
npx tailwindcss init -p
Enter fullscreen mode Exit fullscreen mode

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: [], }
Enter fullscreen mode Exit fullscreen mode

In the project I will use SASS to install it along with TailwindCSS, execute the following commands:

npm install postcss-import
Enter fullscreen mode Exit fullscreen mode

Updates postcss.config.js:

module.exports = { plugins: [ require('postcss-import'), require('tailwindcss'), require('autoprefixer'), ] }
Enter fullscreen mode Exit fullscreen mode

SASS

Install SASS with the command:

npm i -D sass
Enter fullscreen mode Exit fullscreen mode

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; } } }
Enter fullscreen mode Exit fullscreen mode

Connect the main.scss into the main.ts file

import './assets/scss/main.scss'
Enter fullscreen mode Exit fullscreen mode

Vue Router

To install, run the command:

npm i -S vue-router@4.x
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Connect the router/index.ts into the main.ts file

import router from './router'
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

Manifest.json

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" } }
Enter fullscreen mode Exit fullscreen mode

Build

To build the extension, run the command:

npm run build
Enter fullscreen mode Exit fullscreen mode

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.

Repo: https://github.com/Rezvitsky/chrome-extension-vuejs

Top comments (0)