Question

My extension adds a context menu whenever a user selects some text on the page.

Then, using info.selectionText, I use the selected text on a function executed whenever the user selects one of the items from my context menu. (from http://code.google.com/chrome/extensions/contextMenus.html)

So far, all works ok.

Now, I got this cool request from one of the extension users, to execute that same function once per line of the selected text.
A user would select, for example, 3 lines of text, and my function would be called 3 times, once per line, with the corresponding line of text.

I haven’t been able to split the info.selectionText so far, in order to recognize each line…
info.selectionText returns a single line of text, and could not find a way to split it.

Anyone knows if there’s a way to do so? is there any “hidden” character to use for the split?

Thanks in advance… in case you’re interested, here’s the link to the extension

https://chrome.google.com/webstore/detail/aagminaekdpcfimcbhknlgjmpnnnmooo

Answer 1

Ok, as OnClickData’s selectionText is only ever going to be text you’ll never be able to do it using this approach.

What I would do then is inject a content script into each page and use something similar to the below example (as inspired by reading this SO post – get selected text's html in div)

You could still use the context menu OnClickData hook like you do now but when you receive it instead of reading selectionText you use the event notification to then trigger your context script to read the selection using x.Selector.getSelected() instead. That should give you what you want. The text stays selected in your extension after using the context menu so you should have no problem reading the selected text.

if (!window.x) {
    x = {};
}

// https://stackoverflow.com/questions/5669448/get-selected-texts-html-in-div
x.Selector = {};
x.Selector.getSelected = function() {
    var html = "";
    if (typeof window.getSelection != "undefined") {
        var sel = window.getSelection();
        if (sel.rangeCount) {
            var container = document.createElement("div");
            for (var i = 0, len = sel.rangeCount; i < len; ++i) {
                container.appendChild(sel.getRangeAt(i).cloneContents());
            }
            html = container.innerHTML;
        }
    } else if (typeof document.selection != "undefined") {
        if (document.selection.type == "Text") {
            html = document.selection.createRange().htmlText;
        }
    }
    return html;
}

$(document).ready(function() {
    $(document).bind("mouseup", function() {
        var mytext = x.Selector.getSelected();
        alert(mytext);
        console.log(mytext);
    });
});​

http://jsfiddle.net/richhollis/vfBGJ/4/

See also: Chrome Extension: how to capture selected text and send to a web service