有没有什么办法将网页的指定dom元素及子元素的所有css导出？

写一个油猴脚本实现，具体的脚本代码

// ==UserScript==
// @name         网页DOM树和CSS样式导出器
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  导出网页完整的DOM树结构和所有CSS样式
// @author       You
// @match        *://*/*
// @grant        none
// @icon         data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==
// ==/UserScript==

(function() {
    'use strict';

    // 创建导出按钮
    function createExportButton() {
        // 检查按钮是否已存在
        if (document.getElementById('export-dom-css-btn')) return;

        // 创建按钮
        const button = document.createElement('button');
        button.id = 'export-dom-css-btn';
        button.textContent = '导出DOM和CSS';
        button.style.cssText = `
            position: fixed;
            top: 20px;
            right: 20px;
            z-index: 999999;
            padding: 10px 15px;
            background: #4CAF50;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 14px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.3);
        `;

        // 添加悬停效果
        button.addEventListener('mouseenter', () => {
            button.style.background = '#45a049';
        });
        button.addEventListener('mouseleave', () => {
            button.style.background = '#4CAF50';
        });

        // 点击事件
        button.addEventListener('click', exportDOMAndCSS);

        // 添加到页面
        document.body.appendChild(button);
    }

    // 导出DOM和CSS
    function exportDOMAndCSS() {
        try {
            // 获取完整的DOM树
            const domTree = getDOMTree();

            // 获取所有CSS样式
            const cssStyles = getAllCSSStyles();

            // 生成完整的HTML文档
            const fullHTML = generateFullHTML(domTree, cssStyles);

            // 下载文件
            downloadFile(fullHTML, `dom-export-${new Date().toISOString().slice(0, 19).replace(/:/g, '-')}.html`);

            alert('DOM树和CSS样式导出成功！');
        } catch (error) {
            console.error('导出失败:', error);
            alert('导出失败: ' + error.message);
        }
    }

    // 获取完整的DOM树结构
    function getDOMTree() {
        // 克隆整个文档
        const clonedDoc = document.cloneNode(true);

        // 移除脚本标签以避免执行
        const scripts = clonedDoc.querySelectorAll('script');
        scripts.forEach(script => script.remove());

        // 移除导出按钮
        const exportBtn = clonedDoc.getElementById('export-dom-css-btn');
        if (exportBtn) exportBtn.remove();

        // 移除可能的油猴脚本元素
        const tampermonkeyElements = clonedDoc.querySelectorAll('[id^="tampermonkey"], [class^="tampermonkey"]');
        tampermonkeyElements.forEach(el => el.remove());

        return clonedDoc;
    }

    // 获取所有CSS样式
    function getAllCSSStyles() {
        let allCSS = '';

        // 1. 获取所有内联样式表
        for (let i = 0; i < document.styleSheets.length; i++) {
            try {
                const sheet = document.styleSheets[i];
                const cssText = getCSSFromStyleSheet(sheet);
                if (cssText) {
                    allCSS += `/* 样式表 ${i + 1} */\n${cssText}\n\n`;
                }
            } catch (error) {
                console.warn(`无法获取样式表 ${i}:`, error);
            }
        }

        // 2. 获取所有内联样式
        const inlineStyles = getInlineStyles();
        if (inlineStyles) {
            allCSS += `/* 内联样式 */\n${inlineStyles}\n\n`;
        }

        // 3. 获取计算样式（可选，会很大）
        // const computedStyles = getComputedStyles();
        // if (computedStyles) {
        //     allCSS += `/* 计算样式 */\n${computedStyles}\n\n`;
        // }

        return allCSS;
    }

    // 从样式表获取CSS文本
    function getCSSFromStyleSheet(sheet) {
        try {
            // 如果是内联样式表
            if (sheet.cssRules) {
                let cssText = '';
                for (let j = 0; j < sheet.cssRules.length; j++) {
                    cssText += sheet.cssRules[j].cssText + '\n';
                }
                return cssText...

点击查看剩余70%