Chrome扩展：页面重定向后如何用jQuery获取元素并填充表单？

看起来你已经找对了方向，但在页面导航事件的时机和监听逻辑上还有些小细节需要调整，咱们一步步来搞定：

核心问题拆解 #

当第一个表单提交触发页面重定向后，旧页面的content script和注入脚本会随着页面销毁失效。要操作新页面的DOM，必须等新页面完全加载完成后，重新注入脚本才行。你之前用的webNavigation.onCommitted是页面开始导航时触发的，这时候新页面的DOM还没构建好，自然拿不到元素。

步骤1：修正Manifest权限配置 #

先把manifest.json里的权限补全并修正错误（注意你原来的webRequest 多了个空格，要去掉）：

{
  "manifest_version": 2,
  "name": "Name",
  "description": "Description",
  "version": "1.0",
  "browser_action": {
    "name": "Manipulate DOM",
    "icons": ["icon.png"],
    "default_icon": "icon.png",
    "default_popup": "index.html"
  },
  "content_scripts": [
    {
      "js": ["jquery.min.js", "custom.js"],
      "matches": ["http://*/*", "https://*/*"]
    }
  ],
  "permissions": [
    "activeTab",
    "tabs",
    "<all_urls>",
    "webRequest",
    "webNavigation"  // 必须添加这个权限才能监听页面导航事件
  ]
}

步骤2：调整Background.js的监听逻辑 #

把监听事件换成webNavigation.onCompleted，同时做好标签页匹配和监听器清理，避免重复触发：

function handleSecondStep(details) {
  // 只处理当前目标标签页的导航完成事件
  if (details.tabId === currentTabId) {
    chrome.tabs.executeScript(currentTabId, { file: "secondStep.js" });
    // 完成后移除监听器，防止后续其他页面导航误触发
    chrome.webNavigation.onCompleted.removeListener(handleSecondStep);
  }
}

let currentTabId;

chrome.browserAction.onClicked.addListener(function(tab) {
  currentTabId = tab.id;
  // 执行第一步脚本，提交第一个表单
  chrome.tabs.executeScript(tab.id, { file: "firstStep.js" }, function() {
    // 监听当前标签页的页面加载完成事件
    chrome.webNavigation.onCompleted.addListener(handleSecondStep);
  });
});

步骤3：编写secondStep.js操作新页面表单 #

在secondStep.js里写入操作第二个表单的逻辑，保险起见加上DOM就绪判断：

// 等待新页面DOM完全就绪后再操作
$(document).ready(function() {
  // 示例：填充第二个表单的元素
  $('input[name="email"]').val('alex@example.com');
  $('input[name="address"]').val('123 Main St');
  $('button[name="submit-second-form"]').trigger('click');
});

关键注意点 #

• 事件时机：onCompleted事件确保页面所有资源加载完成、DOM已构建完毕，这时候注入脚本才能精准找到目标元素。
• 标签页过滤：通过tabId匹配事件，避免其他标签页的导航触发你的脚本逻辑。
• 监听器清理：每次完成操作后移除监听器，防止同一个标签页后续导航重复执行脚本。

这样调整后，当第一个表单提交导致页面重定向，新页面加载完成时，secondStep.js会自动注入并执行，就能顺利操作第二个表单了。

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