Question

我在我的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
});

Answer 1

当菜单属性发生变化时，请调用chrome.contextMenus.update()，例如：

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

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

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选项（不确定它的作用，但听起来可能会将菜单限制为文本输入元素）。

带自定义上下文的Chrome扩展程序上下文

1 个答案: