Passagem de mensagens em plugins para o Google Chrome

O problema: duas janelas abertas lado a lado, pretendia-se passar o valor de uma input da janela 1 para outra input da janela 2 e posteriormente clicar no botão da janela 2.

Mas então, como é que é suposto conseguirmos isto?

Fácil! Com…

Passagem de mensagens em plugins para o Chrome

Neste post vou dar o exemplo em concreto para o plugin que construí, mas, penso que conseguirão usar para outros exemplos!

O meu ficheiro manifest.json tem o seguinte aspecto:

{
    “name”: “Message passing”,
    “version”: “1.0”,
    “manifest_version”: 2,
    “description”: “Passing text from one window to the other”,
    “icons”: {
        “16”: “img/icon-16.png”,
        “128”: “img/icon-128.png”
    },
    “permissions”: [
        “contextMenus”, “tabs”
    ],
    “background”: {
        “scripts”: [
            “js/background.js”
        ]
    },
    “content_scripts”: [{
            “matches”: [“https://urlHere/*"],
            “js”: [“js/message.js”]
        },
        {
            “matches”: [“https://urlHere/*"],
            “js”: [“js/dom.js”]
        }]
}

Vou focar-me apenas nos ficheiros background.js, message.js e dom.js.

O ficheiro background.js, segundo a documentação do Chrome, é onde devemos ter toda a lógica “pesada” do nosso plugin. Este tem o seguinte aspecto:

chrome.contextMenus.create({
    ‘title’: ‘Send message to other window’,
    ‘contexts’: [‘all’],
    ‘onclick’: onClickHandler
});function onClickHandler(info) {
    chrome.tabs.query({}, function(tabs) {
        var message = {giveMeDom: “now”};
        for (var i=0; i<tabs.length; ++i) {
            try {
                chrome.tabs.sendMessage(tabs[i].id, message, function(response) {
                    message = {value: response.response};
                    for (var i=0; i<tabs.length; ++i) {
                        chrome.tabs.sendMessage(tabs[i].id, message);
                    }
                });
            } catch(err){ }
        }
    });
}

Basicamente, o que estamos a fazer é o seguinte:

• Mandamos uma mensagem para todas as Tabs abertas, uma vez que não sabemos em que Tab está injectado o ficheiro Javascript responsável por nos responder
• Assim que os content scripts apanham a tentativa de envio de mensagem, o respectivo handler é ativado, tendo funções e comportamentos distintos nos dois scripts. Passo a explicar abaixo!

Passagem de mensagens em plugins para o Chrome, lembram-se? 🙂

O ficheiro dom.js vai ser “injectado” na página 1, podemos especificar isto no manifest.json, é neste ficheiro que, quando executo a função de enviar mensagem para a janela 2, no context menu, é responsável por ficar à escuta da mensagem e fica encarregue de mandar a resposta com o valor do input que pretendo. Este tem o seguinte aspecto:

chrome.runtime.onMessage.addListener(function(message, sender, sendResponse) {
    if(message.giveMeDom == “now”) {
        var val = document.getElementById(“elementIDHere”).value;
        sendResponse({
            response: val
        });
    }
});

O ficheiro message.js vai ser “injectado” na página 2 e, à semelhança do dom.js, também podemos especificar isto no manifest.json, este é o ficheiro que, quando quando a mensagem é enviada, é responsável por ficar à escuta da mensagem e fica encarregue de colocar no input o respectivo valor e, posteriormente, clicar no botão. Este tem o seguinte aspecto:

chrome.runtime.onMessage.addListener(function(message, sender, sendResponse) {
    document.getElementById(“txbcampaignid”).value = message.value;
    document.getElementById(“btnfind”).click();
});

Podemos, desta forma, passar mensagens entre ficheiros que constituem a extensão para extender as funcionalidades do browser.

Na documentação oficial, podemos ficar a saber mais sobre como extender a passagem de mensagens em plugins para o Chrome.