How to check if HTML element is contenteditable from within Chrome Extension

Question

I'm writing a Chrome Extension that needs to detect contenteditable HTML elements (or the elements where a user can type into) on the page where my context script is injected into.

I'm currently doing this:

var objAll = document.getElementsByTagName("*");
for(var i = 0; i < objAll.length; i++)
{
    obj = objAll[i];

    if(obj.contentEditable &&
        obj.contentEditable != 'inherit' &&
        obj.contentEditable != 'false')
    {
        //Yes, this is a content editable element!
    }
}

But my method doesn't seem to work in all the sites that I tested it on.

I'm curious, what am I missing there?

PS. Because it's a content script I am not using jQuery to make it more robust.

Answer 1

contentEditable is a property that's implied by the contenteditable attribute. What you really need to check is the isContentEditable property, which is a boolean that tells if the element has an editable content or not:

if (obj.isContentEditable) {
    // do stuff
}

But instead of getting all the elements and filtering them, just select all the contenteditable elements:

var contEditables = document.querySelectorAll('[contenteditable]');
for (var i = 0; i < contEditables.length; i++) {
    // do stuff
}

In fact, an element has editable content if and only if it has a contenteditable attribute, whether is an empty string or not.

Live demo