javascript - 如何从 Chrome 扩展程序中检查 HTML 元素是否可内容

Question

我正在编写一个 Chrome 扩展，它需要在我的上下文脚本所在的页面上检测 contenteditable HTML 元素(或用户可以输入的元素)注入(inject)。

我目前正在这样做:

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

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

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

附言。因为它是一个内容脚本，所以我没有使用 jQuery 来使其更健壮。

Answer 1

contentEditable 是 contenteditable 属性隐含的属性。您真正需要检查的是 isContentEditable 属性，它是一个 bool 值，指示元素是否具有可编辑的内容:

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

但不是获取所有元素并过滤它们，而是选择所有 contenteditable 元素:

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

事实上，一个元素具有可编辑的内容当且仅当它具有contenteditable 属性时，无论是否为空字符串。

Live demo