Question

当我创建一个上下文类型为"editable"的上下文菜单项时，它会在<input>标记上打开上下文菜单时显示。

chrome.contextMenus.create({
    ...
    contexts: ["editable"]
    ...
});

当<input>是普通文本框时，它可以正常工作，但是如果它的类型为date或time，则菜单不再显示：

<input type="date">    <!-- Nope -->

为什么会这样，是否有办法让它出现（仅限于可编辑的元素，包括不同类型的<input>）？

Answer 1

根据source code仅非非读取，未禁用的文本输入元素为"editable"。

解决方案：动态更改上下文菜单项context。

使用鼠标/键盘事件处理程序为所有/指定的URL声明内容脚本，该处理程序检查焦点元素并向后台脚本发送消息，以update上下文菜单项context到{{1}相应地，或"page"。

的manifest.json：
```
"editable"
```

content.js：

"permissions": ["contextMenus"],
"content_scripts": [{
    "matches": ["<all_urls>"],
    "js": ["content.js"],
    "run_at": "document_start"
}],
"background": {
    "scripts": ["background.js"],
    "persistent": false
},

background.js：

window.addEventListener('mousedown', toggleContextMenu);
window.addEventListener('keydown', toggleContextMenu);

function toggleContextMenu(e) {

    if (e.button == 2 ||
        // "Apps Menu" key
        e.keyCode == 93 && !e.altKey && !e.shiftKey && !e.ctrlKey && !e.metaKey) {

        var tag = e.target.localName;
        var type = e.target.type;

        var forceMenu =
            tag == 'input' && /^(date|time|month|color)$/.test(type) ||
            tag == 'select';

        chrome.runtime.sendMessage(forceMenu ? 'page' : 'editable');
    }
}

输入类型＆＃34;日期＆＃34;不是可编辑的

1 个答案: