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

chrome://extensions/

Load Unpacked