Chrome 扩展程序:如何捕获选定的文本并发送到网络服务 [英] Chrome Extension: how to capture selected text and send to a web service

问题描述

对于 Google Chrome 扩展程序，我需要在网页中捕获选定的文本并将其发送到网络服务.我卡住了！

For the Google Chrome extension, I need to capture selected text in a web page and send to a web service. I'm stuck!

首先我尝试了一个书签，但 Mac 上的 Chrome 似乎有一些书签错误，所以我决定编写一个扩展程序.

First I tried a bookmarklet, but Chrome on Mac seems to have some bookmarklet bugs so I decided to write an extension.

我在我的分机中使用此代码:

I use this code in my 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);

当我点击我的扩展图标时，我得到一个1".所以我认为在浏览器窗口外进行选择的行为导致浏览器不再将文本视为已选择".

When I click on my extension icon, I get a "1". So I think the act of selecting outside the browser window is causing the text to not be seen by the browser as "selected" any more.

只是一个理论....

想法?

推荐答案

您可以使用 扩展消息.基本上，您的背景页面"会将请求发送到您的服务.例如，假设您有一个弹出窗口"，一旦您点击它，它就会执行Google 搜索"，这是您的服务.

You can do this by using Extensions Messaging. Basically, your "background page" will send the request to your service. For example, lets say you have a "popup" and once you click on it, it will do a "Google search" which is your service.

在您的内容脚本中，我们需要监听来自您的扩展程序的请求，以便我们向其发送所选文本:

In your content script, we need to listen for a request coming from your extension, so that we send it the selected text:

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

背景.html

现在在后台页面中，您可以处理弹出的 onclick 事件 所以我们知道我们点击了弹出窗口.一旦我们点击它，回调就会触发，然后我们可以发送请求 使用消息"到内容脚本以获取所选文本.

background.html

Now in background page you can handle the popup onclick event so that we know we clicked on the popup. Once we clicked on it, the callback fires, and then we can send a request to the content script using "Messaging" to fetch the selected text.

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 来处理它.

As you have seen, I registered a listener in a content script to allow my extension to send and receive messages from it. Then once I received a message, I handle it by searching for Google.

希望您可以使用我上面解释的内容并将其应用到您的场景中.我只是要警告你，上面写的代码没有经过测试，所以它们可能是拼写或语法错误.但是通过查看您的 Inspector 可以轻松找到这些内容:)

Hopefully, you can use what I explained above and apply it to your scenario. I just have to warn you that the code written above is not tested, so their might be spelling, or syntax errors. But those can easily be found by looking at your Inspector :)

这篇关于Chrome 扩展程序:如何捕获选定的文本并发送到网络服务的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！