Modificar la página web activa

Para modificar la página web activa, se carga uno o mas scripts de contenido dentro de ella usando el método attach() del objeto tab. El trabajo de estos scripts es interactuar con el contenido de la web.

Aquí se muestra un ejemplo simple:

var button = require("sdk/ui/button/action").ActionButton({
  id: "style-tab",
  label: "Style Tab",
  icon: "./icon-16.png",
  onClick: function() {
    require("sdk/tabs").activeTab.attach({
      contentScript: 'document.body.style.border = "5px solid red";'
    });
  }
});

Para ejecutar este ejemplo, se guarda el icono llamado "icon-16.png" en el directorio "data" del add-on. Puede descargar este icono:  .

Este add-on crea un botón con el icono de Mozilla. Este tienen un controlador de eventos del ratón el cual busca la pestaña activa y carga un script dentro de la página activa. El script es especificado usando la opción contentScript, y simplemente dibuja un borde rojo alrededor de la página.

Abra cualquier página web en el navegador, y haga clic en el botón. Deberá poder ver un borde rojo que aparecerá alrededor de la página, como este:

Mantener los Scripts de Contenido en un archivo diferente

En el ejemplo anterior, hemos pasado el contenido del script como una cadena.

A menos que el script sea extremadamente simple, manten el script como un archivo separado en el directorio data del add-on. Esto hace que el código sea más fácil de mantener, depurar, y revisar. Para hacer esto, utiliza la opción contentScriptFile y no contentScript, cuyos valores es una URL que apunta a uno o varios archivos con el contenido de los scripts.

Por ejemplo,  si guardamos el script anterior bajo el directorio data  del add-on en un archivo llamado my-script.js:

var self = require("sdk/self");

var button = require("sdk/ui/button/action").ActionButton({
  id: "style-tab",
  label: "Style Tab",
  icon: "./icon-16.png",
  onClick: function() {
    require("sdk/tabs").activeTab.attach({
      contentScriptFile: self.data.url("my-script.js")
    });
  }
});

Puedes cargar mas de un script, y los scripts pueden interactuar directamente entre ellos. Por lo tanto puede cargar jQuery, y luego tu script de contenido puede usarlo.

Cargar varios archivo de script de contenido

Los datos asignados a contentScriptFile pueden ser un vector. Los scripts serán cargados en el mismo orden del vector.

En el siguiente ejemplo, estamos cargando dos scripts, first.js & second.js. Ambos scripts serán ejecutados en el mismo contexto, por lo tanto todo lo definido como publico en first.js será accedible desde second.js.

// lib/main.js

var self = require("sdk/self");
var tabs = require("sdk/tabs");

require("sdk/ui/button/action").ActionButton({
  id: "load-several",
  label: "load several scripts",
  icon: "./icon-16.png",
  onClick: function () {
    tabs.activeTab.attach({
      contentScriptFile: [self.data.url('first.js'),
                          self.data.url('second.js')]
    });
  }
});

Comunicación con los Scripts de Contenido

Tu script del add-on tus scripts de contenido no pueden acceder directamente a las variables del otro o llamar a las funciones del otro, pero pueden enviarse mensajes entre ellos.

Para enciar un mensaje de un lado a otro, el remitente llama a port.emit() y el receptor escucha usando port.on().

• En el script de contenido, port es una propiedad del objeto global self.
• En el script del add-on, tab.attach() revuelve un objeto worker que contiene la propiedad port que usaste para enviar los mensajes al script de contenido.

Re escribamos el ejemplo anterior para pasar un mensaje desde el add-on al script de contenido.

El script de contenido debe verse así_

// "self" is a global object in content scripts
// Listen for a "drawBorder"
self.port.on("drawBorder", function(color) {
  document.body.style.border = "5px solid " + color;
});

En el script del add-on, enviaremos un mensaje "drawBorder" al script de contenido usando el objeto devuelto desde attach():

var self = require("sdk/self");
var tabs = require("sdk/tabs");

var button = require("sdk/ui/button/action").ActionButton({
  id: "style-tab",
  label: "Style Tab",
  icon: "./icon-16.png",
  onClick: function() {
    var worker = tabs.activeTab.attach({
      contentScriptFile: self.data.url("my-script.js")
    });
    worker.port.emit("drawBorder", "red");
  }
});

El mensaje drawBorder no es un mensaje construido, es un mensaje que el add-on define en la llamada port.emit().

Inyectando CSS

Al contrario de la API page-mod, tab.attach() no te permite inyectar CSS directamente dentro de la página.

Para modificar el estilo de la página, tienes que usar Javascript, como en el ejemplo anteriot.

Aprender más

Para aprender más sobre el trabajo con pestañas en el SDK, puede ver la guía Open a Web Page, la guía List Open Tabs, y la tabs API reference.

Para aprender mpas sobre los scripts de contenido, puede ver content scripts guide.