add Sponsor button

background.js

@@ -0,0 +1,5 @@
+chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
+    if (message.action === "openTab") {
+        chrome.tabs.create({url: message.url});
+    }
+});

manifest.json

@@ -13,8 +13,12 @@
   },
   "permissions": [
     "scripting",
-    "activeTab"
+    "activeTab",
+    "tabs"
   ],
+  "background": {
+    "service_worker": "background.js"
+  },
   "content_scripts": [
     {
       "matches": [

popup.css

@@ -79,15 +79,45 @@ body {
     text-align: center;
     border-top: 1px solid #ccc;
     padding-top: 10px;
+    display: flex; /* 添加这一行使得.footer下的直接子元素并排排列 */
+    justify-content: center; /* 使得子元素在中心对齐 */
+    gap: 10px; /* 如果需要，可以添加这一行以在子元素之间创建一些空间 */
   }
 
-  button#remove-checkboxes {
+.footer button {
-    background-color: #badb34;
+  font-size: inherit; /* 这行代码使按钮的字体大小继承自其父元素，即.footer */
-    border-color: #b6b929;
+  background-color: #383E46;
-  }
+  border-color: #78838F;
+}
 
-  button#toggle-checkboxes {
+button#remove-checkboxes {
-    background-color: #2287da;
+  background-color: #badb34;
-    border-color: #2758ab;
+  border-color: #b6b929;
-  }
+}
 
+button#toggle-checkboxes {
+  background-color: #2287da;
+  border-color: #2758ab;
+}
+
+#sponsorLink {
+  display: inline-flex;
+  align-items: center;
+  padding: 10px 20px;
+  background-color: #383E46;
+  border-color: #78838F;
+  border-radius: 5px;
+  color: #fff;
+  text-decoration: none;
+  cursor: pointer;
+  transition: background-color 0.3s ease;
+}
+
+#sponsorLink .icon-text {
+  display: flex;
+  align-items: center;
+}
+
+#sponsorLink:hover {
+  background-color: #993366;
+}

popup.html

@@ -18,9 +18,17 @@
         <button id="toggle-checkboxes">Toggle Checkboxes</button>
         <button id="bulk-delete">Bulk Delete</button>
     </div>  
+    
     <div class="footer">
+        <a href="https://github.com/sponsors/qcrao" target="_blank" id="sponsorLink">            
+            <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-heart icon-sponsor mr-1 v-align-middle color-fg-sponsors anim-pulse-in" style="fill: #BC6796; vertical-align: middle;">
+                <path d="m8 14.25.345.666a.75.75 0 0 1-.69 0l-.008-.004-.018-.01a7.152 7.152 0 0 1-.31-.17 22.055 22.055 0 0 1-3.434-2.414C2.045 10.731 0 8.35 0 5.5 0 2.836 2.086 1 4.25 1 5.797 1 7.153 1.802 8 3.02 8.847 1.802 10.203 1 11.75 1 13.914 1 16 2.836 16 5.5c0 2.85-2.045 5.231-3.885 6.818a22.066 22.066 0 0 1-3.744 2.584l-.018.01-.006.003h-.002ZM4.25 2.5c-1.336 0-2.75 1.164-2.75 3 0 2.15 1.58 4.144 3.365 5.682A20.58 20.58 0 0 0 8 13.393a20.58 20.58 0 0 0 3.135-2.211C12.92 9.644 14.5 7.65 14.5 5.5c0-1.836-1.414-3-2.75-3-1.373 0-2.609.986-3.029 2.456a.749.749 0 0 1-1.442 0C6.859 3.486 5.623 2.5 4.25 2.5Z"></path>
+            </svg>
+            &nbsp;Sponsor
+        </a>
         <p id="copyright"></p>
     </div>
+    
     <script src="popup.js"></script>
 </body>
 </html>