feat: 在弹窗中添加编辑规则功能

EmccK · Jan 9, 2025 · 97481d5 · 97481d5
1 parent c5ea6f9
commit 97481d5
Show file tree

Hide file tree

Showing 3 changed files with 133 additions and 18 deletions.
diff --git a/manifest.json b/manifest.json
@@ -1,7 +1,7 @@
 {
   "manifest_version": 3,
   "name": "Rename Tab",
-  "version": "1.1",
+  "version": "1.2",
   "description": "允许用户手动或根据 URL 规则重命名 Chrome 标签页。",
   "permissions": [
     "tabs",

diff --git a/popup.html b/popup.html
@@ -6,10 +6,41 @@
   <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
   <style>
     body {
-      min-width: 600px; /* Increased minimum width for the table */
+      min-width: 600px;
       min-height: 150px;
       padding: 15px;
     }
+    .table-fixed {
+      table-layout: fixed;
+    }
+    .w-url {
+      width: auto;
+    }
+    .single-line {
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      max-width: 100%;
+    }
+    .wrap-url {
+      white-space: normal;
+      word-break: break-all;
+      hyphens: auto;
+    }
+    .table-compact td {
+      padding-top: 0.5rem;
+      padding-bottom: 0.5rem;
+    }
+    .table-compact th {
+      padding-top: 0.75rem;
+      padding-bottom: 0.75rem;
+    }
+    #editRuleDiv.hidden {
+      display: none;
+    }
+    #editRuleDiv {
+      margin-top: 20px; /* Added margin to push the edit form down slightly if needed */
+    }
   </style>
 </head>
 <body class="bg-gray-100">
@@ -36,22 +67,22 @@ <h2 class="text-lg font-bold mb-2">管理重命名规则</h2>
       <button id="addRuleButton" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">添加规则</button>
     </div>
     <div id="rulesList">
-      <table class="min-w-full leading-normal shadow-md rounded-lg overflow-hidden">
+      <table class="table-fixed min-w-full leading-normal shadow-md rounded-lg overflow-hidden table-compact">
         <thead>
           <tr>
-            <th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
+            <th class="px-5 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
               名称
             </th>
-            <th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
+            <th class="px-5 border-b-2 border-gray-200 bg-gray-100 text-center text-xs font-semibold text-gray-600 uppercase tracking-wider single-line">
               匹配类型
             </th>
-            <th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
+            <th class="px-5 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
               URL 模式
             </th>
-            <th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
+            <th class="px-5 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider single-line">
               新标题
             </th>
-            <th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
+            <th class="px-5 border-b-2 border-gray-200 bg-gray-100 text-center text-xs font-semibold text-gray-600 uppercase tracking-wider">
               操作
             </th>
           </tr>
@@ -64,6 +95,22 @@ <h2 class="text-lg font-bold mb-2">管理重命名规则</h2>
     </div>
   </div>
 
+  <div id="editRuleDiv" class="hidden mt-4">
+    <h2 class="text-lg font-bold mb-2">编辑重命名规则</h2>
+    <input type="hidden" id="editRuleIndex">
+    <input type="text" id="editRuleName" placeholder="规则名称" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline mb-1">
+    <select id="editRuleMatchType" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline mb-1">
+      <option value="host">Host 匹配</option>
+      <option value="regex">正则表达式匹配</option>
+    </select>
+    <input type="text" id="editRuleUrlPattern" placeholder="URL 或 Host 模式" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline mb-1">
+    <input type="text" id="editRuleNewTitle" placeholder="新的标签页标题 (可以使用 ${title} 占位符)" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline mb-1">
+    <div class="flex justify-end">
+      <button id="saveRuleButton" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline mr-2">保存</button>
+      <button id="cancelEditButton" class="bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">取消</button>
+    </div>
+  </div>
+
   <script src="popup.js"></script>
 </body>
 </html>
diff --git a/popup.js b/popup.js
@@ -14,6 +14,15 @@ document.addEventListener('DOMContentLoaded', function() {
   const rulesTableBody = rulesListDiv.querySelector('tbody');
   const noRulesMessage = rulesListDiv.querySelector('p');
 
+  const editRuleDiv = document.getElementById('editRuleDiv');
+  const editRuleIndexInput = document.getElementById('editRuleIndex');
+  const editRuleNameInput = document.getElementById('editRuleName');
+  const editRuleMatchTypeSelect = document.getElementById('editRuleMatchType');
+  const editRuleUrlPatternInput = document.getElementById('editRuleUrlPattern');
+  const editRuleNewTitleInput = document.getElementById('editRuleNewTitle');
+  const saveRuleButton = document.getElementById('saveRuleButton');
+  const cancelEditButton = document.getElementById('cancelEditButton');
+
   async function getRenameRules() {
     return new Promise((resolve) => {
       chrome.storage.sync.get(['renameRules'], function(result) {
@@ -30,6 +39,16 @@ document.addEventListener('DOMContentLoaded', function() {
     });
   }
 
+  function populateEditForm(rule, index) {
+    editRuleIndexInput.value = index;
+    editRuleNameInput.value = rule.name;
+    editRuleMatchTypeSelect.value = rule.matchType;
+    editRuleUrlPatternInput.value = rule.urlPattern;
+    editRuleNewTitleInput.value = rule.newTitle;
+    editRuleDiv.classList.remove('hidden');
+    editRuleDiv.scrollIntoView({ behavior: 'smooth', block: 'start' }); // Scroll to the edit form
+  }
+
   async function displayRules() {
     const rules = await getRenameRules();
     rulesTableBody.innerHTML = '';
@@ -43,15 +62,33 @@ document.addEventListener('DOMContentLoaded', function() {
         const newTitleCell = row.insertCell();
         const actionsCell = row.insertCell();
 
+        // 名称列
         nameCell.textContent = rule.name ? rule.name : '未命名规则';
-        nameCell.classList.add('px-5', 'py-3', 'border-b', 'border-gray-200', 'bg-white', 'text-sm');
+        nameCell.classList.add('px-5', 'border-b', 'border-gray-200', 'bg-white', 'text-sm', 'single-line');
+        nameCell.title = rule.name ? rule.name : '未命名规则';
+
+        // 匹配类型列
         matchTypeCell.textContent = rule.matchType === 'host' ? 'Host' : 'Regex';
-        matchTypeCell.classList.add('px-5', 'py-3', 'border-b', 'border-gray-200', 'bg-white', 'text-sm', 'text-center');
+        matchTypeCell.classList.add('px-5', 'border-b', 'border-gray-200', 'bg-white', 'text-sm', 'text-center', 'single-line');
+
+        // URL模式列 - 允许换行
         urlPatternCell.textContent = rule.urlPattern;
-        urlPatternCell.classList.add('px-5', 'py-3', 'border-b', 'border-gray-200', 'bg-white', 'text-sm');
+        urlPatternCell.classList.add('px-5', 'border-b', 'border-gray-200', 'bg-white', 'text-sm', 'wrap-url');
+
+        // 新标题列
         newTitleCell.textContent = rule.newTitle;
-        newTitleCell.classList.add('px-5', 'py-3', 'border-b', 'border-gray-200', 'bg-white', 'text-sm');
-        actionsCell.classList.add('px-5', 'py-3', 'border-b', 'border-gray-200', 'bg-white', 'text-sm', 'text-center');
+        newTitleCell.classList.add('px-5', 'border-b', 'border-gray-200', 'bg-white', 'text-sm', 'single-line');
+        newTitleCell.title = rule.newTitle;
+
+        // 操作列
+        actionsCell.classList.add('px-5', 'border-b', 'border-gray-200', 'bg-white', 'text-sm', 'text-center', 'single-line');
+        const editButton = document.createElement('button');
+        editButton.textContent = '编辑';
+        editButton.classList.add('bg-blue-500', 'hover:bg-blue-700', 'text-white', 'font-bold', 'py-1', 'px-2', 'rounded', 'mr-1');
+        editButton.addEventListener('click', () => {
+          populateEditForm(rule, index);
+        });
+        actionsCell.appendChild(editButton);
 
         const deleteButton = document.createElement('button');
         deleteButton.textContent = '删除';
@@ -99,8 +136,7 @@ document.addEventListener('DOMContentLoaded', function() {
         chrome.runtime.sendMessage(message);
 
         if (autoAddHostRuleCheckbox.checked) {
-          // Save the manual rename as a new rule
-          const ruleName = newTitle; // 使用新的标签页标题作为规则名
+          const ruleName = newTitle;
           const matchType = 'host';
           const urlPattern = (new URL(currentTab.url)).hostname;
           const newTitlePattern = newTitle;
@@ -109,14 +145,12 @@ document.addEventListener('DOMContentLoaded', function() {
           currentRules.push({ name: ruleName, matchType: matchType, urlPattern: urlPattern, newTitle: newTitlePattern });
           const saved = await saveRenameRules(currentRules);
           if (saved) {
-            // Re-display the updated rules
             displayRules();
           } else {
             alert('保存重命名规则失败。');
           }
         }
 
-        // Clear the input field
         newTabTitleInput.value = '';
       }
     });
@@ -144,7 +178,6 @@ document.addEventListener('DOMContentLoaded', function() {
         newRuleUrlPatternInput.value = '';
         newRuleNewTitleInput.value = '';
         displayRules();
-        // Refresh current tab to apply the new rule
         chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
           if (tabs[0]) {
             chrome.tabs.reload(tabs[0].id);
@@ -157,4 +190,39 @@ document.addEventListener('DOMContentLoaded', function() {
       alert('请填写 URL 或 Host 模式和新的标签页标题。');
     }
   });
+
+  saveRuleButton.addEventListener('click', async function() {
+    const index = parseInt(editRuleIndexInput.value);
+    const ruleName = editRuleNameInput.value;
+    const matchType = editRuleMatchTypeSelect.value;
+    const urlPattern = editRuleUrlPatternInput.value;
+    const newTitle = editRuleNewTitleInput.value;
+
+    if (!isNaN(index) && urlPattern && newTitle) {
+      const currentRules = await getRenameRules();
+      if (index >= 0 && index < currentRules.length) {
+        currentRules[index] = { name: ruleName, matchType: matchType, urlPattern: urlPattern, newTitle: newTitle };
+        const saved = await saveRenameRules(currentRules);
+        if (saved) {
+          editRuleDiv.classList.add('hidden');
+          displayRules();
+          chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
+            if (tabs[0]) {
+              chrome.tabs.reload(tabs[0].id);
+            }
+          });
+        } else {
+          alert('保存重命名规则失败。');
+        }
+      } else {
+        alert('无效的规则索引。');
+      }
+    } else {
+      alert('请填写 URL 或 Host 模式和新的标签页标题。');
+    }
+  });
+
+  cancelEditButton.addEventListener('click', function() {
+    editRuleDiv.classList.add('hidden');
+  });
 });