Javascript 拦截基于Chrome扩展模式的URL

情景：

• 根据模式筛选一些重定向URL
• 显示一条消息，说明URL因重定向而被阻止
• 如果先前的请求被阻止，则在同一选项卡中“取消阻止”请求

我在webRequest.onBeforeRequest中使用的URL模式列表包含bit.ly。然后我点击网址bit.ly/2qlHCT，它重定向到google.com。在本例中，我将显示一条类似“request was blocked”的消息，但我不想通过在onBeforeRequest的回调中返回{cancel:true}来实际阻止请求

如果用户尝试在同一选项卡中正常访问google.com，那么我将显示一条消息“nothing was blocked”。 因此，这与Adblock在为特定域添加过滤器时所做的类似。如果允许域，Adblock的图标将变为绿色，否则将变为红色

---

我知道我可以使用chrome.storage来保存有关被阻止请求的信息，但是当URL模式不匹配时，我如何实现这一点呢？

解决方案非常简单。我使用

chrome.tabs.query

来阻止选项卡，但这是一种异步方法，我需要一个同步响应。使用

localStorage

成功了

function blockRequest(tabId) {
  let tabs = localStorage.blocked_tabs;
  tabs = (tabs !== undefined) ? JSON.parse(tabs) : [];
  tabs = tabs.filter(function (item) {
    return item !== tabId;
  });
  localStorage.setItem('blocked_tabs', JSON.stringify(tabs));
}

然后，我将blockRequest函数作为监听器添加到chrome.webRequest.onBeforeRequest和一些过滤器中

chrome.webRequest.onBeforeRequest.addListener(blockRequest, { urls: filters, types: ['main_frame'] });

---

当它不匹配时，页面将正常加载，因此您只需要为以后发生的任何事件（如onHeadersReceived或webNavigation.onCompleted等）提供一个侦听器。我尝试了这一点，但我将chrome.storage get和set方法包装到承诺中，以避免chrome.runtime错误。因此，我在同步函数（onBeforeRequest）中处理异步函数。基本上，我想知道我的听众是否被叫来了，这与我提出的想法无关。无论如何，如果没有代码，这个问题不太可能得到回答。我仍然需要阻止该选项卡，直到用户从其他域启动新的导航。如果bit.ly/2qlHCT重定向到google.com，则如果用户在谷歌上搜索某个内容，则该选项卡应保持阻止状态。