Conforme está reposta do SOen é possível:
manifest.json
Nota: Troque <all_urls>
por algo como "*:*//site1.com", "*://*site2.com"
, estes sites seriam os que necessitam você deve "liberar acesso" para pode fazer a comunicação.
Nota: É provável que você deva adicionar a permissão clipboardRead
(e talvez a clipboardWrite
) no manifest:
{
"name": "Get pages source",
"version": "1.0",
"manifest_version": 2,
"description": "Pega o conteudo da página e envia para um servidor",
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"permissions": [
"webRequest",
"tabs",
"clipboardWrite",
"clipboardRead",
"<all_urls>"
]
}
popup.js
Você poderá usar Ajax para enviar para outro servidor o request.source
, como no exemplo:
chrome.extension.onMessage.addListener(function(request, sender) {
if (request.action === "getSource") {
var message, data, xhr;
message = document.querySelector("#message");
data = request.source;
message.innerText = "Enviando ao servidor...";
xhr = new XMLHttpRequest();
xhr.open("POST", "http://site1/webservice.php", true);
xhr.onreadystatechange = function() {
if(xhr.readyState === 4) {
if (xhr.status === 200) {
message.innerText = "Resposta do servidor: " + xhr.responseText;
} else {
message.innerText = "Err: " + xhr.status;
}
}
};
//Enviando dados como RAW
xhr.send(request.source);
}
});
function onWindowLoad()
{
var message = document.querySelector('#message');
chrome.tabs.executeScript(null, {
file: "getPagesSource.js"
}, function() {
// If you try and inject into an extensions page or the webstore/NTP you'll get an error
if (chrome.extension.lastError) {
message.innerHTML = "Erro ao executar o script : <br>" + chrome.extension.lastError.message;
}
});
}
window.onload = onWindowLoad;
getPagesSource.js
Para copiar como se fosse o usuário copiando utilizamos window.getSelection().addRange
e um <div contentEditable="true"></div>
function copyFromDOM(target, rich) {
var range, dom, source, posX, posY;
posX = window.pageXOffset;
posY = window.pageYOffset;
dom = document.createElement("div");
dom.contentEditable = true;
range = document.createRange();
range.selectNode(target);
window.getSelection().removeAllRanges();
window.getSelection().addRange(range);
document.execCommand("copy");
document.body.appendChild(dom);
dom.focus();
document.execCommand("paste");
source = rich === true ? dom.innerHTML : dom.textContent;
window.getSelection().removeAllRanges();
document.body.removeChild(dom);
window.setTimeout(function() {
window.scrollTo(posX, posY);
}, 1);
range = dom = null;
return source;
}
chrome.extension.sendMessage({
action: "getSource",
source: copyFromDOM(document.body, false)//Copia apenas texto
});
Nota: Se quiser copiar com "rich-text", então use copyFromDOM(document.body, true)
Nota: Houve um problema no uso por parte do OP quanto a função copyFromDOM(document.body, false)
, ele estava a usar o GoogleChrome 38, mas após o update para versão mais recente a função passou a funcionar normalmente.
Copiando código-fonte da página
Para copiar o código fonte da página altere o getPagesSource.js
para algo como (baseado na resposta do usuário Rob W):
getPagesSource.js
// @author Rob W <https://stackoverflow.com/users/938089/rob-w>
// Demo: var serialized_html = DOMtoString(document);
function DOMtoString(document_root) {
var html = '',
node = document_root.firstChild;
while (node) {
switch (node.nodeType) {
case Node.ELEMENT_NODE:
html += node.outerHTML;
break;
case Node.TEXT_NODE:
html += node.nodeValue;
break;
case Node.CDATA_SECTION_NODE:
html += '<![CDATA[' + node.nodeValue + ']]>';
break;
case Node.COMMENT_NODE:
html += '<!--' + node.nodeValue + '-->';
break;
case Node.DOCUMENT_TYPE_NODE:
// (X)HTML documents are identified by public identifiers
html += "<!DOCTYPE " + node.name + (node.publicId ? ' PUBLIC "' + node.publicId + '"' : '') + (!node.publicId && node.systemId ? ' SYSTEM' : '') + (node.systemId ? ' "' + node.systemId + '"' : '') + '>\n';
break;
}
node = node.nextSibling;
}
return html;
}
chrome.extension.sendMessage({
action: "getSource",
source: DOMtoString(document)
});
Servidor que recebe os dados
Como não sei qual a linguagem do seu servidor, irei fornecer um exemplo com PHP, este exemplo apenas grava em um arquivo, mas você pode alterar para um banco de dados e utiliza dados RAW
ao invés de x-www-form-urlencoded
(tipo formulários HTML), isto é apenas um exemplo, você pode enviar os dados de outras maneiras para o servidor:
webservice.php
<?php
if (false === ($input = fopen('php://input', 'r'))) {
echo 'Erro ao ler os dados recebidos';
} else if (false === ($output = fopen('meu-arquivo.txt', 'w'))) {
echo 'Erro abrir arquivo para gravação';
fclose($input);
$input = NULL;
} else {
$hasData = false;
while (false === feof($input)) {
$data = fgets($input, 128);
if ($data !== '') {
$hasData = true;
}
fwrite($output, $data);
}
fclose($input);
fclose($output);
$input = $output = NULL;
echo $hasData ? 'Ok' : 'Área de seleção vazia, tente novamente';
}
Se for enviar via POST com x-www-form-urlencoded
(tipo formulários HTML) será necessário usar setRequestHeader
e window.encodeURIComponent
:
xhr = new XMLHttpRequest();
xhr.open("POST", "http://site1/webservice.php", true);
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xhr.onreadystatechange = function() {
if(xhr.readyState === 4) {
if (xhr.status === 200) {
message.innerText = "Resposta do servidor: " + xhr.responseText;
} else {
message.innerText = "Err: " + xhr.status;
}
}
};
//Troque isto pela sua variável que é usada no SERVIDOR
xhr.send('minha_variavel_do_servidor=' + window.encodeURIComponent(request.source));
Note: window.encodeURIComponent
trabalha com UTF-8 talvez seja necessário no servidor decodificar estes dados, acaso você use windows-1252
ou iso-8859-1
Mostrando resultado em um pop-up ou nova janela
Apenas de não estar no escopo da pergunta o AP solicitou o uso de pop-up para exibir os resultados, como muitas extensões usam pop-up para mostrar updates ou coisas semelhantes então resolvi fornecer tal exemplo. Para usar é necessário window.open
e window.open().document.write
, para usar na extensão chame dentro do Ajax:
xhr.onreadystatechange = function() {
var win;
if(xhr.readyState === 4) {
if (xhr.status === 200) {
//Abre uma nova aba ou pop-up
win = window.open("", "_blank", "width=600, height=600");
win.document.write(xhr.responseText);
} else {
//Mostra o resultado na extensão
message.innerText = "Err: " + xhr.status;
}
}
};
Evitando apagar o área de transferência do usuário
Se você quer somente copiar "textos" e evitar usar o clipBoard
você pode usar o textContent
, ele irá copiar somente o texto e como eu disse não afetará a área de transferencia, assim também não será necessário adicionar permissões ao manifest, já que não iremos mais manipular o clipBoard
, altere a função copyFromDOM
para:
function copyFromDOM(target, rich) {
return rich === true ? target.innerHTML : target.textContent;
}