Firefox扩展：页面加载前获取当前标签页URL的实现方法

刚好做过类似的需求，Firefox扩展里有几种靠谱的方法能在页面加载前拿到URL，不同方法对应不同的场景，我给你拆解一下：

方法1：WebRequest API（请求发起阶段拦截，最早时机） #

这是获取URL最早的方式，在浏览器发送请求的瞬间就能拿到目标URL，甚至比标签页状态更新还要早。适合需要拦截请求、根据URL提前做预处理的场景。

实现步骤： #

1. 在manifest.json中声明所需权限：

{
  "manifest_version": 3,
  "name": "URL Capture",
  "version": "1.0",
  "permissions": [
    "webRequest",
    "<all_urls>", // 若只需监听特定域名，可替换为"https://*.example.com/*"
    "storage" // 用于存储URL到变量/本地存储
  ],
  "background": {
    "scripts": ["background.js"]
  }
}

2. 在background.js中添加监听逻辑：

// 监听所有请求的发起事件
browser.webRequest.onBeforeRequest.addListener(
  (details) => {
    const requestUrl = details.url;
    // 这里可以把URL存入变量，或者直接执行逻辑
    console.log("请求发起时的URL:", requestUrl);
    
    // 示例：存入浏览器本地存储，方便其他脚本调用
    browser.storage.local.set({ currentRequestUrl: requestUrl }).then(() => {
      console.log("URL已存储");
    });

    // 比如根据URL判断是否拦截请求、修改请求头等
    if (requestUrl.includes("unwanted-site.com")) {
      return { cancel: true }; // 拦截该请求
    }
  },
  { urls: ["<all_urls>"] }, // 监听范围，和manifest权限对应
  [] // 不需要额外参数，若需获取请求体可加["requestBody"]
);

方法2：Tabs API（标签页加载状态监听） #

如果你的逻辑是针对标签页本身（比如新标签打开、标签页切换加载），用Tabs API的onUpdated事件更合适，能在标签页进入loading状态时拿到URL，此时页面内容还未开始加载。

实现步骤： #

1. 在manifest.json中添加tabs权限：

"permissions": ["tabs", "storage"]

2. 在background.js中监听标签页状态变化：

browser.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
  // 仅当标签页状态变为"loading"时触发（页面开始加载但未完成）
  if (changeInfo.status === "loading" && tab.url) {
    const tabUrl = tab.url;
    console.log("标签页加载中的URL:", tabUrl);
    
    // 执行你的业务逻辑，比如根据URL注入特定脚本
    if (tabUrl.startsWith("https://github.com/")) {
      browser.tabs.executeScript(tabId, {
        file: "github-helper.js",
        runAt: "document_start"
      });
    }
  }
}, { properties: ["status"] }); // 只监听status属性变化，提升性能

方法3：Content Script（页面加载初期注入） #

如果需要在页面上下文中执行逻辑（比如操作DOM、和页面交互），可以把Content Script的注入时机设为document_start，此时DOM还未构建，但已经能拿到页面的URL，且比页面内容加载早。

实现步骤： #

1. 在manifest.json中配置Content Script：

"content_scripts": [
  {
    "matches": ["<all_urls>"], // 监听范围
    "js": ["content.js"],
    "run_at": "document_start" // 文档开始时注入，最早的页面上下文时机
  }
]

2. 在content.js中获取URL并执行逻辑：

// 此时页面还未加载任何内容，但已能拿到当前页面的URL
const pageUrl = window.location.href;
console.log("页面加载前的URL:", pageUrl);

// 示例：根据URL加载不同的样式或逻辑
if (pageUrl.includes("blog.")) {
  // 加载博客专属的样式
  const style = document.createElement("style");
  style.textContent = ".post-content { font-size: 16px; }";
  document.head.appendChild(style);
}

各方法对比 #

内容的提问来源于stack exchange，提问作者Learn on hard way