입력 유형 "날짜"가 편집 가능하지 않습니다.

Question

컨텍스트 유형이 "editable" 인 컨텍스트 메뉴 항목을 만들면 컨텍스트 메뉴가 <input> 태그로 열릴 때 표시됩니다.

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

가 왜을하고 거기 경우 : <input>는 일반 텍스트 상자 때

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

는 그것은, 메뉴가 더 이상 나타 date 또는 time과 같은 유형이 없습니다 그러나 경우, 작동 (다른 유형의 <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 : 나는 assu

  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]}); 
  });