提交更改

content.js

@@ -47,38 +47,6 @@ chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
   }
 });
 
-let myComputedStyle = (function () {
-  let map = new Map();
-  let excludeValues = ["rgb(0, 0, 0)"];
-  return (element) => {
-    let tagName = element.tagName;
-    let defaultStyles = map.get(tagName);
-    if (!defaultStyles) {
-      defaultStyles = {};
-      let dummy = document.createElement(tagName);
-      document.body.appendChild(dummy);
-      let dummyStyles = getComputedStyle(dummy);
-      for (const key of dummyStyles) {
-        defaultStyles[key] = dummyStyles[key];
-      }
-      dummy.remove();
-    }
-    let elementStyles = getComputedStyle(element);
-
-    let diff = {};
-    for (let key of elementStyles) {
-      if (key.startsWith("--")) continue;
-      if (key.startsWith("-webkit")) continue;
-      let value = elementStyles[key];
-      if (excludeValues.includes(value)) continue;
-      if (elementStyles.hasOwnProperty(key) && defaultStyles[key] !== value) {
-        diff[key] = value;
-      }
-    }
-    return diff;
-  };
-})();
-
 const jsRequests = []; // 使用 Set 以避免重复的 URL
 
 // 观察 DOM 的变化
@@ -147,10 +115,11 @@ function clickHandler(e) {
     action: "show_popup",
     jslist: jsRequests,
     targe: oldTarget.outerHTML,
-    csslist: Array.from(document.styleSheets).map(({ href, cssRules }) => {
+    csslist: Array.from(document.styleSheets).map(({ href, cssRules, ownerNode }, index) => {
       return {
-        href,
-        selectorTexts: Array.from(cssRules).map(({ selectorText }) => selectorText)
+        href: href === null ? "自定义样式" + index : href,
+        selectorTexts: Array.from(cssRules).map(({ selectorText }) => selectorText),
+        styleCode: ownerNode instanceof HTMLStyleElement ? ownerNode.innerHTML : "" // 自定义的样式，需要提前存储
       }
     }),
     path: getNodePosition(oldTarget),

page.js

@@ -37,7 +37,12 @@ chrome.runtime.onMessage.addListener(async (request, sender, sendResponse) => {
       pageTab = new PageTab({ tabs });
     }
     pageTab.reset();
-    pageTab.activeTabById("tabFirst");
+    let activeTab = pageTab.getActiveTab();
+    if (activeTab) {
+      pageTab.activeTabById(activeTab.id);
+    } else {
+      pageTab.activeTabById("tabFirst");
+    }
   }
 });
 
@@ -325,7 +330,7 @@ function CssJsonData(jsonData) {
       文件: "用户自定义",
       样式属性: 内敛的样式,
       选择器: "",
-      分类: "内敛样式"
+      分类: "内联样式"
     })
   }
   匹配的样式.forEach((rule) => {
@@ -333,7 +338,7 @@ function CssJsonData(jsonData) {
       文件: rule.origin,
       样式属性: rule.style,
       选择器: rule.text,
-      分类: "外敛样式"
+      分类: "外联样式"
     })
   })
 
@@ -688,9 +693,13 @@ class PageTab {
 
   activeTabById(id) {
     // 移除已经选中的
-    let activedTab = this.tabs.find(a => a.isActive);
-    if (activedTab) {
-      activedTab.removeActive();
+    let activedTab = this.tabs.filter(a => a.isActive);
+    if (activedTab.length > 0) {
+      activedTab.forEach(a => {
+        if (a.id !== id) {
+          a.removeActive();
+        }
+      })
     }
     // 给设置的选中
     let awaitActiveTab = this.tabs.find(a => a.id === id);
@@ -702,6 +711,10 @@ class PageTab {
   reset() {
     this.tabs.forEach(s => { s.changeLived(false) })
   }
+
+  getActiveTab() {
+    return this.tabs.find(a => a.isActive)
+  }
 }
 
 class Tab {
@@ -710,7 +723,6 @@ class Tab {
   #contentEle // tab内容元素
   #isAlived // 是否保持持久化(为true表示 页卡激活事件只执行一次，当前内容会一直存在，如果为false，则表示每次点击页卡都会重新执行激活事件)
   #event // 激活页卡执行事件
-  #isActived // 是否选中
   #isLived
 
   get id() {
@@ -721,13 +733,12 @@ class Tab {
     this.#tabEle = Tab.getTabEleById(id);
     this.#contentEle = Tab.getTabContentById(id);
     this.#isAlived = isAlived;
-    this.#isActived = false;
     this.#event = activeEvent;
   }
 
   get tabInfo() {
     return {
-      isActive: this.isActive(),
+      isActive: this.isActive,
       id: this.#id
     }
   }
@@ -735,8 +746,8 @@ class Tab {
   /**
    * 判断是否为选中的标签
    */
-  isActive() {
-    return this.#isActived;
+  get isActive() {
+    return this.#tabEle.classList.contains('active');
   }
 
   /**
@@ -745,7 +756,6 @@ class Tab {
   addActive() {
     this.#tabEle.classList.add('active');
     this.#contentEle.classList.add('active');
-    this.#isActived = true;
     this.activeEvent();
     this.#isLived = true;
   }
@@ -768,7 +778,6 @@ class Tab {
   removeActive() {
     this.#tabEle.classList.remove('active');
     this.#contentEle.classList.remove('active');
-    this.#isActived = false;
   }
 
   static getTabEleById(id) {
@@ -922,7 +931,7 @@ async function domPropTab() {
         expandMode: "rowClick",
       },
       allowColumnReordering: true,
-      rowAlternationEnabled: true,
+      rowAlternationEnabled: false,
       showBorders: true,
       height: "100%",
       paging: {
@@ -936,9 +945,12 @@ async function domPropTab() {
           groupCellTemplate: function (tdom, tdMsg) {
             let name = tdMsg.value;
             try {
-              name = (name === "用户自定义" ? name : name.match(/\/([^\/]+\.css)(\?[^ ]*)?$/)[1])
-            } catch {
-            }
+              if (/自定义样式/.test(name)) {
+                name = name.match(/自定义样式/)[0]
+              } else if (/\/([^\/]+\.css)(\?[^ ]*)?$/.test(name)) {
+                name = name.match(/\/([^\/]+\.css)(\?[^ ]*)?$/)[1];
+              }
+            } catch { }
             tdom.text(name)
           },
           groupIndex: 0
@@ -967,7 +979,11 @@ async function domPropTab() {
             let fileName = data.文件;
             let code = ""
             if (!cssFileInfo[fileName]) {
-              code = fileName === "用户自定义" ? "" : await (await fetch(fileName)).text();
+              if (/自定义样式/.test(fileName)) {
+                code = cssList.find(a => a.href === fileName)?.styleCode ?? "";
+              } else {
+                code = fileName === "用户自定义" ? "" : await (await fetch(fileName)).text();
+              }
               cssFileInfo[fileName] = {
                 code
               }