基于Chrome扩展Manifest V3模拟页面已有按钮点击操作

完全可以在Manifest V3版本的Chrome扩展中实现你需要的功能——通过点击自定义注入的链接，模拟页面已有按钮的点击和后续表单操作（比如亚马逊结账页更新收货地址）。以下是具体实现步骤和代码示例：

核心思路 #

利用**内容脚本（Content Script）**完成两个核心任务：

1. 向目标页面注入自定义链接UI
2. 监听链接点击事件，执行模拟DOM操作的逻辑

Manifest V3对内容脚本的DOM访问权限没有限制，只要配置正确的页面匹配规则，就能直接操作页面元素。

实现步骤 #

1. 配置Manifest.json #

声明内容脚本的匹配规则，确保脚本能注入到亚马逊结账页面：

{
  "manifest_version": 3,
  "name": "亚马逊地址更新工具",
  "version": "1.0",
  "content_scripts": [
    {
      "matches": ["https://www.amazon.com/gp/buy/shipoptionselect/*"],
      "js": ["content.js"]
    }
  ]
}

2. 编写内容脚本（content.js） #

脚本负责注入链接、监听点击，并模拟页面操作：

// 向页面注入自定义更新链接
function injectUpdateLink() {
  const updateLink = document.createElement('a');
  updateLink.id = 'custom-update-shipping';
  updateLink.textContent = 'Update-Shipping Address';
  updateLink.style.cssText = 'margin: 0 10px; padding: 8px 12px; background: #ff9900; color: #fff; text-decoration: none; border-radius: 4px;';

  // 将链接插入到结账页的地址模块附近（根据实际页面调整父元素选择器）
  const addressContainer = document.querySelector('.a-box-group.a-spacing-base');
  if (addressContainer) {
    addressContainer.appendChild(updateLink);
  }

  // 绑定点击事件
  updateLink.addEventListener('click', handleUpdateClick);
}

// 处理链接点击，执行模拟操作
async function handleUpdateClick(e) {
  e.preventDefault(); // 阻止默认链接跳转

  // 步骤1：模拟点击"Change"按钮
  const changeBtn = document.querySelector('input[aria-label="Change"]');
  if (!changeBtn) {
    console.error('未找到Change按钮');
    return;
  }
  changeBtn.click();
  console.log('已触发Change按钮点击');

  // 步骤2：等待"添加新地址"按钮加载完成
  const addNewBtn = await waitForElement('#address-book-entry-add-new');
  addNewBtn.click();
  console.log('已触发添加新地址按钮点击');

  // 步骤3：填充新地址表单（选择器需根据亚马逊页面实际结构调整）
  const fullNameInput = await waitForElement('#address-ui-widgets-enterAddressFullName');
  fullNameInput.value = 'John Doe';
  document.querySelector('#address-ui-widgets-enterAddressLine1').value = '123 Main St';
  document.querySelector('#address-ui-widgets-enterAddressCity').value = 'New York';
  document.querySelector('#address-ui-widgets-enterAddressStateOrRegion').value = 'NY';
  document.querySelector('#address-ui-widgets-enterAddressPostalCode').value = '10001';
  document.querySelector('#address-ui-widgets-enterAddressPhoneNumber').value = '1234567890';

  // 步骤4：模拟点击"使用此地址"按钮
  const saveBtn = await waitForElement('input[aria-label="Use this address"]');
  saveBtn.click();
  console.log('已保存新地址');
}

// 辅助函数：等待目标元素渲染完成（比setTimeout更可靠）
function waitForElement(selector) {
  return new Promise(resolve => {
    // 检查元素是否已存在
    const existingEl = document.querySelector(selector);
    if (existingEl) return resolve(existingEl);

    // 用MutationObserver监听DOM变化
    const observer = new MutationObserver(mutations => {
      const targetEl = document.querySelector(selector);
      if (targetEl) {
        observer.disconnect();
        resolve(targetEl);
      }
    });

    observer.observe(document.body, {
      childList: true,
      subtree: true
    });
  });
}

// 页面加载完成后注入链接
if (document.readyState === 'complete') {
  injectUpdateLink();
} else {
  window.addEventListener('load', injectUpdateLink);
}

关键注意事项 #

• 页面元素选择器适配：亚马逊的页面DOM结构可能会更新，需要用Chrome开发者工具（F12）实时定位元素，调整代码中的选择器。
• 动态元素处理：页面弹窗或动态加载的内容必须用MutationObserver等待元素出现，避免因元素未渲染导致操作失败。
• 权限问题：只需配置内容脚本的页面匹配规则，不需要额外权限，因为所有操作都是模拟用户手动操作DOM，不涉及敏感数据访问。

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