Cómo crear una extensión de Chrome desde cero en 3 pasos

Comparte en redes sociales

Las extensiones del navegador no son más que complementos que mejoran la funcionalidad del navegador. En otras palabras, añaden más funciones a la funcionalidad básica del navegador.

Pero ¿cómo es que una extensión es más útil que una aplicación web? Bueno, porque una extensión puede acceder a todas las API del navegador, lo que le brinda más control sobre el navegador.

Usando una extensión, puedes:

✅ Personalice la interfaz de usuario del navegador y las pestañas.

✅ Agregue nuevos accesos directos para acciones del navegador.

✅ Vigilar de cerca el navegador y la web.

Google Chrome también tiene una tienda en línea donde puedes alojar tus extensiones de Chrome para que todos las usen. Podría pensar que crear una extensión de Chrome es una tarea desalentadora, pero en realidad, es solo HTML, CSS y JavaScript.

Sí, puedes crear una extensión de Chrome utilizando tecnologías web simples como JavaScript, ¡y aquí hay un tutorial sobre lo mismo!

Crear una extensión de Chrome

En este tutorial, aprenderá cómo crear una extensión de Chrome que analice el historial de su navegador y se lo presente a través de una ventana emergente.

Archivos requeridos

El único archivo necesario para crear una extensión de Chrome es el manifest.json depósito. Aún así, todo lo que codifica es lo mismo que crear una aplicación web.

Creando el archivo Manifest.json

Este archivo en particular define la configuración y funcionalidad de la extensión. A continuación se muestra un ejemplo de cómo suele verse el archivo de manifiesto:

{
  "manifest_version": 3,
  "name": "History",
  "description": "View Browsing History",
  "version": "0.1",
  "action": {
    "default_popup": "index.html"
  }
}

La última versión del archivo de manifiesto en el momento de escribir este artículo es la v3, que, según cromointroduce mejoras de seguridad, privacidad y rendimiento en las extensiones y permite que las extensiones utilicen tecnologías web abiertas como Service Workers y Promises.

Leer también Agile Project Management and DevOps: Streamlining Technology Delivery

También puedes ver un action propiedad en el archivo de manifiesto. Define el archivo HTML que desea abrir en la ventana emergente cuando el usuario hace clic en el icono de la extensión. También hay una default_icon propiedad que le permite configurar el icono de extensión predeterminado para que se muestre.

Creación de la aplicación.

Es hora de crear la aplicación, que se presentará al usuario final como una ventana emergente. Esto no tiene nada que ver con las extensiones. Más bien, es una aplicación web normal.

Primero, debe crear un archivo de entrada que pueda incluir en la propiedad default_popup del manifiesto. He creado index.html como punto de entrada para esta extensión.

<!DOCTYPE html&gt;
<html lang="en"&gt;
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chrome Extension</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h2>Browsing History</h2>
    <ul class="list"></ul>
    <script src="./app.js"></script>
</body>
</html>

He vinculado una hoja de estilo para diseñar la página para que se vea bien en una ventana emergente. Aparte de esto, también hay un archivo javascript vinculado para administrar la funcionalidad de la extensión.


function searchHistory() {
    chrome.history.search({
        text: '',
        startTime: new Date("2023-10-01").getMilliseconds()
    }, (results) => {
        for (const result of results) {
            let liItem = document.createElement("li")
            let link = document.createElement("a")
            link.innerText = result.title
            link.href = result.url
            liItem.appendChild(link)
            document.querySelector(".list").appendChild(liItem)
        }
    })
}

document.addEventListener("DOMContentLoaded", () => {
    searchHistory()
})

Lo que hace este archivo es utilizar API de historial de Chrome para consultar el historial del navegador y mostrarlo en la ventana emergente. Cuando el usuario hace clic en el icono de la extensión, el DOMContentLoaded el evento será disparado y llamará al searchHistory función, que contiene el código real.

EL search El método en History API acepta un parámetro requerido text, que es el texto de búsqueda por el que desea filtrar el historial. Si lo deja como una cadena vacía, el historial se devolverá sin ningún filtro.

Leer también 7 meilleurs proxys Instagram pour les spécialistes du marketing en 2023

Otro parámetro útil es el startTime configuración. Filtra los resultados del historial según el tiempo transcurrido desde la hora de inicio. Por ejemplo, si especifica una hora de inicio para una semana, solo se recuperará el historial de la semana pasada. Esta es una configuración opcional y la predeterminada son las últimas 24 horas.

Para recuperar los resultados, la API proporciona una función de devolución de llamada que contiene los resultados en una matriz. Puedes revisar la tabla y hacer una lista de ellos.

for (const result of results) {
    let liItem = document.createElement("li")
    let link = document.createElement("a")
    link.innerText = result.title
    link.href = result.url
    liItem.appendChild(link)
    document.querySelector(".list").appendChild(liItem)
}

Ahora la API de historial en Chrome requiere el permiso de «historial», que debe configurarse en nuestro archivo de manifiesto.

{
    "manifest_version": 3,
    "name": "History",
    "description": "View Browsing History",
    "version": "0.1",
    "action": {
      "default_popup": "index.html"
    },
    "permissions": [
        "history"
    ]
}

Ejecutando la extensión

Este es el paso más sencillo para crear y ejecutar una extensión de Chrome. Haga clic en los puntos suspensivos en la barra de acciones de Chrome y navegue hasta Manage Extensions abajo Extensions. También puedes ir a este enlace chrome://extensions/ directamente.

Habilite el modo desarrollador si no está habilitado.

Luego haga clic Load unpacked luego seleccione la carpeta del proyecto en la que acaba de crear su extensión. Al hacerlo, podrá ver su extensión en la lista.

Para ejecutar la extensión, vaya a la barra de acciones de Chrome y haga clic en su extensión para ver la lista.

Eso es; acabas de crear una extensión de Chrome simple. Si quieres más ejemplos, puedes consultar más. Ejemplos de extensiones de Chrome en el repositorio oficial de Google Chrome.

Leer también 10 CCM Strategies in Modern Business to Improve Customer Experience

Si desea publicar su extensión de Chrome en Chrome Web Store, puede Sigue estos pasos y pague una tarifa única para registrar su extensión en la tienda.

Ultimas palabras

Crear una extensión de Chrome es realmente fácil si conoces los conceptos básicos de cualquier aplicación web. Simplemente cree un archivo de manifiesto y su aplicación se convertirá en una extensión.

Ahora que sabe cómo crear una extensión de Chrome, consulte las mejores extensiones de Chrome para ayudar a los desarrolladores.

Source link

Si quiere puede hacernos una donación por el trabajo que hacemos, lo apreciaremos mucho.

Direcciones de Billetera:

- BTC: 14xsuQRtT3Abek4zgDWZxJXs9VRdwxyPUS

- USDT: TQmV9FyrcpeaZMro3M1yeEHnNjv7xKZDNe

- BNB: 0x2fdb9034507b6d505d351a6f59d877040d0edb0f

- DOGE: D5SZesmFQGYVkE5trYYLF8hNPBgXgYcmrx

También puede seguirnos en nuestras Redes sociales para mantenerse al tanto de los últimos post de la web:

-Twitter

- Telegram

Disclaimer: En Cryptoshitcompra.com no nos hacemos responsables de ninguna inversión de ningún visitante, nosotros simplemente damos información sobre Tokens, juegos NFT y criptomonedas, no recomendamos inversiones