javascript - 在内容脚本收到响应之前阻止上下文菜单启动

Question

(我将内容脚本称为cs.js，将background.js称为ba.js)

场景:

oncontextmenu 点击，我需要确定页面的 url 及其阻止状态并将其发送到 ba.js。代码(cs.js):

var triggered = false;

window.oncontextmenu = function(event){
    if(triggered) return;

    chrome.runtime.sendMessage({
        url: window.location.href,
        blocked: isBlocked
    }, function(response){  // after work has been done
        triggered = true;           
        triggerEvent(window, "contextmenu", event); // line A
        triggered = false; // line C
    });

    return false; // line B
};

问题是，当我收到响应时，上下文菜单已经显示给用户而没有我想要的消息(因为我没有收到响应，这意味着>ba.js 尚未完成 chrome.contextMenus.update 调用)因此，作为解决方案，我有:

1. 返回 false 以防止显示(B 行)
2. 使用 trigger bool 值来确保当我在 A 行上 triggerEvent(全局)时不会再次发送消息。
3. 然后在 C 行重置trigger bool 值。

但是这种方法行不通。因此，我需要一种方法:

On context menu action, send a message from the pertaining cs.js to ba.js to update the context menu based on certain parameters available only to the cs.js and then, ONLY on receiving the message back, show the context menu to the user.

注意:我已经尝试过使用 chrome.tabs.onUpdated 和其他 friend (以便我可以检测用户所在的当前页面，因此我自己获取必要的参数)，但是，我也无法使用它们来使其工作。

ba.jsonMessage:

chrome.runtime.onMessage.addListener(function(msg, sender, sendResponse){   
    if(typeof msg.url !== undefined){
        url = msg.url; // global

        isBlocked = msg.blocked; // global
        action = isBlocked ? "Unblock" : "Block"; // global

        chrome.contextMenus.update("blockSite", { // update action
            title: action + " this site"
        });

        sendResponse("done");  // send confirmation
    }
});

triggerEvent代码:

function triggerEvent(node, eventName, obj){
    var ev = new CustomEvent(eventName, obj || {});

    node.dispatchEvent(ev);
}

更新:

所以，我使用了 onActivated，这次除了一个大问题之外，效果非常好:

如果我打开一个新选项卡，然后单击网站图 block /输入网站地址，网站就会打开。然后，onActivated 监听器不会触发(这当然是显而易见的。)我不能为此使用 onUpdated ，因为只要 iframe 更新，即使在当前不活动的页面中，它也会触发。

我可以做什么来纠正这个错误？

Answer 1

您无法实际触发 Chrome 中的内置上下文菜单。因为这是 Chrome 用来授予某些临时权限(例如 activeTab)的用户手势之一。

使用 tabs.onActivated 和 tabs.onUpdated 事件监听器来跟踪事件选项卡中的更改并相应地更新上下文菜单。

• 持久后台页面(默认模式):

  var activeTabId;
  
  chrome.tabs.onActivated.addListener(function(info) { updateContextMenu(info.tabId) });
  
  chrome.tabs.onUpdated.addListener(function(tabId, info, tab) {
      if (tabId == activeTabId) {
          updateContextMenu(tabId);
      }
  });
  
  function updateContextMenu(tabId) {
      activeTabId = tabId;
      chrome.tabs.get(tabId, function(tab) {
          var isBlocked = checkBlockedState(tab.url);
          chrome.contextMenus.update("blockSite", {
              title: (isBlocked ? "Unblock" : "Block") + " this site"
          });
      });
  }
  

• 事件页面("persistent": false):

  chrome.tabs.onActivated.addListener(function(info) { updateContextMenu() });
  
  chrome.tabs.onUpdated.addListener(function(tabId, info, tab) {
      chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
          if (tabs[0].id == tabId) {
              updateContextMenu();
          }
      });
  });
  
  function updateContextMenu() {
      chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
          var isBlocked = checkBlockedState(tabs[0].url);
          chrome.contextMenus.update("blockSite", {
              title: (isBlocked ? "Unblock" : "Block") + " this site"
          });
      });
  }