How do I make a Content Script communicate with iframe element extension for Chrome?

Question

I developed a Toolbar for Google Chrome, adding it to the pages via an iframe:

var iframe = document.createElement('iframe');
iframe.id="iframeId";
iframe.src = chrome.extension.getURL('CLAWS_Sem_Imagens.html');
iframe.style.height = 7em;
iframe.style.width = '100%';
iframe.style.position = 'fixed';
iframe.style.top = '0';
iframe.style.left = '0';
iframe.style.zIndex = '938089'; 
//other stuff

document.documentElement.insertBefore(iframe,document.body); 

// pulling down the rest of the page
var bodyStyle = document.body.style;
var cssTransform = 'transform' in bodyStyle ? 'transform' : 'webkitTransform';
bodyStyle[cssTransform] = 'translateY(' + height + ')';

What I need is that when the user selects a word on the main page, it is stored in a variable (or HTML element) that is within this iframe (logic already implemented). Therefore, I need content-script and Toolbar to communicate (the first recognizes that the word has been selected and stores it in a variable/element of the second).

For testing purposes, I’m trying to make content-script recognize the existence of a span within iframe:

  <span id="palavra">
  Palavra       
  </span>

I’ve tried to use iframe.contentDocument.getElementById("palavra"), window.document.getElementById("iframeId").contentWindow.querySelector("#palavra") and window.frames['iframeId'].contentDocument.getElementById('palavra'), but nothing works. Any suggestions?

Answer 1

From what you implied in your question, you need to take the text selection event anywhere on the screen, and save that value into a variable within its extension. If this is really the code below solves your problem, if it is not explain the situation in the comments that rephrase the answer :D

For Chrome Xtension would look something like this:

chrome.browserAction.onClicked.addListener(function(tab) {
  chrome.tabs.sendRequest(tab.id, {method: "getSelection"}, function(response){
     setarConteudoSelecionado(response.data);
  });
});

function setarConteudoSelecionado(selectedText) {
  //seta conteudo na sua variavel :D
}

In pure Javascript the idea would be this:

//declaro variavel para guardar seu texto
var textoSelecionado = '';

/*pega todos eventos de click, lembrando que 
o evento de click ele é trigado quando o botão é solto.
*/
document.body.addEventListener('click', pegarTexto, true);

/*metodo chamado pela função de click*/
function pegarTexto() {

    /*busca todos os texto selecionados na tela*/
    var selecionado = window.getSelection().toString();

    /*verifica se o evento é de seleção*/
    if (selecionado) {
        /*seta na sua variavel que deve estar na sua extensão*/
        textoSelecionado = selecionado;
        document.getElementById('ultimoTexto').innerHTML = selecionado;
    }
}

Follows the jsfiddle.