Enhance bilibili blacklist

manifest.json

@@ -23,7 +23,8 @@
         "scripts/videoui.js",
         "scripts/biliscope.js",
         "scripts/load.js",
-        "scripts/rollbackfeedcard.js"
+        "scripts/rollbackfeedcard.js",
+        "scripts/blacklist.js"
       ],
       "css": [
         "css/idcard.css",
@@ -41,6 +42,9 @@
   "permissions": [
     "storage"
   ],
+  "host_permissions": [
+    "https://*.bilibili.com/*"
+  ],
   "action": {
     "default_popup": "options/options.html",
     "default_title": "BiliScope - Bilibili插件，你的B站小助手"

options/options.html

@@ -94,6 +94,14 @@
 
   <hr>
 
+  <div class="item">
+    <div>
+      <button id="refresh-blacklist">刷新黑名单</button>
+    </div>
+  </div>
+
+  <hr/>
+
   <div id="status" class="item"></div>
   <div class="item">
     <button id="save" class="btn btn-primary">保存</button>

options/options.js

@@ -253,6 +253,17 @@ document.getElementById('clear-note-confirm').addEventListener('click', () => {
     document.getElementById('clear-note-button-div').hidden = false;
 });
 
+document.getElementById('refresh-blacklist').addEventListener('click', () => {
+    chrome.tabs.query({
+        url: "https://*.bilibili.com/*"
+    }).then(tabs => {
+        tabs.forEach(tab => {
+            chrome.tabs.sendMessage(tab.id, {action: "refreshBlackList"});
+        });
+        show_status('刷新成功', 3000);
+    });
+});
+
 document.getElementById('report-issue').addEventListener('click', () => {
     chrome.tabs.create({url: 'https://github.com/gaogaotiantian/biliscope/issues'});
 });

scripts/blacklist.js

@@ -0,0 +1,103 @@
+async function getBlackList(pn) {
+    return biliGet("https://api.bilibili.com/x/relation/blacks", {
+        pn: pn,
+        ps: NUM_PER_PAGE,
+    }).then((data) => {
+        if (data["code"] == 0) {
+            return data;
+        }
+    })
+}
+
+/** @type {?number[]} */
+var banMids;
+
+chrome.storage.local.get({
+    banMids: null
+}, function (result) {
+    if (result.banMids != null) {
+        banMids = result.banMids;
+        return;
+    }
+
+    updateBanMids();
+});
+
+function updateBanMids(callback) {
+    let banLists = [];
+    getBlackList(1).then((data) => {
+        banLists = banLists.concat(data["data"]["list"]);
+
+        let pn = 1;
+        let promises = [];
+        while (pn * NUM_PER_PAGE < data["data"]["total"]) {
+            pn += 1;
+            promises.push(getBlackList(pn));
+        }
+        Promise.all(promises).then((datas) => {
+            banLists = banLists.concat(...datas.map(data => data["data"]["list"]));
+        })
+
+        banMids = banLists.map(ban => ban["mid"]);
+
+        chrome.storage.local.set({
+            banMids: banMids
+        });
+
+        callback(data);
+    });
+}
+
+function hiddenElChildren(selector) {
+    const target = document.querySelector(selector);
+    if (target) {
+        for (const el of target.children) {
+            const mid = el.querySelector("[biliscope-userid]")?.getAttribute("biliscope-userid");
+            if (banMids.includes(parseInt(mid))) {
+                el._display ??= el.style.display;
+                el.style.display = "none";
+            } else if (el._display != undefined) {
+                el.style.display = el._display;
+            }
+        }
+    }
+}
+
+function cleanPopularPage() {
+    const { pathname } = window.location;
+
+    if (pathname.endsWith("weekly/")) {
+        hiddenElChildren(".video-list");
+    } else if (pathname.includes("rank")) {
+        hiddenElChildren(".rank-list");
+    }
+}
+
+function cleanSearchPage() {
+    hiddenElChildren(".video-list");
+}
+
+function cleanPages() {
+    if (window.location.href.startsWith(BILIBILI_POPULAR_URL)) {
+        cleanPopularPage();
+    } else if (window.location.href.startsWith(BILIBILI_SEARCH_URL)) {
+        cleanSearchPage();
+    }
+}
+
+const pageObserver = new MutationObserver((mutationList, observer) => {
+    cleanPages();
+});
+
+window.addEventListener("load", function () {
+    pageObserver.observe(document.body, {
+        childList: true,
+        subtree: true,
+    });
+});
+
+chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
+    if (request.action == "refreshBlackList") {
+        updateBanMids(() => cleanPages());
+    }
+});

scripts/ui.js

@@ -20,10 +20,6 @@ function relationDisplay(data) {
         return null;
     }
 
-    if (data["relation"]["attribute"] == 128) {
-        return "已拉黑";
-    }
-
     if (data["be_relation"]["attribute"] == 128) {
         return "已被拉黑";
     }
@@ -49,7 +45,7 @@ function relationClass(data) {
     text = relationDisplay(data);
     if (text == null) {
         return "d-none";
-    } else if (text == "已拉黑" || text == "已被拉黑") {
+    } else if (text == "已被拉黑") {
         return "biliscope-relation-black";
     } else if (text == "关注" || text == "关注了你") {
         return "biliscope-relation-follow";
@@ -58,8 +54,21 @@ function relationClass(data) {
     }
 }
 
+function blockDisplay(data) {
+    if (data?.relation?.attribute === undefined) {
+        return null;
+    }
+
+    if (data["relation"]["attribute"] == 128) {
+        return "取消拉黑";
+    } else {
+        return "拉黑";
+    }
+}
+
 function blockClass(data) {
-    if (biliScopeOptions.enableBlockButton && data?.relation?.attribute == 0) {
+    const text = blockDisplay(data);
+    if (biliScopeOptions.enableBlockButton && text) {
         return "biliscope-relation-block";
     }
     return "d-none";
@@ -88,8 +97,8 @@ function getUserProfileCardDataHTML(data) {
         <div class="idc-theme-img" style="background-image: url(&quot;${data["top_photo"]}@100Q.webp&quot;);">
             <div style="position: absolute; top: 85px; right: 10px">
                 <a><span id="biliscope-follow-button" class="biliscope-relation ${relationClass(data)}">${relationDisplay(data)}</span></a>
-                <a><span id="biliscope-block-button" class="biliscope-relation ${blockClass(data)}">拉黑</span></a>
-                <a href="${messageLink(data)}"><span id="biliscope-block-button" class="biliscope-relation ${messageClass(data)}">私信</span></a>
+                <a><span id="biliscope-block-button" class="biliscope-relation ${blockClass(data)}">${blockDisplay(data)}</span></a>
+                <a href="${messageLink(data)}"><span class="biliscope-relation ${messageClass(data)}">私信</span></a>
             </div>
         </div>
         <div class="idc-info clearfix">
@@ -626,14 +635,25 @@ UserProfileCard.prototype.setupTriggers = function() {
     blockButton.addEventListener("click", (ev) => {
         ev.stopPropagation();
 
+        const needBlock = blockButton.innerText == "拉黑";
+
         biliPost("https://api.bilibili.com/x/relation/modify", {
             fid: this.data["mid"],
-            act: 5,
+            act: needBlock ? 5 : 6,
             re_src: 11
         })
         .then((data) => {
             if (data["code"] == 0) {
                 updateRelation(this.userId, (data) => this.updateData(data));
+
+                if (needBlock) {
+                    banMids.push(parseInt(this.userId));
+                } else {
+                    banMids.splice(banMids.indexOf(parseInt(this.userId)));
+                }
+                chrome.storage.local.set({
+                    banMids: banMids
+                });
             }
         });
     });