Chrome扩展中如何在HardCoded()调用后执行自定义JS代码？

既然你没法修改原HardCoded()函数，也不想通过绑定触发元素事件的方式实现，那最直接的办法就是**"包装"原函数**——把原函数的引用保存下来，然后重新定义这个函数，在里面先执行原函数的逻辑，再追加你的自定义代码。

具体步骤如下：

1. 保存原函数的引用：先把页面里原本的HardCoded函数存起来，避免覆盖后丢失原有功能。
2. 重写HardCoded函数：重新定义这个函数，先调用保存好的原函数，再执行你自己的代码。
3. 处理Chrome扩展的上下文隔离问题：因为Chrome扩展的内容脚本和页面的全局上下文是分开的，所以你需要把这段代码注入到页面的全局环境中，而不是在内容脚本里直接执行（否则你访问不到页面的HardCoded函数）。

下面是具体的代码示例：

// 注入到页面全局上下文的脚本
function injectScript() {
    const script = document.createElement('script');
    script.textContent = `
        // 保存原HardCoded函数
        const originalHardCoded = window.HardCoded;
        
        // 重写函数
        window.HardCoded = function() {
            // 先执行原函数的逻辑，保留原有的this指向和参数
            originalHardCoded.apply(this, arguments);
            
            // 这里写你的自定义代码，原函数调用后自动执行
            console.log("HardCoded执行完成，我的自定义逻辑启动！");
            // 示例：用jQuery操作DOM（页面需已加载jQuery）
            if (typeof $ !== 'undefined') {
                $('.target-element').addClass('custom-processed');
            }
        };
    `;
    document.head.appendChild(script);
}

// 在内容脚本中调用注入函数
injectScript();

关键细节说明： #

• 注入脚本的必要性：Chrome扩展的内容脚本运行在独立沙箱，无法直接访问页面全局作用域的函数，必须通过注入<script>标签的方式，让代码进入页面的全局上下文，才能拿到原HardCoded函数。
• apply(this, arguments)的作用：确保原函数执行时的this指向和传入的参数都和原来完全一致，不会破坏原函数的原有逻辑。
• jQuery的使用：如果页面本身已经引入了jQuery，注入的脚本里可以直接用$；如果页面没有，你可以在内容脚本中先加载jQuery，再执行注入逻辑。

这种方法的优势在于：不管页面上有多少元素触发HardCoded()，只要这个函数被调用，你的自定义代码就一定会自动执行，完全不需要逐一查找所有触发元素。

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