Extension Chrome : comment capturer le texte sélectionné et l'envoyer à un service web

Question

Pour l'extension Google Chrome, je dois capturer le texte sélectionné dans une page Web et l'envoyer à un service Web. Je suis coincé !

J'ai d'abord essayé un bookmarklet, mais Chrome sur Mac semble avoir quelques bugs de bookmarklet donc j'ai décidé d'écrire une extension.

J'utilise ce code dans mon 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);

Lorsque je clique sur l'icône de mon extension, j'obtiens un "1". Je pense donc que le fait de sélectionner en dehors de la fenêtre du navigateur fait que le texte n'est plus considéré comme "sélectionné" par le navigateur.

Juste une théorie....

des pensées ?

Answer 1

Vous pouvez le faire en utilisant Extensions Messagerie . En fait, votre "page d'arrière-plan" enverra la demande à votre service. Par exemple, disons que vous avez une "popup" et que lorsque vous cliquez dessus, elle effectue une "recherche Google", qui est votre service.

contenu_script.js

Dans votre contenu script, nous devons écouter une requête provenant de votre extension, afin de lui envoyer le texte sélectionné :

chrome.extension.onRequest.addListener(function(request, sender, sendResponse) {
    if (request.method == "getSelection")
      sendResponse({data: window.getSelection().toString()});
    else
      sendResponse({}); // snub them.
});

fond.html

Maintenant, dans la page d'arrière-plan, vous pouvez gérer la popup. événement "onclick pour que nous sachions que nous avons cliqué sur le popup. Une fois que nous avons cliqué dessus, le callback se déclenche, et nous pouvons alors envoyer une demande au contenu script en utilisant "Messagerie" pour récupérer le texte sélectionné.

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

Comme vous l'avez vu, j'ai enregistré un écouteur dans un script de contenu pour permettre à mon extension d'envoyer et de recevoir des messages de celui-ci. Ensuite, une fois que j'ai reçu un message, je le traite en recherchant Google.

J'espère que vous pourrez utiliser ce que j'ai expliqué ci-dessus et l'appliquer à votre scénario. Je dois juste vous prévenir que le code écrit ci-dessus n'a pas été testé, il peut donc y avoir des erreurs d'orthographe ou de syntaxe. Mais celles-ci peuvent être facilement trouvées en regardant votre inspecteur :)

Answer 2

contenu script

document.addEventListener('mouseup',function(event)
{
    var sel = window.getSelection().toString();

    if(sel.length)
        chrome.extension.sendRequest({'message':'setText','data': sel},function(response){})
})

Page d'accueil

<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>

manifeste.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"
  ]
}

et voici le lien où j'ai une extension tout en un à télécharger. Après avoir lu ceci, j'ai essayé de mon propre chef et j'ai publié.

et voici la source complète

http://vikku.info/programming/chrome-extension/get-selected-text-send-to-web-server-in-chrome-extension-communicate-between-content-script-et-background-page.htm

Profitez de

Answer 3

L'utilisation d'un content_scripts n'est pas une bonne solution car il injecte dans tous les documents, y compris les iframe-ads, etc. La moitié du temps, j'obtiens une sélection de texte vide sur d'autres pages que celle à laquelle je m'attends sur des sites Web désordonnés.

Une meilleure solution consiste à injecter le code dans l'onglet sélectionné uniquement, car c'est là que se trouve le texte sélectionné de toute façon. Exemple de section 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() });"});
});

Answer 4

Votre code n'indique pas clairement où il se trouve. Ce que je veux dire, c'est que si ce code se trouve dans le popup html ou le background html, les résultats que vous obtenez sont corrects, rien dans ces fenêtres ne sera sélectionné.

Vous devrez placer ce code dans un script de contenu afin qu'il ait accès au DOM de la page, puis lorsque vous cliquez sur l'action de votre navigateur, vous devrez envoyer un message au script de contenu pour récupérer la sélection actuelle du document.