web-dev-qa-db-fra.com

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

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, alors j'ai décidé d'écrire une extension.

J'utilise ce code dans mon poste:

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, je reçois un "1". Je pense donc que le fait de sélectionner en dehors de la fenêtre du navigateur empêche le navigateur de voir le texte comme "sélectionné".

Juste une théorie ....

pensées?

google-chromegoogle-chrome-extension
32
phil swenson

Vous pouvez le faire en utilisant Extensions Messaging . Fondamentalement, votre "page d'arrière-plan" enverra la demande à votre service. Par exemple, disons que vous avez un "popup" et qu'une fois que vous cliquez dessus, il fera une "recherche Google" qui est votre service.

content_script.js

Dans votre script de contenu, nous devons écouter les demandes émanant 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.
});

background.html

Maintenant en page d’arrière-plan, vous pouvez gérer l’événement popup - onclick afin que nous sachions que nous avons cliqué sur la popup. Une fois que nous avons cliqué dessus, le rappel est déclenché, puis nous pouvons envoyer une demande au script de contenu 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 auditeur dans un script de contenu pour permettre à mon extension d'envoyer et de recevoir des messages de cette extension. Puis, une fois le message reçu, je le gère 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 avertir que le code écrit ci-dessus n'est pas testé, il peut donc s'agir d'erreurs d'orthographe ou de syntaxe. Mais ceux-ci peuvent facilement être trouvés en regardant votre inspecteur :) 

43
Mohamed Mansour

script de contenu

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

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

Page de fond

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

et voici le lien où j’ai tout dans une extension à télécharger . après avoir lu ceci j’ai essayé de mon côté et l’ai publié. 

et voici la source complète

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

Prendre plaisir

6
Jayapal Chandran

L'utilisation de content_scripts n'est pas une bonne solution car elle injecte dans tous les documents, y compris iframe-ads etc. Je reçois une sélection de texte vide à partir d'autres pages que celle que j'attends la moitié du temps sur des sites Web désordonnés. 

Une meilleure solution consiste à injecter du code dans l'onglet sélectionné uniquement, car c'est là que réside le texte sélectionné. 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() });"});
});
3
user1231157

Votre code ne précise pas où il se trouve. Ce que je veux dire, c'est que si ce code est soit en popup html, soit en arrière-plan html, alors les résultats que vous voyez 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 extraire le document sélectionné.

1
Kinlan

Vous n'avez pas besoin d'une API Google pour quelque chose d'aussi simple que cela ...

Je vais utiliser le service en ligne Bing à titre d'exemple. Notez que l'URL est configurée pour accepter un paramètre:

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 fonction "Open_New_Tab ()" utilisée ci-dessus est une fonction imaginaire qui accepte l'URL du service Web avec le texte codé sélectionné en tant que paramètre.

C'est l'idée fondamentalement.

0
user4723924