如何覆写Polymer内容脚本函数？YouTube跳转调试遇阻求助

一、为什么事件拦截代码没生效？ #

YouTube的跳转逻辑根本不是直接挂在目标元素或window的事件处理器上：

• 它大概率用了事件委托——把点击事件绑定在更高层级的父元素（比如整个页面容器），而非单个链接上。你只给单个元素et加监听，根本拦不住委托上来的事件。
• 很多时候YouTube会在事件捕获阶段就处理跳转逻辑，你的代码是在冒泡阶段加的监听，等你的代码执行时，跳转逻辑已经跑完了。
• 你过滤事件的正则排除了太多关键事件，比如mousedown、pointerdown这些可能被用来触发跳转的早阶段事件，只盯着onxxx开头的window事件完全没用，因为跳转逻辑根本没挂在window上。

二、为什么调试器里找不到函数，Content Script也覆写不了？ #

核心原因是上下文隔离：

1. 网页代码的私有作用域：YouTube的前端代码经过打包压缩，所有业务逻辑（包括跳转函数）都被封装在闭包或ES模块的私有作用域里，不会暴露到全局window对象上。你在控制台看到的函数名（比如x）可能是压缩后的局部变量，只在闭包内部有效，全局环境根本访问不到。
2. Content Script的隔离机制：浏览器扩展的Content Script运行在独立的沙箱环境里，它的window对象和网页主上下文的window完全不是同一个。你在Content Script里访问的window，看不到网页里定义的任何私有函数，自然也没法覆写。

可行的解决思路 #

• 拦截跳转的正确姿势：
  • 用MutationObserver监听视频描述区的DOM变化，一旦发现新的链接元素，直接替换它的href属性，或者在捕获阶段给它绑定点击事件（第三个参数设为true）：

    et.addEventListener('click', (e) => {
      e.stopPropagation();
      e.preventDefault();
    }, true); // true表示在捕获阶段触发
    

  • 如果是做浏览器扩展，用webRequest API拦截所有从YouTube发起的外部请求，直接阻止或重定向。
• 访问网页上下文函数的方法：
  要操作网页主上下文的代码，得从Content Script里注入一段脚本到网页中：

  // Content Script里的代码
  const script = document.createElement('script');
  script.textContent = `
    // 这里的代码运行在网页主上下文，能访问到私有函数
    console.log('现在可以拿到网页里的变量了');
  `;
  document.head.appendChild(script);
  

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