Modificando a Página Aberta em uma Tab

Para modificar uma página armazenada em uma tab em particular, carregue um ou mais scripts de conteúdo dentro dela usando o método attach() do objeto tab. A tarefa desses scripts é interagir com o conteúdo web.

Aqui está um exemplo simples:

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";'
    });
  }
});

Execute esse exemplo, salve o ícone chamado "icon-16.png" no diretório "data" do add-on. Você To run this example, save an icon file named "icon-16.png" in add-on's "data" directory. Você pode baixar este ícone: .

This add-on creates a button with Mozilla favicon as an icon. It has a click handler which fetches the active tab and loads a script into the page hosted by the active tab. The script is specified using the contentScript option, and just draws a red border around the page.

Then open any web page in the browser window, and click the button . You should see a red border appear around the page, like this:

Mantendo o script de conteúdo em arquivo separado

No exemplo acima, nós passamos o script de conteúdo como uma string.

A menos que o script seja extremamente simples, o melhor é manter o script em um arquivo separado no diretório data do add-on. Isso deixa o código mais fácil para manter, depurar, e revisar. Faça isto, forneça a opção contentScriptFile não contentScript, cujo valor é uma URL apontando para um ou mais arquivos de script de conteúdo.

Por exemplo, se nós salvarmos o script acima no diretório data do add-on em um arquivo chamado 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")
    });
  }
});

Você pode carregar mais de um script, e os scripts podem interagir diretamente um com o outro. Então você pode carregar o jQuery, e então seu script de conteúdo pode usá-lo.

Carregue vários arquivos de script de conteúdo

O dado atribuído ao contentScriptFile pode ser um array. Os scripts serão carregados na mesma ordem em que estiverem no array.

No exemplo a seguir, nós carregaremos dois scripts, first.js & second.js. Ambos serão executados no mesmo contexto, então tudo publicamente definido no first.js será acessível do 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')]
    });
  }
});

Comunicando com o script de conteúdo

O script do seu add-on e os scripts de conteúdo não podem acessar diretamente as variáveis ou funções um do outro, mas eles podem trocar mensagens.

Para enviar mensagens de um lado para o outro, são usados o emitente de chamadas port.emit() e o recebendor port.on().

• No script de conteúdo, port é uma propriedade global do objeto self.
• No script do add-on, tab.attach() retorna um objeto worker contendo a propriedade port que você usa para enviar mensagens ao script de conteúdo.

Vamos reescrever o exemplo acima para passar mensagens de um add-on para o script de conteúdo.

O script de conteúdo agora precisa parecer com isto:

// "self" é um objeto global no script de conteúdo
// Espera por um "drawBorder"
self.port.on("drawBorder", function(color) {
  document.body.style.border = "5px solid " + color;
});

No script do add-on, nós enviaremos ao script de conteúdo uma mensagem "drawBorder" usando o objeto retornado de 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");
  }
});

A mensagem drawBorder não é uma mensagem embutida, é uma que este add-on definiu na chamada de port.emit().

Injetando CSS

Diferente da API page-mod, tab.attach() não permite a você injetar CSS diretamente na página.

Para modificar o estilo de uma página, você tem que usar JavaScript, como no exemplo acima.

Aprendendo Mais

Para aprender mais sobre como trabalhar com tabs no SDK, veja o tutorial Abrindo uma Página da Web, O tutorial Lista de Tabs Abertas, e a referência da API tabs.

Para aprender mais sobre scripts de conteúdo, veja o guia de scripts de conteúdo.