如何从Chrome扩展程序中检查HTML元素是否符合要求

Question

我正在编写一个Chrome扩展程序,它需要在注入contenteditable我的上下文脚本的页面上检测HTML元素(或用户可以键入的元素).

我现在正在这样做:

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!
    }
}

但我的方法似乎并不适用于我测试过的所有网站.

我很好奇,我在那里错过了什么？

PS.因为它是一个内容脚本,所以我没有使用jQuery来使其更加健壮.

Answer 1

contentEditable是属性隐含的contenteditable属性.你真正需要检查的是isContentEditable属性,它是一个布尔值,告诉你元素是否有可编辑的内容:

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

但是,不要获取所有元素并过滤它们,只需选择所有contenteditable元素:

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

实际上,当且仅当它具有contenteditable属性时,元素才具有可编辑内容,无论是否为空字符串.

现场演示