入力タイプ「日付」は編集可能ではありません

Question

コンテキストタイプが"editable"のコンテキストメニュー項目を作成すると、<input>タグでコンテキストメニューを開いたときに表示されます。

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

<input>は通常のテキストボックスであるとき、それはそれは、このようなdateやtimeなどのタイプを持っている場合しかし、メニューはもはや現れ、働かない：

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

がそれであり、ある理由（異なる種類の<input>を含む編集可能な要素にのみ表示されるように）

Answer 1

source codeによれば、非読み取り専用の無効でないテキスト入力要素は"editable"です。

解決方法：コンテキストメニュー項目のcontextを動的に変更してください。

は、集束要素をチェックして、コンテキストメニュー項目のcontext"page"かに応じて"editable"からupdateにバックグラウンドスクリプトにメッセージを送信し、マウス/キーボードイベントハンドラを持つすべての/指定されたURLのコンテンツスクリプトを宣言します。

• manifest.jsonを：

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

• content.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'); 
      } 
  } 
  

• background.js：

  chrome.contextMenus.create({ 
      id: 'hello', 
      title: 'Hello', 
      contexts: ['editable'] 
  }, function() { 
      var ignoreErrors = chrome.runtime.lastError; 
  }); 
  
  chrome.contextMenus.onClicked.addListener(function(info, tab) { 
      if (info.menuItemId == 'hello') { 
       console.log('Hello'); 
      } 
  }); 
  
  chrome.runtime.onMessage.addListener(function(msg, sender, sendResponse) { 
      chrome.contextMenus.update('hello', {contexts: [msg]}); 
  });