wake-up-neo.com

Chrome-Erweiterung: So erfassen Sie ausgewählten Text und senden ihn an einen Webservice

Für die Google Chrome-Erweiterung muss ich ausgewählten Text auf einer Webseite erfassen und an einen Webdienst senden. Ich stecke fest!

Zuerst habe ich ein Bookmarklet ausprobiert, aber Chrome unter Mac scheint einige Bookmarklet-Fehler zu haben, also entschied ich mich, eine Erweiterung zu schreiben.

Ich verwende diesen Code in meiner 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);

Wenn ich auf mein Erweiterungssymbol klicke, bekomme ich eine "1". Ich denke, die Auswahl außerhalb des Browserfensters führt dazu, dass der Text vom Browser nicht mehr als "ausgewählt" erkannt wird.

Nur eine Theorie ....

gedanken?

32
phil swenson

Sie können dies tun, indem Sie Extensions Messaging verwenden. Grundsätzlich sendet Ihre "Hintergrundseite" die Anfrage an Ihren Dienst. Nehmen wir beispielsweise an, Sie haben ein "Popup", und sobald Sie darauf klicken, wird eine "Google-Suche" durchgeführt, die Ihren Service darstellt.

content_script.js

In Ihrem Inhaltsskript müssen wir auf eine Anfrage von Ihrer Erweiterung warten, damit wir den ausgewählten Text senden:

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

background.html

Jetzt können Sie in der Hintergrundseite das Popup Onclick-Ereignis behandeln, damit wir wissen, dass wir auf das Popup geklickt haben. Sobald wir darauf geklickt haben, wird der Rückruf ausgelöst und wir können Anfrage senden mit "Messaging" an das Inhaltsskript senden, um den ausgewählten Text abzurufen.

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

Wie Sie gesehen haben, habe ich einen Listener in einem Inhaltsskript registriert, damit meine Erweiterung Nachrichten senden und empfangen kann. Sobald ich eine Nachricht erhalten habe, gehe ich damit um, indem ich nach Google suche.

Ich hoffe, Sie können das, was ich oben erklärt habe, auf Ihr Szenario anwenden. Ich muss Sie nur warnen, dass der oben geschriebene Code nicht getestet wurde. Es kann sich also um Rechtschreib- oder Syntaxfehler handeln. Diese können Sie jedoch leicht finden, indem Sie Ihren Inspector betrachten :) 

43
Mohamed Mansour

content script

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

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

Hintergrundseite

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

und hier ist der Link, wo ich alle in einer Erweiterung zum Download habe. Nachdem ich das gelesen habe, habe ich es selbst ausprobiert und veröffentlicht. 

und hier ist die komplette Quelle

http://vikku.info/programming/chrome-extension/get-selected-text-send-to-web-server-in-chrome-extension-communicate-zwischen-content-script-und-hintergrundseite. htm

Genießen

6

Die Verwendung eines content_scripts ist keine großartige Lösung, da sie in alle Dokumente eingefügt wird, einschließlich iframe-ads usw. Ich bekomme eine leere Textauswahl von anderen Seiten als der, die ich auf halben Zeiten auf unordentlichen Websites erwarte. 

Eine bessere Lösung ist das Einfügen von Code nur in die ausgewählte Registerkarte, da hier der gewählte Text trotzdem vorhanden ist. Beispiel für einen jquery doc ready Abschnitt: 

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

Aus Ihrem Code ist nicht klar, wo er ist. Was ich damit meine, ist, dass, wenn dieser Code entweder in popup html oder im hintergrund html vorliegt, die Ergebnisse, die Sie sehen, korrekt sind, nichts in diesen Fenstern ausgewählt wird.

Sie müssen diesen Code in ein Inhaltsskript einfügen, damit er auf das DOM der Seite zugreifen kann. Wenn Sie dann auf Ihre Browseraktion klicken, müssen Sie eine Nachricht an das Inhaltsskript senden, um die aktuelle Dokumentauswahl abzurufen.

1
Kinlan

Sie benötigen keine Google-API für etwas so einfaches wie dieses ...

Ich werde den Bing-Onlinedienst als Beispiel verwenden. Beachten Sie, dass die URL so eingerichtet ist, dass sie einen Parameter akzeptiert:

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

Hinweis: Die oben verwendete Funktion "Open_New_Tab ()" ist eine imaginäre Funktion, die die Webservice-URL mit dem codierten ausgewählten Text als Parameter akzeptiert.

Das ist im Grunde die Idee.

0
user4723924