chrome-plugin/page.js

let nowFileName = "";

function InitTable() {
    window.TabInstance = $('#filterTable').dxDataGrid({
        dataSource: [],
        keyExpr: 'resource_detail_id',
        remoteOperations: false,
        searchPanel: {
            visible: true,
            highlightCaseSensitive: true,
        },
        groupPanel: { visible: true },
        grouping: {
            allowCollapsing: true,
            autoExpandAll: true,
            expandMode: "rowClick"
        },
        selection: {
            mode: 'single'
        },
        allowColumnReordering: true,
        rowAlternationEnabled: true,
        showBorders: true,
        height: '100%',
        columns: [
            {
                dataField: 'JS文件',
                dataType: 'JS文件',
                groupIndex: 0
            },
            {
                dataField: "过滤器",
                caption: "过滤器"
            },
            {
                dataField: '选择器类型',
                dataType: '选择器类型',
            },
            {
                dataField: '调用方式',
                dataType: '调用方式',
            },
            {
                dataField: '所在位置',
                dataType: '所在位置',
            },
            {
                dataField: 'DOM操作分类',
                dataType: 'DOM操作分类',
            }
        ],
        onContentReady(e) {

        },
        onSelectionChanged: function (selectedItems) {
            let data = selectedItems.selectedRowsData[0];
            if (data) {
                let ast = data.astJSON;
                if (data.JS文件 !== nowFileName) {
                    nowFileName = data.JS文件;
                    let code = window.fileList.find(o => o.name === data.JS文件).code;
                    //更改JS代码
                    jsCode.SetCode(code);
                    //更改ast
                    //window.ShowASTTree(ast, document.getElementById('astJson'))
                }
                //jscode定位
                let { defineNode: { iid, loc: { end, start } } } = data.source_data;
                {
                    //移出所有高亮
                    jsCode.RemoveAllHighlight();
                    //设置高亮 
                    jsCode.CreateHighlight({ startLine: start?.line, startColumn: start?.column + 1, endLine: end?.line, endColumn: end?.column + 1 });
                }
                {
                    // //ast定位
                    // let jsonNode = document.getElementById(iid);
                    // if (jsonNode) {
                    //     let textNode = Array.from(jsonNode.parentNode.childNodes).find(item => item.classList.contains("node-text"));
                    //     $("#astJson").find(".monaco-highlight").removeClass("monaco-highlight");

                    //     textNode?.classList?.add("monaco-highlight");
                    //     scrollTo(jsonNode)
                    // }
                }
            }
        }
    }).dxDataGrid("instance");

    window.CSSTabInstance = $('#cssJson').dxDataGrid({
        dataSource: [],
        keyExpr: 'id',
        remoteOperations: false,
        searchPanel: {
            visible: true,
            highlightCaseSensitive: true,
        },
        selection: {
            mode: 'single'
        },
        allowColumnReordering: true,
        rowAlternationEnabled: true,
        showBorders: true,
        height: '100%',
        columns: [
            {
                dataField: "key",
                caption: "属性名称"
            },
            {
                dataField: 'value',
                caption: '属性值',
            }
        ]
    }).dxDataGrid("instance");
}
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
    if (request.msgToPopup === "发送页面") {
        //初始化JS代码编辑器
        window.jsCode = new CodeEditor();
        jsCode.InitEditor($('#jscode')[0], false, false, [], false);
        jsCode.dataType = 3;
        InitTable();
        let ret = request.data;
        console.log(ret);
        let { jslist, targe, csslist } = ret;
        parseCodeToAST(jslist.map(item => {
            return {
                code: item.data,
                name: item.fileName
            };
        }))

        let data = window.findSelector();
        let id = $(targe).attr('id');
        let classList = $(targe).attr('class').split(' ');
        data = data.filter(m => {
            let v = m.过滤器;
            if (v.includes(id)) return true;

            if (classList.length > 0) {
                for (const classitem of classList) {
                    if (v.includes(classitem)) return true;
                }
            }
        });

        TabInstance.option({
            "dataSource": data
        });

        CSSTabInstance.option({
            "dataSource": Object.entries(csslist).map((a, index) => ({ id: index ,key: a[0], value: a[1] }))
        })
    }
})