Chrome扩展：页面跳转后如何访问新页面的Document对象？

你的代码问题在于Content Script的生命周期和页面绑定：当execute_edit里的点击操作触发页面跳转后，原页面的Content Script上下文会被销毁，但你代码里的await change_element()仍在原页面的上下文里执行，自然访问不到新页面的DOM——两次输出相同的document.title就是证明，因为原页面的上下文还没完全卸载，但已经无法感知新页面的变化。

针对这种页面跳转后的DOM操作需求，有两种常用的实现方式：

方案1：利用Storage传递状态，复用Content Script #

通过Chrome的本地存储标记操作状态，让新页面加载时自动执行修改逻辑（需要确保Content Script的匹配规则包含原页面和新页面）。

修改后的content_script.js #

(async () => {
  try {
    // 读取状态，判断是否为跳转后的目标页面
    const { shouldModify } = await chrome.storage.local.get('shouldModify');
    
    if (shouldModify) {
      // 在新页面执行DOM修改
      await change_element();
      // 清除状态，避免重复执行
      await chrome.storage.local.set({ shouldModify: false });
      return;
    }

    // 原页面逻辑：触发跳转并标记状态
    await execute_edit();
    await chrome.storage.local.set({ shouldModify: true });

  } catch (e) {
    console.error(e);
  }
})();

async function execute_edit() {
  console.log('原页面标题：', document.title);
  const el = document.getElementsByClassName("icon")[0];
  el?.click();
}

async function change_element() {
  console.log('新页面标题：', document.title);
  const el = document.querySelector("element");
  if (el) {
    console.log(el.innerHTML);
  } else {
    console.error('目标元素未找到');
  }
}

配置manifest.json #

需要添加storage权限，并确保Content Script匹配规则覆盖原页面和新页面：

{
  "manifest_version": 3,
  "name": "DOM修改工具",
  "version": "1.0",
  "permissions": ["storage"],
  "content_scripts": [
    {
      "matches": ["原页面URL匹配规则", "新页面URL匹配规则"],
      "js": ["content_script.js"]
    }
  ]
}

方案2：通过Background Script监听页面跳转 #

如果需要更精准控制页面加载时机，可以用Background Script监听页面导航事件，在目标页面加载完成后注入执行逻辑。

配置manifest.json #

添加webNavigation和scripting权限，注册Background脚本：

{
  "manifest_version": 3,
  "name": "DOM修改工具",
  "version": "1.0",
  "permissions": ["webNavigation", "scripting"],
  "background": {
    "service_worker": "background.js"
  },
  "content_scripts": [
    {
      "matches": ["原页面URL匹配规则"],
      "js": ["content_script.js"]
    }
  ]
}

content_script.js（仅负责触发跳转） #

(async () => {
  try {
    await execute_edit();
    // 通知Background等待目标页面加载
    chrome.runtime.sendMessage({ action: "waitForTargetPage" });
  } catch (e) {
    console.error(e);
  }
})();

async function execute_edit() {
  console.log('原页面标题：', document.title);
  const el = document.getElementsByClassName("icon")[0];
  el?.click();
}

background.js（监听页面并注入逻辑） #

chrome.runtime.onMessage.addListener((message, sender) => {
  if (message.action === "waitForTargetPage") {
    // 监听目标页面加载完成事件
    const listener = (details) => {
      // 校验是否为目标页面（替换成你的目标页面特征）
      if (details.url.includes("目标页面关键词")) {
        // 向目标页面注入执行函数
        chrome.scripting.executeScript({
          target: { tabId: details.tabId },
          func: change_element
        });
        // 移除监听器，避免重复触发
        chrome.webNavigation.onCompleted.removeListener(listener);
      }
    };
    chrome.webNavigation.onCompleted.addListener(listener);
  }
});

// 要在新页面执行的DOM修改逻辑
function change_element() {
  console.log('新页面标题：', document.title);
  const el = document.querySelector("element");
  if (el) {
    console.log(el.innerHTML);
  } else {
    console.error('目标元素未找到');
  }
}

• 方案1适合简单场景，实现成本低，无需额外的Background脚本；
• 方案2适合需要精准控制页面加载时机、或跳转逻辑复杂的场景，灵活性更高。

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