要 Hook 这段动态创建并插入样式代码，可以考虑以下几种方案：

1. 拦截 document.createElement 方法

// 保存原始方法
const originalCreateElement = document.createElement;

// 重写 createElement
document.createElement = function(tagName) {
    const element = originalCreateElement.call(this, tagName);
    
    // 如果是 style 元素
    if (tagName.toLowerCase() === 'style') {
        // 拦截 textContent 设置
        const originalTextContent = Object.getOwnPropertyDescriptor(Element.prototype, 'textContent').set;
        
        Object.defineProperty(element, 'textContent', {
            set: function(value) {
                console.log('检测到 style.textContent 设置:', value);
                // 这里可以修改样式内容
                // value = value.replace('red', 'green'); // 示例：修改颜色
                
                // 调用原始方法
                originalTextContent.call(this, value);
            },
            get: function() {
                return this._textContent;
            }
        });
    }
    
    return element;
};

2. 拦截 appendChild 方法

// 保存原始方法
const originalAppendChild = Node.prototype.appendChild;

// 重写 appendChild
Node.prototype.appendChild = function(child) {
    // 如果是 style 元素被插入到 head
    if (child.tagName && child.tagName.toLowerCase() === 'style' && 
        this.nodeType === Node.ELEMENT_NODE && 
        this.tagName.toLowerCase() === 'head') {
        
        console.log('检测到 style 元素插入到 head:', child.textContent);
        // 这里可以处理或修改样式内容
        
        // Hook CSS规则添加（如果需要更细粒度的控制）
        hookStyleElement(child);
    }
    
    return originalAppendChild.call(this, child);
};

function hookStyleElement(styleElement) {
    // TODO: 可以进一步拦截样式表的规则添加
}

3. MutationObserver 监听 DOM变化

// 创建观察器实例
const observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
        if (mutation.type === 'childList') {
            mutation.addedNodes.forEach(function(node) {
                if (node.tagName && node.tagName.toLowerCase() === 'style') {
                    console.log('检测到动态添加的 style 元素:', node.textContent);
                    // TODO:  处理样式内容
                }
            });
        }
    });
});

//  开始观察
observer.observe(document.head, {
    childList: true,
    subtree: false
});

4. 完整的 Hook方案

(function() {
    'use strict';
    
    let isHooked = false;
    
    function hookDynamicStyles() {
        if (isHooked) return;
        isHooked = true;
        
        //  1. Hook createElement  
        const originalCreateElement = document.createElement;
        document.createElement = function(tagName) {
            const element = originalCreateElement.call(this, tagName);
            
            if (tagName.toLowerCase() === 'style') {
                setupStyleHook(element);
            }
            
            return element;
        };
        
        //  2. Hook appendChild  
       const originalAppendChild = Node.prototype.appendChild;  
       Node.prototype.appendChild = function(child) {  
           if (child.tagName && child.tagName.toLowerCase() === 'style' &&   
               this.nodeType === Node.ELEMENT_NODE &&   
               this.tagName.toLowerCase() === 'head') {  
               console.log('🚨 Style inserted into head:', child.textContent);  
           }  
           return originalAppendChild.call(this, child);  
       };  

       //  3. MutationObserver作为备用方案  
       const observer = new MutationObserver((mutations) => {  
           mutations.forEach((mutation) => {  
               mutation.addedNodes.forEach((node) => {  
                   if (node.tagName && node.tagName.toLowerCase() === 'style') {  
                       console.log('👀 Observer detected style:', node.textContent);  
                   }  
               });  
           });  
       });  

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

       console.log('✅ Dynamic style injection hooked');  

   }

   function setupStyleHook(styleElement){   
      let cssContent='';   

      Object.defineProperty(styleElement,'textContent',{   
          set:function(value){   
              cssContent=value;   
              console.log('✏️ Style content set:',value.substring(0,100)+'...');   

              //TODO：在这里修改CSS内容   

              this._textContent=value;//实际存储   

          },get:function(){return this._textContent||cssContent;}   
      });   

      return styleElement;   

   }

   //自动执行（如果是浏览器环境）   
   if(typeof window!=='undefined'&&window.document){   
       if(document.readyState==='loading'){   
           document.addEventListener('DOMContentLoaded',hookDynamicStyles);   
       }else{   
           hookDynamicStyles();   
       }   
   }

})();

选择哪种方案取决于你的具体需求：

• 方案1：最彻底，能捕获所有动态创建的style元素
• 方案2：针对插入操作进行拦截
• 方案3：非侵入式，作为监控手段
• 方案4：综合方案，覆盖大多数情况
  
  
  内容由零声教学AI助手提供，问题来源于学员提问