如何从 Chrome 扩展程序中检查 HTML 元素是否可编辑

Question

我正在编写一个 Chrome 扩展程序，它需要在我的 上下文脚本 被注入的页面上检测contenteditable HTML 元素（或用户可以输入的元素）。 p>

我目前正在这样做：

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 属性，无论是否为空字符串。

Live demo