Fix issue #1: Add Rank Filter.

css/filter.css

@@ -0,0 +1,38 @@
+.ccf-filter {
+  position: fixed;
+  top: 120px;
+  right: 30px;
+  z-index: 9999;
+  background: #fff;
+  border: 1px solid #ddd;
+  border-radius: 8px;
+  padding: 12px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.ccf-filter button {
+  display: block;
+  width: 100%;
+  margin: 4px 0;
+  padding: 8px 16px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  background: #fff;
+  cursor: pointer;
+  font-size: 14px;
+  transition: all 0.2s ease;
+}
+
+.ccf-filter button:hover {
+  background: #f5f5f5;
+}
+
+.ccf-filter button.active {
+  background: #4285f4;
+  color: #fff;
+  border-color: #4285f4;
+}
+
+.paper-hidden {
+  display: none !important;
+}

js/filter.js

@@ -0,0 +1,115 @@
+/**
+ * MIT License
+ *
+ * Copyright (c) 2019-2024 WenyanLiu (https://github.com/WenyanLiu/CCFrank4dblp)
+ */
+
+const filter = {
+  currentFilter: "ALL",
+  processedEntries: new Set(),
+
+  init() {
+    if (!window.location.hostname.startsWith("dblp")) {
+      return;
+    }
+
+    this.createFilterButtons();
+    this.bindEvents();
+    this.setupInfiniteScrollHandler();
+  },
+
+  createFilterButtons() {
+    const filterDiv = document.createElement("div");
+    filterDiv.className = "ccf-filter";
+    filterDiv.innerHTML = `
+      <button data-rank="ALL" class="active">ALL</button>
+      <button data-rank="A">CCF A</button>
+      <button data-rank="B">CCF B</button>
+      <button data-rank="C">CCF C</button>
+    `;
+    document.body.appendChild(filterDiv);
+  },
+
+  setupInfiniteScrollHandler() {
+    const observer = new IntersectionObserver((entries) => {
+      entries.forEach((entry) => {
+        if (entry.isIntersecting) {
+          this.applyFilter(true);
+        }
+      });
+    });
+
+    const trigger = document.querySelector("#completesearch-publs");
+    if (trigger) {
+      observer.observe(trigger);
+    }
+
+    window.addEventListener(
+      "scroll",
+      this.debounce(() => {
+        this.applyFilter(true);
+      }, 200),
+    );
+  },
+
+  applyFilter(preserveExisting = false) {
+    const entries = document.querySelectorAll(
+      "#completesearch-publs > div > ul > li",
+    );
+    entries.forEach((entry) => {
+      const entryId = entry.querySelector("a")?.href || entry.innerHTML;
+      if (this.processedEntries.has(entryId) && preserveExisting) {
+        return;
+      }
+
+      this.processedEntries.add(entryId);
+
+      const hasCCFC = entry.textContent.includes("CCF C");
+      const hasCCFB = entry.textContent.includes("CCF B");
+      const hasCCFA = entry.textContent.includes("CCF A");
+
+      let shouldShow = false;
+
+      if (this.currentFilter === "ALL") {
+        shouldShow = true;
+      } else if (this.currentFilter === "C" && hasCCFC) {
+        shouldShow = true;
+      } else if (this.currentFilter === "B" && hasCCFB) {
+        shouldShow = true;
+      } else if (this.currentFilter === "A" && hasCCFA) {
+        shouldShow = true;
+      }
+
+      const currentlyVisible = entry.style.display !== "none";
+      if (currentlyVisible !== shouldShow || !preserveExisting) {
+        entry.style.display = shouldShow ? "" : "none";
+      }
+    });
+  },
+
+  debounce(func, wait) {
+    let timeout;
+    return function executedFunction(...args) {
+      const later = () => {
+        clearTimeout(timeout);
+        func(...args);
+      };
+      clearTimeout(timeout);
+      timeout = setTimeout(later, wait);
+    };
+  },
+
+  bindEvents() {
+    document.querySelector(".ccf-filter").addEventListener("click", (e) => {
+      if (e.target.tagName === "BUTTON") {
+        document.querySelectorAll(".ccf-filter button").forEach((btn) => {
+          btn.classList.remove("active");
+        });
+        e.target.classList.add("active");
+
+        this.currentFilter = e.target.dataset.rank;
+        this.applyFilter(false);
+      }
+    });
+  },
+};

manifest.json

@@ -107,7 +107,7 @@
         "https://www.webofscience.com/*",
         "https://www.semanticscholar.org/*"
       ],
-      "css": ["css/style.css"],
+      "css": ["css/style.css", "css/filter.css"],
       "js": [
         "lib/jquery-3.5.1.min.js",
         "js/dblp.js",
@@ -118,6 +118,7 @@
         "js/apiCache.js",
         "js/ccf.js",
         "js/fetchRank.js",
+        "js/filter.js",
         "data/ccfRankAbbr.js",
         "data/ccfRankFull.js",
         "data/ccfRankDb.js",

script.js

@@ -15,3 +15,5 @@ if (window.location.hostname.startsWith("dblp")) {
 } else if (window.location.hostname.includes("webofscience")) {
   wos.run();
 }
+
+filter.init();