![Crear extensión CHROME (última versión 2023) 1 Crear extensión CHROME](https://www.programadornovato.com/wp-content/uploads/2022/11/crear-extensiones-640x360.png)
Crear extensión CHROME (última versión 2023)
En este tutorial vamos a crear extensión CHROME compatible con la nueva versión 2023 para evitar el error: “Manifest version 2 is deprecated, and support will be removed in 2023” y evitar que en el 2023 ya no funcione tu extensión. Para crear nuestra primera extensión del manifest.json versión 3 vamos a seguir estos pasos:
Crear un proyecto
Creamos una carpeta en cualquier parte de nuestra computadora
![Crear extensión CHROME (última versión 2023) 2 image](https://www.programadornovato.com/wp-content/uploads/2022/11/image.png)
Abrimos la carpeta con cualquier editor en mi caso VS Code
![Crear extensión CHROME (última versión 2023) 3 image 1](https://www.programadornovato.com/wp-content/uploads/2022/11/image-1-1024x744.png)
Creamos un archivo llamado manifest.json
![Crear extensión CHROME (última versión 2023) 4 image 2](https://www.programadornovato.com/wp-content/uploads/2022/11/image-2-1024x299.png)
Códigos para Crear extensión CHROME
Pegamos este codigo que sirve para:
- Declaramos las caracteriticas de la extencio
Permisos que vamos a tener en el navegador
- Permisos de guardar datos
- Manipular la pestaña activa
- Agregar javascript a las paginas
- Manipular pestañas
Todo el codigo que va estar corriendo
- Script que se va a ejecutar
Paginas en las que va a poder correr la extension
- En este caso solo sera Google
{ "manifest_version": 3, "name": "Buscar en google", "description": "Buscar programadornovato en Google", "version": "1", "icons": { "128": "icon_128.png" }, "permissions": [ "storage", "activeTab", "scripting", "tabs" ], "background": { "service_worker": "background.js" }, "host_permissions": [ "https://www.google.com/*" ] }
![Crear extensión CHROME (última versión 2023) 5 image 3](https://www.programadornovato.com/wp-content/uploads/2022/11/image-3-1024x509.png)
Agregamos 2 imágenes a nuestra carpeta, buscador_google.png, icon_128.png
![Crear extensión CHROME (última versión 2023) 6 image 4](https://www.programadornovato.com/wp-content/uploads/2022/11/image-4-1024x645.png)
![Crear extensión CHROME (última versión 2023) 7 buscador google](https://www.programadornovato.com/wp-content/uploads/2022/11/buscador_google.png)
![Crear extensión CHROME (última versión 2023) 8 icon 128](https://www.programadornovato.com/wp-content/uploads/2022/11/icon_128.png)
Agregamos el archivo background.js que validara que cargue completamente e insertamos el código del archivo background.js
![Crear extensión CHROME (última versión 2023) 9 image 5](https://www.programadornovato.com/wp-content/uploads/2022/11/image-5-1024x401.png)
//background.js chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => { if (changeInfo.status === 'complete' && /^http/.test(tab.url)) { chrome.scripting.executeScript({ target: { tabId: tabId }, files: ["./buscaGoogle.js"] }) .then(() => { console.log("INJECTED THE FOREGROUND SCRIPT."); }) .catch(err => console.log(err)); } });
El archivo buscaGoogle.js busca el input y ecribe “programador novato” despues damos click en el boton btnk para buscar “progrador novato”
![Crear extensión CHROME (última versión 2023) 10 image 6](https://www.programadornovato.com/wp-content/uploads/2022/11/image-6-1024x317.png)
//buscaGoogle.js //Buscamos el input text llamado q y le escribimos programador novato document.querySelector('input[name="q"]').value="programador novato"; //Creamos el evento click var evt = new MouseEvent('click', { bubbles: true, cancelable: true, view: window }); //Si no se cancela el evento lo ejecutamos var canceled = !document.querySelector('input[name="btnK"]').dispatchEvent(evt);
Instalar Extensión en Google Chrome
Abrimos Chrome, damos click en los 3 puntos, Mas herramientas, Extensiones
![Crear extensión CHROME (última versión 2023) 11 image 7](https://www.programadornovato.com/wp-content/uploads/2022/11/image-7-1024x448.png)
Arrastramos la carpeta de nuestro proyecto hacia el area de extensiones de Chrome
![Crear extensión CHROME (última versión 2023) 12 Crear extensión CHROME](https://www.programadornovato.com/wp-content/uploads/2022/11/image-8-1024x669.png)
Listo la app esta instalada, quizás este inactiva, solo hay que resetearla dando click aqui
![Crear extensión CHROME (última versión 2023) 13 image 9](https://www.programadornovato.com/wp-content/uploads/2022/11/image-9-1024x324.png)
Damos click en el icono de extensiones y después en el pin de nuestra extensión para posicionarla arriba.
![Crear extensión CHROME (última versión 2023) 14 image 10](https://www.programadornovato.com/wp-content/uploads/2022/11/image-10-1024x413.png)
Si en la barra de navegación escribíos google.com nos buscara en automático Programador Novato
![Crear extensión CHROME (última versión 2023) 15 image 11](https://www.programadornovato.com/wp-content/uploads/2022/11/image-11-1024x398.png)
Bot para WhatsApp Archivos: https://www.programadornovato.com/category/bot-para-whatsapp/
Whatsapp enviar mensajes masivos: https://www.programadornovato.com/category/whatsapp-enviar-mensajes-masivos/
Instalar un Bot🤖 gratis para WhatsApp: https://www.youtube.com/watch?v=vE0vrs1KHJA&list=PLCTD_CpMeEKTxc_GT51Tu89lQXvZ0OY4X&ab_channel=ProgramadorNovato
WhatsApp 🚀Envío Masivo de Mensajes GRATIS🤑 https://www.youtube.com/watch?v=lttPJpdcTWY&list=PLCTD_CpMeEKSpOF-gsNE5tV9Zv4MWTLa5&ab_channel=ProgramadorNovato