Modify a web page

Para empezar, crea un nuevo directorio llamado "modify-page". En este directorio, crea un archivo llamado "manifest.json", con el siguiente contenido:

{
  "manifest_version": 2,
  "name": "modify-page",
  "version": "1.0",

  "content_scripts": [
    {
      "matches": ["https://developer.mozilla.org/*"],
      "js": ["page-eater.js"]
    }
  ]
}

La llave content_scripts (en-US) es el método de carga de scripts a páginas cuya URL encaje con los patrones. En este caso, content_scripts le dice al navegador que cargue una script llamada "page-eater.js" en todas las páginas con https://developer.mozilla.org/.

Después, crea un archivo llamado "page-eater.js" dentro del directorio "modify-page" e introduce el contenido de a continuación:

document.body.textContent = "";

var header = document.createElement("h1");
header.textContent = "This page has been eaten";
document.body.appendChild(header);

Ahora, instala la extensión y visita https://developer.mozilla.org/:

Y si quieres comer páginas, pero solo cuando el usuario te lo pida? Actualicemos este ejemplo para que podamos enyectar el contenido de la script cuando el usuario haga click en un item del menu de contexto.

Primero actualiza "manifest.json" para que incluya el contenido a continuación:

{
  "manifest_version": 2,
  "name": "modify-page",
  "version": "1.0",

  "permissions": ["activeTab", "contextMenus"],

  "background": {
    "scripts": ["background.js"]
  }
}

Aquí, hemos eliminado la llave content_scripts y hemos añadido dos nuevas llaves:

• permissions (en-US): Para inyectar scripts a las páginas necesitamos los permisos para la página que estamos modificando. El permiso activeTab es una manera de obtener el permiso temporalmente para la lengüeta que esté actualmente abierta. También necesitamos el permiso contextMenus para poder añadir items al menu de contexto.
• background (en-US): Usamos esto para cargar un "background script" persistente llamado "background.js", en el cual montamos el menu de contexto e inyectamos el script de contenido.

Ahora generaremos este archivo. Crea un archivo llamado "background.js" en el directorio "modify-page" e introduce el siguiente contenido:

browser.contextMenus.create({
  id: "eat-page",
  title: "Eat this page",
});

browser.contextMenus.onClicked.addListener(function (info, tab) {
  if (info.menuItemId == "eat-page") {
    browser.tabs.executeScript({
      file: "page-eater.js",
    });
  }
});

En esta script estamos creando un item del menu de contexto y dándole una ID y un título específico (el texto que se estará expuesto en el menu de contexto). Después configuramos un evento de escucha para que cuando el usuario haga click en uno de los items del menu podamos comprobar si se trata de nuestro item eat-page . En caso afirmativo, inyectaremos "page-eater.js" a la lengüeta actual usando la API tabs.executeScript() (en-US). Alternativamente, esta API puede tomar como argumento una ID. En este caso la hemos omitido lo cual quiere decir que la script es inyectada en la lengüeta que está actualmente abierta.

Ahora mismo la extensión debería ser algo como esto:

modify-page/
    background.js
    manifest.json
    page-eater.js

Ahora recarga la extensión, abre la página (cualquier página en esta ocasión), activa el menu de contexto y selecciona "Eat this page" (Comer esta página):

Scripts de contenido y scripts de fondo no pueden acceder directamente al estado del otro. Sin embargo, pueden comunicarse mediante el uso de mensajes. Una terminal configura un escuchador de mensajes y la otra terminal puede mandarle un mensaje. La siguente tabla resume las APIs involucradas en cada parte:

Actualicemos nuestro ejemplo para ilustrar como mandar un mensaje desde una script de fondo.

Primero, hemos de editar "background.js" para que tenga el siguiente contenido:

browser.contextMenus.create({
  id: "eat-page",
  title: "Eat this page",
});

function messageTab(tabs) {
  browser.tabs.sendMessage(tabs[0].id, {
    replacement: "Message from the extension!",
  });
}

function onExecuted(result) {
  var querying = browser.tabs.query({
    active: true,
    currentWindow: true,
  });
  querying.then(messageTab);
}

browser.contextMenus.onClicked.addListener(function (info, tab) {
  if (info.menuItemId == "eat-page") {
    let executing = browser.tabs.executeScript({
      file: "page-eater.js",
    });
    executing.then(onExecuted);
  }
});

Ahora, después de inyectar "page-eater.js", hemos de usar tabs.query() (en-US) para obtener la lengüeta actualmente activa y entonces usar tabs.sendMessage() (en-US) para mandar un mensaje a las scripts de contenido cargadas en la lengüeta. El mensaje tiene el contenido {replacement: "Message from the extension!"}.

Después, actualiza "page-eater.js" de esta forma:

function eatPageReceiver(request, sender, sendResponse) {
  document.body.textContent = "";
  var header = document.createElement("h1");
  header.textContent = request.replacement;
  document.body.appendChild(header);
}
browser.runtime.onMessage.addListener(eatPageReceiver);

Ahora, en vez de simplemente comer la página, el contenido espera a un mensaje usando runtime.onMessage (en-US). Cuando el mensaje llega, el script de contenido ejecuta el mismo código de antes, exceptuando que el texto de reemplazo se obtenido de request.replacement.

Debido a que tabs.executeScript() es una función asincrónica y para asegurarnos de que mandamos el mensaje solo cuando el escuchador ha sido añadido en "page-eater.js", usamos onExecuted que sera llamado después de que "page-eater.js" se ejecute.

Si queremos enviar mensajes directamente desde el contenido script de vuelta a la página de fondo, podríamos usarruntime.sendMessage() (en-US) en vez de tabs.sendMessage() (en-US). Por ejemplo:

browser.runtime.sendMessage({
  title: "from page-eater.js",
});

• La guía de scripts de contenido (en-US)
• content_scripts (en-US) llave de manifiesto
• permissions (en-US) llave de manifiesto
• tabs.executeScript() (en-US)
• tabs.insertCSS() (en-US)
• tabs.sendMessage() (en-US)
• runtime.sendMessage() (en-US)
• runtime.onMessage (en-US)
• Ejemplos con content_scripts:
  • borderify
  • notify-link-clicks-i18n
  • page-to-extension-messaging
• Ejemplos con tabs.executeScript():
  • beastify
  • context-menu-demo