Cree su primera extensión de Chrome en JavaScript para ocultar sus claves API

En este tutorial, aprenderás a crear una extensión de Chrome. El ejemplo que veremos hoy es para ocultar tus claves API de Vonage en el panel de control. El conocimiento que adquirirás al seguir los pasos de este tutorial te dará una base sobre cómo crear tus propias extensiones de Chrome para diferentes propósitos.

¿Qué es una extensión de Chrome?

Una extensión de Chrome es un programa de software que te permite ampliar las funcionalidades de Chrome y cambiar tu experiencia en el navegador. Una extensión se puede construir con HTML, CSS, JavaScript y un manifest.json archivo. Este último proporciona a Chrome la información necesaria para ejecutar los scripts para que la extensión funcione.

Crear la carpeta de extensiones de Chrome

Crea una nueva carpeta en tu ordenador que contendrá el archivo manifest.json y el archivo bootstrap, en nuestro ejemplo lo llamaremos index.js. Para mi ejemplo, llamaré a esta carpeta chrome-extension.

Crear elmanifest.json archivo

A manifest.json es necesario al crear una extensión de Chrome, ya que indica a su programa la función que debe ejecutar.

Cree un manifest.json archivo. Desde su terminal en Unix, puede escribir touch manifest.json.

Rellénelo con la información requerida como puede ver en el siguiente fragmento de código.

Veamos juntos cada línea paso a paso.

• name es el nombre de la extensión que aparecerá en la lista de extensiones de Chrome.

• description es la descripción de lo que hace la API de Chrome.

• version es la versión actual de tu extensión, si haces cambios puedes volcarla.

• author debe contener el nombre del creador de la extensión de Chrome.

• manifest_version se refiere a la versión del manifiesto, en el momento de escribir esta entrada del blog la última es la 3.

• content_scripts son archivos que pueden realizar cambios en el DOM y pasar información a la extensión. Puede obtener más información en la página oficial de content script. En este ejemplo, queremos que nuestro script coincida con la página web <${CUSTOMER_DASHBOARD_URL}/> y cualquiera de sus subpáginas. La lógica a seguir la escribiremos en el fichero index.js.

{
    "name": "API Key Hider",
    "description": "A chrome extension to blur your Vonage API keys",
    "version": "1.0",
    "author": "Amanda Cavallaro",
    "manifest_version": 3,
    "content_scripts": [{
      "matches": [
        "${CUSTOMER_DASHBOARD_URL}/*"
      ],
      "js": ["index.js"]
    }]
}

Crear el archivo bootstrap

Desde su terminal cree el archivo index.js archivo. En una máquina Unix, puede hacerlo escribiendo touch index.js.

Para tener una extensión de Chrome, puedes crear una función simple y se aplicará al navegador una vez que la importes.

He aquí un ejemplo que podría utilizar para crear una alerta simple que se ejecutaría una vez.

function createAnAlert() {

 alert();

}

createAnAlert();

Para este tutorial, utilizaremos el código siguiente para difuminar algunas claves API.

Vamos a crear una función llamada blurApiKeys. Usaremos document.querySelector y document.querySelectorAll para encontrar los elementos HTML que contienen la API Key y la API Secret Key. Por último, añadiremos un desenfoque de 20 píxeles a estos elementos utilizando el estilo CSS y setInterval llama a la función blurApiKeys cada 10 milisegundos.

function blurApiKeys() {
  let apiKey = document.querySelector('#apiKeyField > div');

  if (apiKey) {
    apiKey.style.filter = 'blur(20px)';
  }

  let apiKeyLabel = [...document.querySelectorAll('label')].filter((x) =>
    x.textContent.includes('API Key')
  );

  let apiSecretLabel = [...document.querySelectorAll('label')].filter((x) =>
    x.textContent.includes('API secret 1')
  );

  for (let label of apiKeyLabel) {
    let div = label.nextElementSibling;

    if (div) {
      div.style.filter = 'blur(20px)';
    }
  }

  for (let label of apiSecretLabel) {
    let div = label.nextElementSibling;

    if (div) {
      div.style.filter = 'blur(20px)';
    }
  }
}

setInterval(blurApiKeys, 10);

Importa la carpeta creada a tus extensiones de Chrome

Ahora es el momento de importar estos dos archivos que has creado y añadirlos como una extensión de Chrome a tu navegador.

1. Abra el navegador Chrome.

2. Navegue hasta chrome://extensions/.

3. Haz clic en el modo de desarrollador en la parte superior derecha para activarlo (si no lo está ya).

4. Haga clic en Cargar desempaquetado en la parte superior izquierda y se abrirá una herramienta de carga de archivos.

5. Busque donde creó la carpeta chrome-extension en tu ordenador, haz clic sobre ella y finalmente pulsa el botón seleccionar.

6. Puede ver que se ha creado una nueva extensión de Chrome llamada "API Key Hider", tal y como se especifica en la propiedad name del archivo manifest.json.

7. Asegúrate de que esta extensión de Chrome está activada. Si alguna vez desea desactivarla, puede desactivarla o eliminarla de la lista de extensiones de Chrome.

Puedes ver los pasos anteriores en un gif a continuación:

A gif showing how to import the Chrome Extension onto chrome

Póngalo a prueba

Tu extensión de Chrome ya está cargada y puedes ver la funcionalidad de la función que has creado trabajando en el navegador.

Para probar la función que creamos, navegue hasta el Panel de Vonagenavega por las páginas del panel y notarás que tanto tu API de Vonage como tus claves secretas están ocultas. Si necesitas copiarlas, el botón para copiar al lado sigue funcionando aunque las claves estén borrosas, como en la imagen a continuación.

Settings page on the Vonage Dashboard with the blurred keys

Enhorabuena

¡Bien hecho! Creaste una extensión de Chrome para ocultar tus claves API de Vonage, ahora que sabes cómo crear, importar y habilitar una extensión de Chrome, ¡puedes dejar fluir tu creatividad y crear muchas más extensiones!

Si quieres llevarlo al siguiente nivel puedes aprender cómo publicarlo en la Chrome Webstore desde la documentación oficial.

Espero que le haya gustado. No dude en ponerse en contacto conmigo en Twitter o únete a nuestro Canal Slack de la Comunidad.