webRequestBlocking-在Firefox中不匹配的URL全局模式

如何解决webRequestBlocking-在Firefox中不匹配的URL全局模式

我注意到我的网址格式与Firefox中的webRequestBlocking不匹配，而在chrome中工作正常。在我的代码中，当将要阻止的url添加到数据库中时，如果用户尝试访问感兴趣的站点和所有页面，则我将在路径之后添加glob *，以阻止感兴趣的站点和所有页面。发生的情况是，如果该网站被阻止，则将无法访问该主页，但是所有链接都将正常运行，而这不是我想要的。如我所写，这仅在firefox上发生。如何解决此问题以防止被阻止的站点导航？

background.js

/* eslint-disable no-unused-vars */
import db from './database';

let blacklist = [];

db.find({},(err,data) => {
  if( data.length > 0 ){
    data.forEach( (item) => {
      blacklist.push(item.siteUrl);
    })
  }
});

const menu = browser.contextMenus.create({
  type: "normal",title: browser.i18n.getMessage("extName"),contexts: ["all"],visible: true
});

const addToBlacklist = (details) => {
// siteUrl will look like: https://www.example.com/*
  let siteUrl = `${details.pageUrl}*`;
  db.findOne({ siteUrl },data) => {
    if( !data ){
      db.insert({ siteUrl },data) => {
        console.log(`Website ${data.siteUrl} added to blacklist`);
        blacklist.push(data.siteUrl);
        browser.tabs.insertCSS({
          file: browser.runtime.getURL("content-replace.css")
        });
      });
    }else{
      return;
    }
  });  
}

const removeFromBlacklist = (details) => {
  let siteUrl = `${details.pageUrl}*`;
  db.remove({ siteUrl },data) => {
    blacklist = blacklist.filter( (item) => {
      item !== siteUrl 
    });
    if( !blacklist ){
      browser.webRequest.onBeforeRequest.removeListener( blockRequests );
    }else{
      browser.webRequest.onBeforeRequest.addListener( blockRequests,{ urls: blacklist },["blocking"]);
    }
    console.log(`Website ${siteUrl} removed from blacklist`);
    browser.tabs.reload({ bypassCache: true });
  });
  console.log(blacklist);
}

browser.webRequest.onBeforeRequest.addListener( (details) => {
  var isBlocked = blacklist.includes(details.url);
  console.log(isBlocked);
  return { cancel: isBlocked }
},{
  urls: ["<all_urls>"],types: ["main_frame"]
},["blocking"]);

更新 我进行了一些调查，发现在chrome中也会发生此问题，这是因为我正在使用的includes(details.url)检查方法仅考虑主机，而不考虑被阻止的域路径。这意味着，如果用户阻止https://www.example.com/，然后导航到https://www.example.com/onepage，则该路径将导致isBlocked var设置为false，并且不会阻止对网站的请求。有人可以建议我解决吗？

更新1

如评论中所建议，从数据库中加载黑名单时，我已经为webRequest注册了一个事件侦听器。将网站添加到黑名单后，所有工作似乎都很好，但是当我需要从黑名单中删除网址时，问题就开始了。如果更新了黑名单阵列，则删除的网站也将保持被阻止状态，我怀疑我的逻辑有误：

let blacklist = [];

const blockRequests = (details) => {
  console.log(details);
  return { cancel: true }
}

db.find({},data) => {
  if( data.length > 0 ){
    data.forEach( (item) => {
      blacklist.push(item.siteUrl);
    });
    browser.webRequest.onBeforeRequest.addListener( blockRequests,["blocking"]);
  }
});

const addToBlacklist = (details) => {
  let siteUrl = `${details.pageUrl}*`;
  db.findOne({ siteUrl },data) => {
        console.log(`Website ${data.siteUrl} added to blacklist`);
        blacklist.push(data.siteUrl);
        browser.webRequest.onBeforeRequest.removeListener( blockRequests );
        browser.webRequest.onBeforeRequest.addListener( blockRequests,["blocking"]);
        browser.tabs.insertCSS({
          file: browser.runtime.getURL("content-replace.css")
        });
      });
    }else{
      return;
    }
  });  
}

const removeFromBlacklist = (details) => {
  let siteUrl = `${details.pageUrl}*`;
  db.remove({ siteUrl },data) => {
    blacklist = blacklist.filter( (item) => {
      item !== siteUrl 
    });
    console.log(blacklist);
    if( !blacklist ){
      browser.webRequest.onBeforeRequest.removeListener( blockRequests );
    }
    console.log(`Website ${siteUrl} removed from blacklist`);
    browser.tabs.reload({ bypassCache: true });
  });
}

解决方法

借助于wOxxOm的帮助，它为我带来了一个有趣的问题，我通过对代码进行一些小的修改就解决了该问题，我将其发布，以便其他人在遇到相同问题的情况下也可以从中受益： / p>

let blacklist = [];

const blockRequests = (details) => {
  console.log(details);
  return { cancel: true }
}

db.find({},(err,data) => {
  if( data.length > 0 ){
    data.forEach( (item) => {
      blacklist.push(item.siteUrl);
    });
// registering the webRequest listener if blacklist array is not empty
    browser.webRequest.onBeforeRequest.addListener( blockRequests,{ urls: blacklist },["blocking"]);
  }
});

// this function is called when user click a context menu voice
const addToBlacklist = (details) => {
  let siteUrl = `${details.pageUrl}*`;
  db.findOne({ siteUrl },data) => {
    if( !data ){
      db.insert({ siteUrl },data) => {
        console.log(`Website ${data.siteUrl} added to blacklist`);
        blacklist.push(data.siteUrl);
// removing the old listener
        browser.webRequest.onBeforeRequest.removeListener( blockRequests );
// registering the new one
        browser.webRequest.onBeforeRequest.addListener( blockRequests,["blocking"]);
        browser.tabs.insertCSS({
          file: browser.runtime.getURL("content-replace.css")
        });
      });
    }else{
      return;
    }
  });  
}


const removeFromBlacklist = (details) => {
  let siteUrl = `${details.pageUrl}*`;
  db.remove({ siteUrl },data) => {
    blacklist = blacklist.filter( (item) => {
      return item !== siteUrl 
    });
    if( blacklist.length > 0 ){
     browser.webRequest.onBeforeRequest.removeListener( blockRequests );
     browser.webRequest.onBeforeRequest.addListener( blockRequests,{ urls: 
blacklist },["blocking"]);
    }else{
    browser.webRequest.onBeforeRequest.removeListener( blockRequests );
    }
    browser.tabs.reload({ bypassCache: true });
  });
}