2

我在我的 chome 扩展中创建了一个上下文菜单作为复选框，我成功创建了仅对可编辑字段可见的菜单。

问题是我需要根据文本字段（焦点元素）中的数据属性将菜单显示为选中状态。使用以下代码，它在全局级别显示已选中（意味着如果我在一个页面/elemebt 中检查了菜单，则其他页面/元素也将保持选中状态。）

如何根据元素的数据属性使其选中/取消选中？

var addinMenu = chrome.contextMenus.create({
    "title": "My Addin Menu",
    "contexts": ["editable"]
});
var disableOrEnable = chrome.contextMenus.create({
    "type": "checkbox",
    "title": "Disable",
    "parentId": addinMenu,
    "id": "myaddin_disable",
    "checked": true,
    "contexts": ["editable"],
    "onclick": disableOrEnableMyAddin
});
4

1 回答 1

3

chrome.contextMenus.update()当菜单属性应该改变时调用，例如：

chrome.contextMenus.update(
  disableOrEnable,
  { type: 'checkbox', checked: false });

看起来您可以捕捉oncontextmenu事件并进行更改，这些更改会立即反映在发布的菜单中（但我从 Rob W 的评论中看到可能存在竞争条件）。这对我有用：

var contextMenu = chrome.contextMenus.create(
  {
    type: 'checkbox',
    title: 'how now brown cow',
    checked: false,
    contexts: ['all']
  });

var element = document.getElementById('hello');
element.addEventListener(
  'mouseover',
  function(e) {
    element.setAttribute('underMouse', 'true');
  });
element.addEventListener(
  'mouseout',
  function(e) {
    element.setAttribute('underMouse', '');
  });

window.oncontextmenu = function(e) {
  chrome.contextMenus.update(
    contextMenu,
    {
      type: 'checkbox',
      checked: element.getAttribute('underMouse') == 'true'
    });
}

如果您只对当前关注的文本字段感兴趣，您也可以更改菜单focus和blur事件。您可能还想检查菜单属性的'editable'选项contexts（不确定它的作用，但听起来可能会将菜单限制为文本输入元素）。

于 2013-03-09T05:07:02.697 回答