Chrome扩展Manifest V3如何在webRequest.onBeforeRequest中调用executeScript

chrome.webRequest.onBeforeRequest 回调的第一个参数是网络请求详情对象，而非你误认为的标签页对象，你直接读取tab.id相当于读取了不存在的属性，给tabId传入了undefined值，因此触发必填属性缺失的报错。
此外如果请求是浏览器后台发起的无对应前台标签页的请求，请求详情对象的tabId字段会返回-1，这种场景下不需要执行注入逻辑，需要提前过滤避免二次报错。

1. 调整background.js代码 #

function reddenPage(url) {
    console.log(url);
}
  
chrome.webRequest.onBeforeRequest.addListener((reqDetails) => {
    // 过滤无对应标签页的后台请求
    if (reqDetails.tabId === -1) return
    chrome.scripting.executeScript({
      target: { tabId: reqDetails.tabId },
      function: reddenPage,
      args: [reqDetails.url],
    });
},
{urls: ["*://*.google.com/*"]},
[]);

2. 清理manifest冗余配置（可选） #

Manifest V3的background service worker配置不需要matches字段，你现有配置里的该字段属于无效冗余项，可以直接删除，不影响功能运行。

后续扩展提示 #

如果需要给当前标签页注入自定义样式，可调用chrome.scripting.insertCSS接口，参数格式和executeScript保持一致，指定target和对应的样式资源即可。

内容的提问来源于stack exchange，提问作者n.r.