google chrome - remoto - Extensión de Chrome: cómo capturar el texto seleccionado y enviarlo a un servicio web
extensiones chrome android (5)
No está claro desde su código dónde está. Lo que quiero decir es que si este código está en popup html o html de fondo, entonces los resultados que está viendo son correctos, no se seleccionará nada en esas ventanas.
Deberá colocar este código en un script de contenido para que tenga acceso al DOM de la página y luego, cuando haga clic en la acción de su navegador, deberá enviar un mensaje al script de contenido para buscar la selección actual del documento.
Para la extensión de Google Chrome, necesito capturar el texto seleccionado en una página web y enviarlo a un servicio web. ¡Estoy atascado!
Primero probé un bookmarklet, pero Chrome en Mac parece tener algunos errores de bookmarklet así que decidí escribir una extensión.
Yo uso este código en mi ext:
function getSelText(){
var txt = ''nothing'';
if (window.getSelection){
txt = "1" + window.getSelection();
} else if (document.getSelection) {
txt = "2" + document.getSelection();
} else if (document.selection) {
txt = "3" + document.selection.createRange().text;
} else txt = "wtf";
return txt;
}
var selection = getSelText();
alert("selection = " + selection);
Cuando hago clic en el icono de mi extensión, obtengo un "1". Por lo tanto, creo que el hecho de seleccionar fuera de la ventana del navegador hace que el navegador ya no vea el texto como "seleccionado".
Solo una teoría ...
pensamientos?
No necesita una API de Google para algo tan simple como esto ...
Utilizaré el servicio en línea de Bing como ejemplo. Tenga en cuenta que la URL está configurada para aceptar un parámetro:
var WebService=''http://www.bing.com/translator/?text='';
frameID.contentWindow.document.body.addEventListener(''contextmenu'',function(e){
T=frameID.contentWindow.getSelection().toString();
if(T!==''''){e.preventDefault(); Open_New_Tab(WebService+encodeURIComponent(T)); return false;}
},false);
NB: La función "Open_New_Tab ()" utilizada anteriormente es una imaginaria que acepta la URL del servicio web con el texto seleccionado codificado como parámetro.
Esa es la idea básicamente.
Puede hacerlo utilizando Extensions Messaging . Básicamente, su "página de antecedentes" enviará la solicitud a su servicio. Por ejemplo, digamos que tiene una "ventana emergente" y una vez que haga clic en ella, hará una "búsqueda de Google", que es su servicio.
content_script.js
En su secuencia de comandos de contenido, debemos escuchar una solicitud proveniente de su extensión, para que le enviemos el texto seleccionado:
chrome.extension.onRequest.addListener(function(request, sender, sendResponse) {
if (request.method == "getSelection")
sendResponse({data: window.getSelection().toString()});
else
sendResponse({}); // snub them.
});
background.html
Ahora en la página de fondo puede manejar el evento popup onclick para que sepamos que hicimos clic en la ventana emergente. Una vez que hacemos clic en él, se activa la devolución de llamada, y luego podemos enviar una solicitud al script de contenido usando "Mensajes" para recuperar el texto seleccionado.
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.sendRequest(tab.id, {method: "getSelection"}, function(response){
sendServiceRequest(response.data);
});
});
function sendServiceRequest(selectedText) {
var serviceCall = ''http://www.google.com/search?q='' + selectedText;
chrome.tabs.create({url: serviceCall});
}
Como ha visto, registré un oyente en un script de contenido para permitir que mi extensión envíe y reciba mensajes desde él. Luego, una vez que recibí un mensaje, lo manejo buscando Google.
Con suerte, puede usar lo que he explicado anteriormente y aplicarlo a su escenario. Solo tengo que advertirle que el código escrito anteriormente no está probado, por lo que podría ser deletreo o errores de sintaxis. Pero esos se pueden encontrar fácilmente mirando a su Inspector :)
Usar un content_scripts no es una gran solución, ya que se inyecta a todos los documentos, incluidos iframe-ads, etc. Obtengo una selección de texto vacío de otras páginas que la que espero la mitad de veces en sitios web desordenados.
Una mejor solución es inyectar código solo en la pestaña seleccionada, ya que aquí es donde vive el texto seleccionado. Ejemplo de la sección de jquery doc ready:
$(document).ready(function() {
// set up an event listener that triggers when chrome.extension.sendRequest is fired.
chrome.extension.onRequest.addListener(
function(request, sender, sendResponse) {
// text selection is stored in request.selection
$(''#text'').val( request.selection );
});
// inject javascript into DOM of selected window and tab.
// injected code send a message (with selected text) back to the plugin using chrome.extension.sendRequest
chrome.tabs.executeScript(null, {code: "chrome.extension.sendRequest({selection: window.getSelection().toString() });"});
});
script de contenido
document.addEventListener(''mouseup'',function(event)
{
var sel = window.getSelection().toString();
if(sel.length)
chrome.extension.sendRequest({''message'':''setText'',''data'': sel},function(response){})
})
Página de fondo
<script>
var seltext = null;
chrome.extension.onRequest.addListener(function(request, sender, sendResponse)
{
switch(request.message)
{
case ''setText'':
window.seltext = request.data
break;
default:
sendResponse({data: ''Invalid arguments''});
break;
}
});
function savetext(info,tab)
{
var jax = new XMLHttpRequest();
jax.open("POST","http://localhost/text/");
jax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
jax.send("text="+seltext);
jax.onreadystatechange = function() { if(jax.readyState==4) { alert(jax.responseText); }}
}
var contexts = ["selection"];
for (var i = 0; i < contexts.length; i++)
{
var context = contexts[i];
chrome.contextMenus.create({"title": "Send to Server", "contexts":[context], "onclick": savetext});
}
</script>
manifest.json
{
"name": "Word Reminder",
"version": "1.0",
"description": "Word Reminder.",
"browser_action": {
"default_icon": "images/stick-man1.gif",
"popup":"popup.html"
},
"background_page": "background.html",
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["js/myscript.js"]
}
],
"permissions": [
"http://*/*",
"https://*/*",
"contextMenus",
"tabs"
]
}
y aquí está el enlace donde tengo todo en una extensión para descargar. después de leer esto, lo intenté y lo publiqué.
y aquí está la fuente completa
Disfrutar