Take the 2-minute tour ×

I'm working on a Chrome extension that allows a user to highlight text on a webpage. Simple, but it's to help me learn. Right now, I'm stuck and looking for how to best solve a problem.

Currently, I can highlight selected text that persists on the page.


function addHilite(color) {
    var range, sel = window.getSelection();
    if (sel.rangeCount && sel.getRangeAt) {
        range = sel.getRangeAt(0);
    document.designMode = "on";

    if (range) {

    if (!document.execCommand("hiliteColor", false, "#FFFF00")) {
        document.execCommand("backColor", false, "#FFFF00");
    document.designMode = "off";

I'm trying to get to a point where the user could select a highlighted range and use the same browser action to undo a highlight. I thought localStorage would be a good way to save the state between each click, but I can't figure out how to store multiple ranges as a string for reference. Is there a better way to do this?

localStorage Experiment

function sel() {
    var getText = window.getSelection().toString();
    localStorage.setItem('getText', JSON.stringify(getText));

share|improve this question

1 Answer 1

do you mean something like this?

var selections = [];

function sel() {
    var getText = window.getSelection().toString();
    localStorage.setItem('getText', selections);

share|improve this answer
I see what you're going for, but it produces the same result as my original script. Unless, I'm not calling the array properly to display all of the stored data. –  Brian Bennett Feb 7 '14 at 20:32

Your Answer


