|
|
@@ -3,360 +3,446 @@ let jsonInfo = {};
|
|
|
let tabId = "";
|
|
|
let nodeObj;
|
|
|
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 },
|
|
|
+ window.TabInstance = $("#filterTable")
|
|
|
+ .dxDataGrid({
|
|
|
+ dataSource: [],
|
|
|
+ keyExpr: "resource_detail_id",
|
|
|
+ remoteOperations: false,
|
|
|
+ searchPanel: {
|
|
|
+ visible: true,
|
|
|
+ highlightCaseSensitive: true,
|
|
|
},
|
|
|
- } = 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");
|
|
|
+ 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%",
|
|
|
- paging: {
|
|
|
- enabled: false,
|
|
|
- pageSize: 0,
|
|
|
- },
|
|
|
- columns: [
|
|
|
- {
|
|
|
- dataField: "key",
|
|
|
- caption: "名称",
|
|
|
- },
|
|
|
- {
|
|
|
- dataField: "value",
|
|
|
- caption: "生效值",
|
|
|
- },
|
|
|
- ],
|
|
|
- onSelectionChanged: function (selectedItems) {
|
|
|
- let data = selectedItems.selectedRowsData[0];
|
|
|
- if (data) {
|
|
|
- CSSBelongInstance.option({
|
|
|
- dataSource: findPropRef(data.key, jsonInfo).map((s, i) => ({
|
|
|
- ...s,
|
|
|
- id: i,
|
|
|
- })),
|
|
|
- });
|
|
|
- }
|
|
|
- },
|
|
|
- })
|
|
|
- .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%",
|
|
|
+ paging: {
|
|
|
+ enabled: false,
|
|
|
+ pageSize: 0,
|
|
|
+ },
|
|
|
+ columns: [
|
|
|
+ {
|
|
|
+ dataField: "key",
|
|
|
+ caption: "名称",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ dataField: "value",
|
|
|
+ caption: "生效值",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ onSelectionChanged: function (selectedItems) {
|
|
|
+ let data = selectedItems.selectedRowsData[0];
|
|
|
+ if (data) {
|
|
|
+ CSSBelongInstance.option({
|
|
|
+ dataSource: findPropRef(data.key, jsonInfo).map((s, i) => ({
|
|
|
+ ...s,
|
|
|
+ id: i,
|
|
|
+ })),
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ })
|
|
|
+ .dxDataGrid("instance");
|
|
|
|
|
|
- window.CSSBelongInstance = $("#cssBelong")
|
|
|
- .dxDataGrid({
|
|
|
- dataSource: [],
|
|
|
- keyExpr: "id",
|
|
|
- remoteOperations: false,
|
|
|
- searchPanel: {
|
|
|
- visible: true,
|
|
|
- highlightCaseSensitive: true,
|
|
|
- },
|
|
|
- selection: {
|
|
|
- mode: "single",
|
|
|
- },
|
|
|
- allowColumnReordering: true,
|
|
|
- rowAlternationEnabled: true,
|
|
|
- showBorders: true,
|
|
|
- paging: {
|
|
|
- enabled: false,
|
|
|
- pageSize: 0,
|
|
|
- },
|
|
|
- height: "100%",
|
|
|
- columns: [
|
|
|
- {
|
|
|
- dataField: "来源",
|
|
|
- caption: "来源",
|
|
|
- width: 100,
|
|
|
- },
|
|
|
- {
|
|
|
- dataField: "选择器",
|
|
|
- caption: "选择器",
|
|
|
- },
|
|
|
- {
|
|
|
- dataField: "属性值",
|
|
|
- caption: "属性值",
|
|
|
- },
|
|
|
- ],
|
|
|
- })
|
|
|
- .dxDataGrid("instance");
|
|
|
+ window.CSSBelongInstance = $("#cssBelong")
|
|
|
+ .dxDataGrid({
|
|
|
+ dataSource: [],
|
|
|
+ keyExpr: "id",
|
|
|
+ remoteOperations: false,
|
|
|
+ searchPanel: {
|
|
|
+ visible: true,
|
|
|
+ highlightCaseSensitive: true,
|
|
|
+ },
|
|
|
+ selection: {
|
|
|
+ mode: "single",
|
|
|
+ },
|
|
|
+ allowColumnReordering: true,
|
|
|
+ rowAlternationEnabled: true,
|
|
|
+ showBorders: true,
|
|
|
+ paging: {
|
|
|
+ enabled: false,
|
|
|
+ pageSize: 0,
|
|
|
+ },
|
|
|
+ height: "100%",
|
|
|
+ columns: [
|
|
|
+ {
|
|
|
+ dataField: "来源",
|
|
|
+ caption: "来源",
|
|
|
+ width: 100,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ dataField: "选择器",
|
|
|
+ caption: "选择器",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ dataField: "属性值",
|
|
|
+ caption: "属性值",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ })
|
|
|
+ .dxDataGrid("instance");
|
|
|
+
|
|
|
+ window.eventTableInstance = $("#eventTable")
|
|
|
+ .dxDataGrid({
|
|
|
+ dataSource: [],
|
|
|
+ keyExpr: "id",
|
|
|
+ remoteOperations: false,
|
|
|
+ searchPanel: {
|
|
|
+ visible: true,
|
|
|
+ highlightCaseSensitive: true,
|
|
|
+ },
|
|
|
+ selection: {
|
|
|
+ mode: "single",
|
|
|
+ },
|
|
|
+ allowColumnReordering: true,
|
|
|
+ rowAlternationEnabled: true,
|
|
|
+ showBorders: true,
|
|
|
+ paging: {
|
|
|
+ enabled: false,
|
|
|
+ pageSize: 0,
|
|
|
+ },
|
|
|
+ height: "100%",
|
|
|
+ columns: [
|
|
|
+ {
|
|
|
+ dataField: "事件名称",
|
|
|
+ caption: "事件名称",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ dataField: "绑定对象",
|
|
|
+ caption: "绑定对象",
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ })
|
|
|
+ .dxDataGrid("instance");
|
|
|
}
|
|
|
chrome.runtime.onMessage.addListener(async (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, tabId: _tabId, path } = ret;
|
|
|
- tabId = _tabId;
|
|
|
- parseCodeToAST(
|
|
|
- jslist.map((item) => {
|
|
|
- return {
|
|
|
- code: item.data,
|
|
|
- name: item.fileName,
|
|
|
- };
|
|
|
- })
|
|
|
- );
|
|
|
+ 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, tabId: _tabId, path } = ret;
|
|
|
+ tabId = _tabId;
|
|
|
+ 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;
|
|
|
+ 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;
|
|
|
- }
|
|
|
- }
|
|
|
- });
|
|
|
+ if (classList.length > 0) {
|
|
|
+ for (const classitem of classList) {
|
|
|
+ if (v.includes(classitem)) return true;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
|
|
|
- await attach();
|
|
|
- await getPathNodeInfo(path);
|
|
|
- await findEvent();
|
|
|
- TabInstance.option({
|
|
|
- dataSource: data,
|
|
|
- });
|
|
|
+ await attach();
|
|
|
+ await getPathNodeInfo(path);
|
|
|
+ let events = await findEvent();
|
|
|
+ TabInstance.option({
|
|
|
+ dataSource: data,
|
|
|
+ });
|
|
|
|
|
|
- CSSTabInstance.option({
|
|
|
- dataSource: Object.entries(csslist).map((a, index) => ({
|
|
|
- id: index,
|
|
|
- key: a[0],
|
|
|
- value: a[1],
|
|
|
- })),
|
|
|
- });
|
|
|
- }
|
|
|
+ CSSTabInstance.option({
|
|
|
+ dataSource: Object.entries(csslist).map((a, index) => ({
|
|
|
+ id: index,
|
|
|
+ key: a[0],
|
|
|
+ value: a[1],
|
|
|
+ })),
|
|
|
+ });
|
|
|
+
|
|
|
+ eventTableInstance.option({
|
|
|
+ dataSource: translateEventData(events)
|
|
|
+ })
|
|
|
+ }
|
|
|
});
|
|
|
|
|
|
function findPropRef(key, json) {
|
|
|
- let matchedCSSRules = json.matchedCSSRules;
|
|
|
- let retArr = [];
|
|
|
- for (const matchedCSSRule of matchedCSSRules) {
|
|
|
- let cssProperties = matchedCSSRule.rule.style.cssProperties;
|
|
|
- let cssProp = cssProperties.find((m) => m.name == key);
|
|
|
- if (!cssProp) continue;
|
|
|
- let ret = {
|
|
|
- 来源: "CSS",
|
|
|
- 选择器: matchedCSSRule.rule.selectorList.text,
|
|
|
- 选中选择器: matchedCSSRule.matchingSelectors[0],
|
|
|
- 属性值: cssProp.value,
|
|
|
- };
|
|
|
- retArr.push(ret);
|
|
|
- }
|
|
|
- return retArr;
|
|
|
+ let matchedCSSRules = json.matchedCSSRules;
|
|
|
+ let retArr = [];
|
|
|
+ for (const matchedCSSRule of matchedCSSRules) {
|
|
|
+ let cssProperties = matchedCSSRule.rule.style.cssProperties;
|
|
|
+ let cssProp = cssProperties.find((m) => m.name == key);
|
|
|
+ if (!cssProp) continue;
|
|
|
+ let ret = {
|
|
|
+ 来源: "CSS",
|
|
|
+ 选择器: matchedCSSRule.rule.selectorList.text,
|
|
|
+ 选中选择器: matchedCSSRule.matchingSelectors[0],
|
|
|
+ 属性值: cssProp.value,
|
|
|
+ };
|
|
|
+ retArr.push(ret);
|
|
|
+ }
|
|
|
+ return retArr;
|
|
|
}
|
|
|
|
|
|
async function getPathNodeInfo(path) {
|
|
|
- const doc = await getDocument();
|
|
|
- const htmlInfo = doc.children.find((m) => m.localName === "html");
|
|
|
- let info = htmlInfo;
|
|
|
- for (const index of path) {
|
|
|
- info = getpath(info, index);
|
|
|
- }
|
|
|
- nodeObj = info;
|
|
|
- let nodeId = info.nodeId;
|
|
|
- let cssInfo = await getMatchedStylesForNode(nodeId);
|
|
|
- jsonInfo = cssInfo;
|
|
|
+ const doc = await getDocument();
|
|
|
+ const htmlInfo = doc.children.find((m) => m.localName === "html");
|
|
|
+ let info = htmlInfo;
|
|
|
+ for (const index of path) {
|
|
|
+ info = getpath(info, index);
|
|
|
+ }
|
|
|
+ nodeObj = info;
|
|
|
+ let nodeId = info.nodeId;
|
|
|
+ let cssInfo = await getMatchedStylesForNode(nodeId);
|
|
|
+ jsonInfo = cssInfo;
|
|
|
|
|
|
- function getpath(info, index) {
|
|
|
- let children = info.children;
|
|
|
- return children[index];
|
|
|
- }
|
|
|
+ function getpath(info, index) {
|
|
|
+ let children = info.children;
|
|
|
+ return children[index];
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
async function getMatchedStylesForNode(nodeId) {
|
|
|
- let ret = await chrome.debugger.sendCommand(
|
|
|
- { tabId },
|
|
|
- "CSS.getMatchedStylesForNode",
|
|
|
- {
|
|
|
- nodeId,
|
|
|
- }
|
|
|
- );
|
|
|
- return ret;
|
|
|
+ let ret = await chrome.debugger.sendCommand(
|
|
|
+ { tabId },
|
|
|
+ "CSS.getMatchedStylesForNode",
|
|
|
+ {
|
|
|
+ nodeId,
|
|
|
+ }
|
|
|
+ );
|
|
|
+ return ret;
|
|
|
}
|
|
|
|
|
|
async function getDocument() {
|
|
|
- const doc = await chrome.debugger.sendCommand({ tabId }, "DOM.getDocument", {
|
|
|
- pierce: true,
|
|
|
- depth: -1,
|
|
|
- });
|
|
|
- return doc.root;
|
|
|
+ const doc = await chrome.debugger.sendCommand({ tabId }, "DOM.getDocument", {
|
|
|
+ pierce: true,
|
|
|
+ depth: -1,
|
|
|
+ });
|
|
|
+ return doc.root;
|
|
|
}
|
|
|
|
|
|
async function attach() {
|
|
|
- const targets = await chrome.debugger.getTargets();
|
|
|
- let target = targets.find((m) => m.tabId == tabId);
|
|
|
- if (target?.attached === true) {
|
|
|
- } else {
|
|
|
- await chrome.debugger.attach({ tabId }, "1.3");
|
|
|
- }
|
|
|
- await chrome.debugger.sendCommand({ tabId }, "DOM.enable");
|
|
|
- await chrome.debugger.sendCommand({ tabId }, "CSS.enable");
|
|
|
+ // const targets = await chrome.debugger.getTargets();
|
|
|
+ // let target = targets.find((m) => m.tabId == tabId);
|
|
|
+ // if (target?.attached === true) {
|
|
|
+ // } else {
|
|
|
+ // await chrome.debugger.attach({ tabId }, "1.3");
|
|
|
+ // }
|
|
|
+ await chrome.debugger.attach({ tabId }, "1.3").catch(() => { });
|
|
|
+ await chrome.debugger.sendCommand({ tabId }, "DOM.enable");
|
|
|
+ await chrome.debugger.sendCommand({ tabId }, "CSS.enable");
|
|
|
}
|
|
|
|
|
|
async function findEvent() {
|
|
|
- let winObj = await chrome.debugger.sendCommand(
|
|
|
- { tabId },
|
|
|
- "Runtime.evaluate",
|
|
|
- {
|
|
|
- expression: "self",
|
|
|
- objectGroup: "",
|
|
|
- includeCommandLineAPI: false,
|
|
|
- silent: true,
|
|
|
- returnByValue: false,
|
|
|
- generatePreview: false,
|
|
|
- userGesture: false,
|
|
|
- awaitPromise: false,
|
|
|
- }
|
|
|
- );
|
|
|
- let winEvents = await chrome.debugger.sendCommand(
|
|
|
- { tabId },
|
|
|
- "DOMDebugger.getEventListeners",
|
|
|
- {
|
|
|
- objectId: winObj.result.objectId,
|
|
|
- }
|
|
|
- );
|
|
|
- let documentObj = await chrome.debugger.sendCommand(
|
|
|
- { tabId },
|
|
|
- "Runtime.evaluate",
|
|
|
- {
|
|
|
- expression: "document",
|
|
|
- objectGroup: "",
|
|
|
- includeCommandLineAPI: false,
|
|
|
- silent: true,
|
|
|
- returnByValue: false,
|
|
|
- generatePreview: false,
|
|
|
- userGesture: false,
|
|
|
- awaitPromise: false,
|
|
|
- }
|
|
|
- );
|
|
|
- let documentEvents = await chrome.debugger.sendCommand(
|
|
|
- { tabId },
|
|
|
- "DOMDebugger.getEventListeners",
|
|
|
- {
|
|
|
- objectId: documentObj.result.objectId,
|
|
|
+ let winObj = await chrome.debugger.sendCommand(
|
|
|
+ { tabId },
|
|
|
+ "Runtime.evaluate",
|
|
|
+ {
|
|
|
+ expression: "self",
|
|
|
+ objectGroup: "",
|
|
|
+ includeCommandLineAPI: false,
|
|
|
+ silent: true,
|
|
|
+ returnByValue: false,
|
|
|
+ generatePreview: false,
|
|
|
+ userGesture: false,
|
|
|
+ awaitPromise: false,
|
|
|
+ }
|
|
|
+ );
|
|
|
+ let winEvents = await chrome.debugger.sendCommand(
|
|
|
+ { tabId },
|
|
|
+ "DOMDebugger.getEventListeners",
|
|
|
+ {
|
|
|
+ objectId: winObj.result.objectId,
|
|
|
+ }
|
|
|
+ );
|
|
|
+ let documentObj = await chrome.debugger.sendCommand(
|
|
|
+ { tabId },
|
|
|
+ "Runtime.evaluate",
|
|
|
+ {
|
|
|
+ expression: "document",
|
|
|
+ objectGroup: "",
|
|
|
+ includeCommandLineAPI: false,
|
|
|
+ silent: true,
|
|
|
+ returnByValue: false,
|
|
|
+ generatePreview: false,
|
|
|
+ userGesture: false,
|
|
|
+ awaitPromise: false,
|
|
|
+ }
|
|
|
+ );
|
|
|
+ let documentEvents = await chrome.debugger.sendCommand(
|
|
|
+ { tabId },
|
|
|
+ "DOMDebugger.getEventListeners",
|
|
|
+ {
|
|
|
+ objectId: documentObj.result.objectId,
|
|
|
+ }
|
|
|
+ );
|
|
|
+ let selfObj = await chrome.debugger.sendCommand(
|
|
|
+ { tabId },
|
|
|
+ "DOM.resolveNode",
|
|
|
+ {
|
|
|
+ nodeId: nodeObj.nodeId,
|
|
|
+ }
|
|
|
+ );
|
|
|
+ let selfEvents = await chrome.debugger.sendCommand(
|
|
|
+ { tabId },
|
|
|
+ "DOMDebugger.getEventListeners",
|
|
|
+ {
|
|
|
+ objectId: selfObj.object.objectId,
|
|
|
+ }
|
|
|
+ );
|
|
|
+ return {
|
|
|
+ winEvents: winEvents.listeners,
|
|
|
+ documentEvents: documentEvents.listeners,
|
|
|
+ selfEvents: selfEvents.listeners,
|
|
|
+ };
|
|
|
+}
|
|
|
+
|
|
|
+function translateEventData(eventObj) {
|
|
|
+ let { winEvents, documentEvents, selfEvents } = eventObj;
|
|
|
+ let result = [];
|
|
|
+ result.push(...winEvents.map((even) => ({ 事件名称: even.type, 绑定对象: "window" })));
|
|
|
+ result.push(...documentEvents.map((even) => ({ 事件名称: even.type, 绑定对象: "document" })))
|
|
|
+ result.push(...selfEvents.map((even) => ({ 事件名称: even.type, 绑定对象: "selft" })))
|
|
|
+ return result.map((a, index) => ({ ...a, id: index }));
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+window.onload = function(){
|
|
|
+ InitTabOperation()
|
|
|
+}
|
|
|
+
|
|
|
+/**
|
|
|
+ * 设置操作页卡功能
|
|
|
+ */
|
|
|
+function InitTabOperation() {
|
|
|
+ document.querySelector('.tabs').addEventListener('click', function (e) {
|
|
|
+ let target = e.target;
|
|
|
+ if (target.classList.contains('tab')) {
|
|
|
+ showContent(target);
|
|
|
+ }
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+function showContent(tab) {
|
|
|
+ let id = tab.dataset.id; // 获取点击的页卡ID
|
|
|
+ // 获取选中的页卡元素
|
|
|
+ let activeTab = document.querySelector('.tabs .active');
|
|
|
+ if (activeTab !== null) {
|
|
|
+ if (id === activeTab.dataset.id) return;
|
|
|
+ activeTab.classList.remove('active');
|
|
|
}
|
|
|
- );
|
|
|
- let selfObj = await chrome.debugger.sendCommand(
|
|
|
- { tabId },
|
|
|
- "DOM.resolveNode",
|
|
|
- {
|
|
|
- nodeId: nodeObj.nodeId,
|
|
|
+ // 获取选中的容器的元素
|
|
|
+ let activeContent = document.querySelector('.tab-container .active');
|
|
|
+ if (activeContent !== null) {
|
|
|
+ if (activeContent.id === id) return;
|
|
|
+ activeContent.classList.remove('active');
|
|
|
}
|
|
|
- );
|
|
|
- let selfEvents = await chrome.debugger.sendCommand(
|
|
|
- { tabId },
|
|
|
- "DOMDebugger.getEventListeners",
|
|
|
- {
|
|
|
- objectId: selfObj.object.objectId,
|
|
|
+ // 给新选中的页卡加入选中效果
|
|
|
+ tab.classList.add('active');
|
|
|
+ let curActiveContent = document.querySelector(`.tab-container #${id}`);
|
|
|
+ if (curActiveContent !== null) {
|
|
|
+ curActiveContent.classList.add('active')
|
|
|
}
|
|
|
- );
|
|
|
- return {
|
|
|
- winEvents: winEvents.listeners,
|
|
|
- documentEvents: documentEvents.listeners,
|
|
|
- selfEvents: selfEvents.listeners,
|
|
|
- };
|
|
|
-}
|
|
|
+}
|
