一千萬個為什麽

搜索

Chrome擴展程序:如何捕獲所選文本並發送到Web服務

對於Google Chrome擴展程序,我需要在網頁中捕獲所選文本並發送到網絡服務。我被卡住了!

首先我嘗試了一個書簽,但Mac上的Chrome似乎有一些書簽錯誤,所以我決定寫一個擴展名。

我在我的分機中使用此代碼:

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

當我點擊我的擴展圖標時,我得到一個“1”。所以我認為在瀏覽器窗口之外選擇的行為導致瀏覽器不再將文本視為“已選擇”。

只是一個理論....

想法?

最佳答案

您可以使用 Extensions Messaging 來完成此操作。基本上,您的“後臺頁面”會將請求發送給您的服務。例如,假設您有一個“彈出窗口”,一旦您點擊它,它將執行“Google搜索”,這是您的服務。

content_script.js

在您的內容腳本中,我們需要偵聽來自您的擴展程序的請求,以便我們向其發送所選文本:

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

background.html

現在在後臺頁面中,您可以處理彈出的 onclick事件,以便我們知道我們點擊了彈出窗口。點擊它後,回調即會觸發,然後我們可以發送請求使用“Messaging”獲取所選文本的內容腳本。

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

如您所見,我在內容腳本中註冊了一個偵聽器,以允許我的擴展程序從中發送和接收消息。然後,當我收到消息後,我會通過搜索Google來處理它。

希望您可以使用我上面解釋的內容並將其應用到您的場景中。我只是要警告你,上面編寫的代碼沒有經過測試,所以它們可能是拼寫錯誤或語法錯誤。但是通過查看你的Inspector可以輕松找到這些:)

轉載註明原文: Chrome擴展程序:如何捕獲所選文本並發送到Web服務