Chrome扩展：请求发起前存储URL功能失效问题排查

为什么获取到的是undefined？ #

你当前的实现存在两个关键问题：

• webRequest.onBeforeRequest触发范围过宽：这个事件会监听页面的所有网络请求（包括图片、脚本、样式等资源加载请求），每次请求都会覆盖chrome.storage.local里的initialURL。当你打开popup时，最后一次触发的可能是某个资源请求，甚至可能没有任何请求触发过，导致存储的initialURL不存在，最终返回undefined。
• 未区分页面导航与资源请求：你需要的是地址栏输入的初始导航URL，而非页面加载过程中的资源请求，但当前代码没有做任何过滤。

正确的实现方式 #

要捕获地址栏输入的初始导航URL（重定向完成前），应该使用webNavigationAPI的onBeforeNavigate事件——它专门针对页面导航动作，并且可以通过frameId: 0过滤主框架的导航，避免资源请求的干扰。

修改后的代码 #

background.js

// 监听主框架的导航开始事件，仅捕获地址栏触发的初始导航
chrome.webNavigation.onBeforeNavigate.addListener((details) => {
  // 只处理主框架的导航（frameId为0代表页面本身的导航，而非嵌套框架或资源请求）
  if (details.frameId === 0) {
    chrome.storage.local.set({ initialURL: details.url });
  }
}, { urls: ['<all_urls>'] });

popup.js

chrome.storage.local.get('initialURL', (data) => {
  const initialURL = data.initialURL;
  if (initialURL) {
    console.log('初始URL:', initialURL);
    // 在此处调用API检查重定向逻辑
  } else {
    console.log('未捕获到初始导航URL，请先在地址栏输入网址进行导航');
  }
});

额外优化建议 #

• 若需要跟踪当前标签的完整重定向链路，可以结合webNavigation.onCompleted或webRequest.onResponseStarted事件，记录重定向过程中的每一步URL。
• 由于Chrome扩展的service worker是事件驱动的，可能会在闲置时休眠，且不同标签的导航会互相覆盖存储的initialURL，建议存储时关联标签ID：

// background.js 修改存储逻辑
chrome.webNavigation.onBeforeNavigate.addListener((details) => {
  if (details.frameId === 0) {
    chrome.storage.local.set({ [`initialURL_${details.tabId}`]: details.url });
  }
}, { urls: ['<all_urls>'] });

// popup.js 获取当前标签的初始URL
chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
  const currentTabId = tabs[0].id;
  chrome.storage.local.get(`initialURL_${currentTabId}`, (data) => {
    const initialURL = data[`initialURL_${currentTabId}`];
    console.log('当前标签初始URL:', initialURL);
  });
});

内容的提问来源于stack exchange，提问作者Adders