Chrome扩展Manifest V3下获取JS控制按钮跳转URL的方案咨询

• 爬取某网站产品详情时遇到两类按钮：
  • 第一类按钮点击后动态加载产品详情，原页面状态丢失（按钮代码如下）
  • 第二类按钮点击后仅修改页面URL并弹窗，不替换完整HTML
• 核心需求：获取按钮跳转URL，其中包含其他渠道无法获取的SKU
• 已尝试方案：阻止按钮事件传播，但点击后无反应，方案无效

按钮代码示例：

<button aria-label="ARIA_LABEL_NAME" class="CLASS_NAME"><span class="CLASS_NAME"><img src="SRC_REMOVED" alt="" class="e-1yuw6bt"></span></button>

可行解决方案 #

方案1：拦截导航请求（无需触发按钮点击） #

在Chrome Extension的background service worker中利用导航监听API捕获跳转URL，无需实际触发按钮点击：

• 配置chrome.webNavigation.onBeforeNavigate监听目标网站的导航请求，一旦匹配到包含SKU的URL就提取参数，还可选择取消导航避免页面跳转
• 示例代码（service worker中）：

  chrome.webNavigation.onBeforeNavigate.addListener(details => {
    const urlObj = new URL(details.url);
    const sku = urlObj.searchParams.get('sku'); // 根据实际URL结构调整参数名
    if (sku) {
      console.log('提取到SKU:', sku);
      // 可将SKU存储到chrome.storage或发送给内容脚本处理
      // 若需阻止跳转，可通过chrome.tabs.update保持当前页面状态
    }
  }, {url: [{hostContains: '目标网站域名'}]});
  

• 注意：需在manifest.json中声明webNavigation权限及目标网站的主机权限

方案2：逆向混淆JS逻辑，提取URL生成规则 #

通过Chrome开发者工具分析按钮的点击逻辑，即使代码混淆也可定位URL生成规则：

1. 右键按钮→检查，在Elements面板选中按钮，右侧Event Listeners面板找到click事件对应的处理函数
2. 进入Sources面板后：
   • 点击{}按钮格式化混淆代码，便于阅读
   • 搜索关键词（如sku、location.href、redirect）定位URL生成逻辑
   • 在点击事件函数开头打断点，点击按钮后逐步调试，观察变量变化获取完整URL
3. 找到规则后，可在内容脚本中直接模拟生成URL，无需点击按钮

方案3：重写页面跳转相关API，捕获URL #

针对按钮直接操作location.href或调用window.open的场景，重写对应API实现拦截：

• 拦截location.href跳转：

  // 内容脚本中注入
  const originalHref = Object.getOwnPropertyDescriptor(window.location, 'href');
  Object.defineProperty(window.location, 'href', {
    set: function(value) {
      const urlObj = new URL(value);
      const sku = urlObj.searchParams.get('sku');
      if (sku) {
        console.log('提取到SKU:', sku);
        return; // 阻止页面跳转
      }
      originalHref.set.call(this, value);
    },
    get: function() {
      return originalHref.get.call(this);
    }
  });
  

• 拦截window.open弹窗：

  // 内容脚本中注入
  const originalOpen = window.open;
  window.open = function(url) {
    const urlObj = new URL(url);
    const sku = urlObj.searchParams.get('sku');
    if (sku) {
      console.log('提取到SKU:', sku);
      return null; // 阻止弹窗打开
    }
    return originalOpen.apply(this, arguments);
  };
  

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