Firefox扩展开发如何无需加载页面进DOM即可获取其内部链接

你之前给出的代码无法运行是因为字符串类型的url本身没有links属性，只有DOM文档对象才有该属性。以下是Firefox扩展场景下符合要求的两种实现方案：

该方案仅请求页面原始HTML，在内存中解析DOM，完全不需要将页面挂载到当前可见DOM树中，性能开销最低。

• 前置配置：在manifest.json中声明目标站点的主机权限，例如要抓取YouTube的链接可配置：

{
  "host_permissions": ["*://*.youtube.com/*"]
}

• 实现代码：

async function getPageLinks(targetUrl) {
  const urlsFound = [];
  try {
    const res = await fetch(targetUrl);
    const htmlText = await res.text();
    // 在内存中创建DOM对象，不会插入到当前页面的文档流
    const doc = new DOMParser().parseFromString(htmlText, "text/html");
    // 提取所有带href属性的a标签
    const linkNodes = doc.querySelectorAll("a[href]");
    
    linkNodes.forEach(link => {
      // 自动将相对路径转换为绝对路径
      const absoluteUrl = new URL(link.getAttribute("href"), targetUrl).href;
      urlsFound.push(absoluteUrl);
    });

    urlsFound.forEach((item, index) => {
      console.log(`${index} : ${item}`);
    });
    return urlsFound;
  } catch (err) {
    console.error("链接提取失败：", err);
    return [];
  }
}

// 调用示例
getPageLinks("https://www.youtube.com");

如果目标页面的链接是JS动态生成的，静态HTML中不存在，可以使用后台隐藏标签页实现，全程不会被用户感知，也不会干扰当前页面的DOM。

• 前置配置：在manifest.json中声明权限：

{
  "permissions": ["tabs", "scripting"],
  "host_permissions": ["*://*.youtube.com/*"]
}

• 实现代码：

async function getDynamicPageLinks(targetUrl) {
  try {
    // 创建不激活的后台标签页，不会跳转到该页面
    const tab = await browser.tabs.create({
      url: targetUrl,
      active: false
    });
    // 等待页面加载完成
    await new Promise(resolve => {
      const updateListener = (tabId, changeInfo) => {
        if (tabId === tab.id && changeInfo.status === "complete") {
          browser.tabs.onUpdated.removeListener(updateListener);
          resolve();
        }
      };
      browser.tabs.onUpdated.addListener(updateListener);
    });
    // 注入脚本提取链接
    const [execResult] = await browser.scripting.executeScript({
      target: { tabId: tab.id },
      func: () => Array.from(document.querySelectorAll("a[href]")).map(link => link.href)
    });
    // 用完立即关闭后台标签
    await browser.tabs.remove(tab.id);
    
    const urlsFound = execResult.result;
    urlsFound.forEach((item, index) => {
      console.log(`${index} : ${item}`);
    });
    return urlsFound;
  } catch (err) {
    console.error("动态链接提取失败：", err);
    return [];
  }
}

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