Hola amigos de la #nerdytud, En el día de hoy les comparto la nueva forma de crear una extensión de chrome (versión 3).
Creación del proyecto
npm init vite@latest chromeExtensionV3 -- --template react
cd chromeExtensionV3
npm install
Los siguientes pasos, se realizan dentro de la carpeta public
Creación de manifest.json
{
"manifest_version": 3,
"name": "Dummy Extension",
"version": "0.0.1",
"description": "Manifest v3",
"background": {
"service_worker": "./background.js"
},
"permissions": [],
"author": "Gabriel D. Sule",
"homepage_url": "https://github.com/gabrielsule/",
"short_name": "React Extension",
"action": {
"default_popup": "index.html",
"default_title": "Dummy Extension",
"default_icon": {
"16": "/images/logo16.png",
"32": "/images/logo32.png",
"48": "/images/logo48.png",
"128": "/images/logo128.png"
}
},
"icons": {
"16": "/images/logo16.png",
"32": "/images/logo32.png",
"48": "/images/logo48.png",
"128": "/images/logo128.png"
}
}
Agregado de background.js
/*global chrome*/
chrome.runtime.onInstalled.addListener(() => {
console.log('Chrome extension successfully installed!')
return
})
Compilar proyecto
npm run build
Agregar extensión al navegador
Load Unpacked