How to check if an HTML element is accessible for content from the Chrome extension

Question

I am writing a Chrome extension that should detect contenteditable HTML elements (or elements into which the user can enter) on the page where my script context is entered.

I am 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 does not seem to work on all sites on which I tested it.

I'm curious what I miss there?

PS. Since this is a content script, I do not use jQuery to make it more reliable.

Answer 1

contentEditable is a property that is implied by the contentEditable attribute. What you really need to check is the isContentEditable property, which is a boolean that indicates whether the element has 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 the contentEditable attribute, whether an empty string is or not.

Live demo