☰

B站备注

B站用户备注脚本| Bilibili用户备注

  1. // ==UserScript==
  2. // @name         B站备注
  3. // @namespace    https://github.com/pxoxq
  4. // @version      0.4.1
  5. // @description  B站用户备注脚本| Bilibili用户备注
  6. // @license      AGPL-3.0-or-later
  7. // @author       pxoxq
  8. // @match        https://*.bilibili.com/**
  9. // @icon         data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==
  10. // @grant        GM_addElement
  11. // @grant        GM_addStyle
  12. // @grant        window.onurlchange
  13. // @require      https://code.jquery.com/jquery-3.7.1.min.js
  14. // ==/UserScript==
  15.  
  16. // -----------ElementGetter----------------
  17. var elmGetter = function() {
  18.   const win = window.unsafeWindow || document.defaultView || window;
  19.   const doc = win.document;
  20.   const listeners = new WeakMap();
  21.   let mode = 'css';
  22.   let $;
  23.   const elProto = win.Element.prototype;
  24.   const matches = elProto.matches ||
  25.       elProto.matchesSelector ||
  26.       elProto.webkitMatchesSelector || 
  27.       elProto.mozMatchesSelector ||
  28.       elProto.oMatchesSelector;
  29.   const MutationObs = win.MutationObserver ||
  30.       win.WebkitMutationObserver ||
  31.       win.MozMutationObserver;
  32.   function addObserver(target, callback) {
  33.       const observer = new MutationObs(mutations => {
  34.           for (const mutation of mutations) {
  35.               if (mutation.type === 'attributes') {
  36.                   callback(mutation.target);
  37.                   if (observer.canceled) return;
  38.               }
  39.               for (const node of mutation.addedNodes) {
  40.                   if (node instanceof Element) callback(node);
  41.                   if (observer.canceled) return;
  42.               }
  43.           }
  44.       });
  45.       observer.canceled = false;
  46.       observer.observe(target, {childList: true, subtree: true, attributes: true});
  47.       return () => {
  48.           observer.canceled = true;
  49.           observer.disconnect();
  50.       };
  51.   }
  52.   function addFilter(target, filter) {
  53.       let listener = listeners.get(target);
  54.       if (!listener) {
  55.           listener = {
  56.               filters: new Set(),
  57.               remove: addObserver(target, el => listener.filters.forEach(f => f(el)))
  58.           };
  59.           listeners.set(target, listener);
  60.       }
  61.       listener.filters.add(filter);
  62.   }
  63.   function removeFilter(target, filter) {
  64.       const listener = listeners.get(target);
  65.       if (!listener) return;
  66.       listener.filters.delete(filter);
  67.       if (!listener.filters.size) {
  68.           listener.remove();
  69.           listeners.delete(target);
  70.       }
  71.   }
  72.   function query(all, selector, parent, includeParent, curMode) {
  73.       switch (curMode) {
  74.           case 'css':
  75.               const checkParent = includeParent && matches.call(parent, selector);
  76.               if (all) {
  77.                   const queryAll = parent.querySelectorAll(selector);
  78.                   return checkParent ? [parent, ...queryAll] : [...queryAll];
  79.               }
  80.               return checkParent ? parent : parent.querySelector(selector);
  81.           case 'jquery':
  82.               let jNodes = $(includeParent ? parent : []);
  83.               jNodes = jNodes.add([...parent.querySelectorAll('*')]).filter(selector);
  84.               if (all) return $.map(jNodes, el => $(el));
  85.               return jNodes.length ? $(jNodes.get(0)) : null;
  86.           case 'xpath':
  87.               const ownerDoc = parent.ownerDocument || parent;
  88.               selector += '/self::*';
  89.               if (all) {
  90.                   const xPathResult = ownerDoc.evaluate(selector, parent, null, 7, null);
  91.                   const result = [];
  92.                   for (let i = 0; i < xPathResult.snapshotLength; i++) {
  93.                       result.push(xPathResult.snapshotItem(i));
  94.                   }
  95.                   return result;
  96.               }
  97.               return ownerDoc.evaluate(selector, parent, null, 9, null).singleNodeValue;
  98.       }
  99.   }
  100.   function isJquery(jq) {
  101.       return jq && jq.fn && typeof jq.fn.jquery === 'string';
  102.   }
  103.   function getOne(selector, parent, timeout) {
  104.       const curMode = mode;
  105.       return new Promise(resolve => {
  106.           const node = query(false, selector, parent, false, curMode);
  107.           if (node) return resolve(node);
  108.           let timer;
  109.           const filter = el => {
  110.               const node = query(false, selector, el, true, curMode);
  111.               if (node) {
  112.                   removeFilter(parent, filter);
  113.                   timer && clearTimeout(timer);
  114.                   resolve(node);
  115.               }
  116.           };
  117.           addFilter(parent, filter);
  118.           if (timeout > 0) {
  119.               timer = setTimeout(() => {
  120.                   removeFilter(parent, filter);
  121.                   resolve(null);
  122.               }, timeout);
  123.           }
  124.       });
  125.   }
  126.   return {
  127.       get currentSelector() {
  128.           return mode;
  129.       },
  130.       get(selector, ...args) {
  131.           let parent = typeof args[0] !== 'number' && args.shift() || doc;
  132.           if (mode === 'jquery' && parent instanceof $) parent = parent.get(0);
  133.           const timeout = args[0] || 0;
  134.           if (Array.isArray(selector)) {
  135.               return Promise.all(selector.map(s => getOne(s, parent, timeout)));
  136.           }
  137.           return getOne(selector, parent, timeout);
  138.       },
  139.       each(selector, ...args) {
  140.           let parent = typeof args[0] !== 'function' && args.shift() || doc;
  141.           if (mode === 'jquery' && parent instanceof $) parent = parent.get(0);
  142.           const callback = args[0];
  143.           const curMode = mode;
  144.           const refs = new WeakSet();
  145.           for (const node of query(true, selector, parent, false, curMode)) {
  146.               refs.add(curMode === 'jquery' ? node.get(0) : node);
  147.               if (callback(node, false) === false) return;
  148.           }
  149.           const filter = el => {
  150.               for (const node of query(true, selector, el, true, curMode)) {
  151.                   const _el = curMode === 'jquery' ? node.get(0) : node;
  152.                   if (refs.has(_el)) break;
  153.                   refs.add(_el);
  154.                   if (callback(node, true) === false) {
  155.                       return removeFilter(parent, filter);
  156.                   }
  157.               }
  158.           };
  159.           addFilter(parent, filter);
  160.       },
  161.       create(domString, ...args) {
  162.           const returnList = typeof args[0] === 'boolean' && args.shift();
  163.           const parent = args[0];
  164.           const template = doc.createElement('template');
  165.           template.innerHTML = domString;
  166.           const node = template.content.firstElementChild;
  167.           if (!node) return null;
  168.           parent ? parent.appendChild(node) : node.remove();
  169.           if (returnList) {
  170.               const list = {};
  171.               node.querySelectorAll('[id]').forEach(el => list[el.id] = el);
  172.               list[0] = node;
  173.               return list;
  174.           }
  175.           return node;
  176.       },
  177.       selector(desc) {
  178.           switch (true) {
  179.               case isJquery(desc):
  180.                   $ = desc;
  181.                   return mode = 'jquery';
  182.               case !desc || typeof desc.toLowerCase !== 'function':
  183.                   return mode = 'css';
  184.               case desc.toLowerCase() === 'jquery':
  185.                   for (const jq of [window.jQuery, window.$, win.jQuery, win.$]) {
  186.                       if (isJquery(jq)) {
  187.                           $ = jq;
  188.                           break;
  189.                       };
  190.                   }
  191.                   return mode = $ ? 'jquery' : 'css';
  192.               case desc.toLowerCase() === 'xpath':
  193.                   return mode = 'xpath';
  194.               default:
  195.                   return mode = 'css';
  196.           }
  197.       }
  198.   };
  199. }();
  200.  
  201.  
  202. // ==========防抖函数=============
  203. function pxoDebounce(func, delay) {
  204.   let timer = null;
  205.   function _debounce(...arg) {
  206.     timer && clearTimeout(timer);
  207.     timer = setTimeout(() => {
  208.       func.apply(this, arg);
  209.       timer = null;
  210.     }, delay);
  211.   }
  212.   return _debounce;
  213. }
  214.  
  215. class DateUtils {
  216.   static getCurrDateTimeStr() {
  217.     let date = new Date();
  218.     let year = date.getFullYear();
  219.     let month = date.getMonth() + 1;
  220.     let day = date.getDate();
  221.     let hour = date.getHours();
  222.     let minutes = date.getMinutes();
  223.     let sec = date.getSeconds();
  224.     return `${year}${month}${day}${hour}${minutes}${sec}`;
  225.   }
  226. }
  227.  
  228. /* =======================================
  229.     IndexedDB   开始
  230. ======================================= */
  231. class MyIndexedDB {
  232.   request;
  233.   db;
  234.   dbName;
  235.   dbVersion;
  236.   store;
  237.  
  238.   constructor(dbName, dbVersion, store) {
  239.     this.dbName = dbName;
  240.     this.dbVersion = dbVersion;
  241.     this.store = store;
  242.   }
  243.  
  244.   // 直接 await MyIndexedDB.create(xxxx)  获取实例对象
  245.   static async create(dbName, dbVersion, store) {
  246.     const obj = new MyIndexedDB(dbName, dbVersion, store);
  247.     obj.db = await obj.getConnection();
  248.     return obj;
  249.   }
  250.  
  251.   // 通过 new MyIndexedDB(xxx) 获取实例对象后，还需要 await initDB() 一下
  252.   async initDB() {
  253.     return new Promise((resolve, rej) => {
  254.       this.getConnection().then((res) => {
  255.         this.db = res;
  256.         resolve(this);
  257.       });
  258.     });
  259.   }
  260.  
  261.   // 控制台打印错误
  262.   consoleError(msg) {
  263.     console.log(`[myIndexedDB]: ${msg}`);
  264.   }
  265.  
  266.   // 获取连接；直接挂到 this.db 上
  267.   // 需要注意，第一次的话，会初始化好 db、 store。但是之后就不会初始化 store，需要判断获取
  268.   getConnection = async () => {
  269.     return new Promise((resolve, rej) => {
  270.       // console.log("连接到数据库： "+`--${this.dbName}--  --${this.dbVersion}--`)
  271.       // 打开数据库，没有则新建
  272.       this.request = indexedDB.open(this.dbName, this.dbVersion);
  273.       this.request.onerror = (e) => {
  274.         console.error(
  275.           `连接 ${this.dbName} [IndexedDB] 失败. version: [${this.dbVersion}]`,
  276.           e
  277.         );
  278.       };
  279.  
  280.       this.request.onupgradeneeded = async (event) => {
  281.         const db = event.target.result;
  282.         await this.createAndInitStore(
  283.           db,
  284.           this.store.conf.storeName,
  285.           this.store.data,
  286.           this.store.conf.uniqueIndex,
  287.           this.store.conf.normalIndex
  288.         );
  289.         // await this.createAndInitStore(db);
  290.         resolve(db);
  291.       };
  292.  
  293.       this.request.onsuccess = (e) => {
  294.         const db = e.target.result;
  295.         resolve(db);
  296.       };
  297.     });
  298.   };
  299.  
  300.   // 创建存储桶并初始化数据，默认是自增id
  301.   async createAndInitStore(
  302.     db = this.db,
  303.     storeName = "",
  304.     datas = [],
  305.     uniqueIndex = [],
  306.     normalIndex = []
  307.   ) {
  308.     if (!storeName || !datas) return;
  309.     return new Promise((resolve, rej) => {
  310.       // 自增id
  311.       const store = db.createObjectStore(storeName, {
  312.         keyPath: "id",
  313.         autoIncrement: true,
  314.       });
  315.       // 设置两类索引
  316.       uniqueIndex.forEach((item) => {
  317.         store.createIndex(item, item, { unique: true });
  318.       });
  319.       normalIndex.forEach((item) => {
  320.         store.createIndex(item, item, { unique: false });
  321.       });
  322.  
  323.       // 初始填充数据
  324.       store.transaction.oncomplete = (e) => {
  325.         const rwStore = this.getCustomRWstore(storeName, db);
  326.         datas.forEach((item) => {
  327.           rwStore.add(item);
  328.         });
  329.         resolve(0);
  330.       };
  331.     });
  332.   }
  333.  
  334.   // 获取所有数据
  335.   async getAllDatas() {
  336.     return new Promise((resolve, rej) => {
  337.       const rwStore = this.getCustomRWstore();
  338.       const req = rwStore.getAll();
  339.       req.onsuccess = (e) => {
  340.         resolve(req?.result);
  341.       };
  342.     });
  343.   }
  344.  
  345.   // 添加一条数据
  346.   async addOne(item) {
  347.     return new Promise((resolve, rej) => {
  348.       const rwStore = this.getCustomRWstore();
  349.       const req = rwStore.add(item);
  350.       req.onsuccess = () => {
  351.         resolve(true);
  352.       };
  353.       req.onerror = () => {
  354.         rej(false);
  355.       };
  356.     });
  357.   }
  358.  
  359.   // 根据uid获取一条数据
  360.   async getOne(id = 0) {
  361.     return new Promise((resolve, rej) => {
  362.       const rwStore = this.getCustomRWstore();
  363.       const req = rwStore.get(id);
  364.       req.onsuccess = () => {
  365.         resolve(req.result);
  366.       };
  367.     });
  368.   }
  369.  
  370.   // 查询一条数据， 字段column包含value子串
  371.   async queryOneLike(column, value) {
  372.     return new Promise((resolve, rej) => {
  373.       const rwStore = this.getCustomRWstore();
  374.       rwStore.openCursor().onsuccess = (event) => {
  375.         const cursor = event.target.result;
  376.         if (cursor) {
  377.           const item = { ...cursor.value };
  378.           if (item[column] && item[column].indexOf(value) > -1) {
  379.             item.id = cursor.key;
  380.             resolve(item);
  381.           }
  382.           cursor.continue();
  383.         } else {
  384.           resolve(false);
  385.         }
  386.       };
  387.     });
  388.   }
  389.  
  390.   // 查询一条数据， 字段column等于value
  391.   async queryOneEq(column, value) {
  392.     return new Promise((resolve, rej) => {
  393.       const rwStore = this.getCustomRWstore();
  394.       rwStore.openCursor().onsuccess = (event) => {
  395.         const cursor = event.target.result;
  396.         if (cursor) {
  397.           const item = { ...cursor.value };
  398.           if (item[column] == value) {
  399.             item.id = cursor.key;
  400.             resolve(item);
  401.           }
  402.           cursor.continue();
  403.         } else {
  404.           resolve(false);
  405.         }
  406.       };
  407.     });
  408.   }
  409.  
  410.   // 更新一条数据
  411.   async updateOne(item) {
  412.     return new Promise((resolve, rej) => {
  413.       const rwStore = this.getCustomRWstore();
  414.       const req = rwStore.put(item);
  415.       req.onsuccess = () => {
  416.         resolve(true);
  417.       };
  418.       req.onerror = (e) => {
  419.         console.log(req);
  420.         console.log(e);
  421.         rej(false);
  422.       };
  423.     });
  424.   }
  425.  
  426.   // 删除一条数据
  427.   async delOne(id) {
  428.     return new Promise((resolve, rej) => {
  429.       const rwStore = this.getCustomRWstore();
  430.       const req = rwStore.delete(id);
  431.       req.onsuccess = () => {
  432.         resolve(true);
  433.       };
  434.       req.onerror = (e) => {
  435.         rej(false);
  436.       };
  437.     });
  438.   }
  439.  
  440.   // 获取读写权限的存储桶 store。默认是this上挂的storename
  441.   getCustomRWstore(storeName = this.store.conf.storeName, db = this.db) {
  442.     return db.transaction(storeName, "readwrite").objectStore(storeName);
  443.   }
  444.  
  445.   // 状态值为 done 时表示连接上了。db挂到了this上
  446.   requestState() {
  447.     return this.request.readyState;
  448.   }
  449.   isReady() {
  450.     return this.request.readyState == "done";
  451.   }
  452.  
  453.   // 关闭数据库链接
  454.   closeDB() {
  455.     this.db && this.db.close();
  456.   }
  457.  
  458.   static setDBVersion(version) {
  459.     localStorage.setItem("pxoxq-dbv", version);
  460.   }
  461.  
  462.   static getDBVersion() {
  463.     const v = localStorage.getItem("pxoxq-dbv");
  464.     return v;
  465.   }
  466. }
  467. /* =======================================
  468.     IndexedDB    结束
  469. ======================================= */
  470.  
  471. /* =======================================
  472.     配置数据库表   结束
  473. ======================================= */
  474. class ConfigDB {
  475.   static simplifyIdx = false;
  476.   static autoWideMode = false;
  477.   static playerHeight = 700;
  478.   static memoMode = 0;
  479.   static importMode = 0;
  480.  
  481.   static Keys = {
  482.     simplifyIdx: "simplifyIdx",
  483.     autoWideMode: "autoWideMode",
  484.     playerHeight: "playerHeight",
  485.     memoMode: "memoMode",
  486.     importMode: "importMode",
  487.   };
  488.  
  489.   static dbConfig = {
  490.     DB_NAME: "bilibili_pxo",
  491.     DB_V: MyIndexedDB.getDBVersion() ?? 2,
  492.     store: {
  493.       conf: {
  494.         storeName: "conf",
  495.       },
  496.     },
  497.   };
  498.  
  499.   static async connnectDB(func) {
  500.     const myDb = await MyIndexedDB.create(
  501.       this.dbConfig.DB_NAME,
  502.       this.dbConfig.DB_V,
  503.       this.dbConfig.store
  504.     );
  505.     const result = await func(myDb);
  506.     myDb.closeDB();
  507.     return result;
  508.   }
  509.  
  510.   static async getConf() {
  511.     const res = await this.connnectDB(async (db) => {
  512.       const rrr = db.getOne("bconf");
  513.       return rrr;
  514.     });
  515.     return res;
  516.   }
  517.  
  518.   static async updateConf(conf) {
  519.     const res = await this.connnectDB(async (db) => {
  520.       const rrr = await db.updateOne(conf);
  521.       return rrr;
  522.     });
  523.     return res;
  524.   }
  525.  
  526.   static async updateOne(key, val) {
  527.     const res = await this.connnectDB(async (db) => {
  528.       const config = await this.getConf();
  529.       config[key] = val;
  530.       const rrr = db.updateOne(config);
  531.       return rrr;
  532.     });
  533.     return res;
  534.   }
  535.  
  536.   static async updateSimplifyIdx(val) {
  537.     return await this.updateOne(this.Keys.simplifyIdx, val);
  538.   }
  539.  
  540.   static async updateAutoWideMode(val) {
  541.     return await this.updateOne(this.Keys.autoWideMode, val);
  542.   }
  543.  
  544.   static async updatePlayerHeight(val) {
  545.     return await this.updateOne(this.Keys.playerHeight, val);
  546.   }
  547.  
  548.   static async updateMemoMode(val) {
  549.     return await this.updateOne(this.Keys.memoMode, val);
  550.   }
  551.  
  552.   static async updateImportMode(val) {
  553.     return await this.updateOne(this.Keys.importMode, val);
  554.   }
  555. }
  556. /* =======================================
  557.     配置数据库表   结束
  558. ======================================= */
  559.  
  560. /*=========================================
  561.    哔站昵称功能对IndexedDB 进行的封装  开始
  562. ==========================================*/
  563. class BilibiliMemoDB {
  564.   static dbConfig = {
  565.     DB_NAME: "bilibili_pxo",
  566.     DB_V: MyIndexedDB.getDBVersion() ?? 2,
  567.     store: {
  568.       conf: {
  569.         storeName: "my_friends",
  570.       },
  571.     },
  572.   };
  573.  
  574.   static async connectDB(func) {
  575.     const db = await MyIndexedDB.create(
  576.       this.dbConfig.DB_NAME,
  577.       this.dbConfig.DB_V,
  578.       this.dbConfig.store
  579.     );
  580.     const result = await func(db);
  581.     db.closeDB();
  582.     return result;
  583.   }
  584.  
  585.   static async addOne(uid) {
  586.     const res = await this.connectDB(async (db) => {
  587.       const rrr = await db.addOne(uid);
  588.       return rrr;
  589.     });
  590.     return res;
  591.   }
  592.  
  593.   static async getOne(uid) {
  594.     const res = await this.connectDB(async (db) => {
  595.       const rrr = await db.getOne(uid);
  596.       return rrr;
  597.     });
  598.     return res;
  599.   }
  600.  
  601.   static async queryEq(column, value) {
  602.     const res = await this.connectDB(async (db) => {
  603.       const rrr = await db.queryOneEq(column, value);
  604.       return rrr;
  605.     });
  606.     return res;
  607.   }
  608.  
  609.   static async queryLike(column, value) {
  610.     const res = await this.connectDB(async (db) => {
  611.       const rrr = await db.queryOneLike(column, value);
  612.       return rrr;
  613.     });
  614.     return res;
  615.   }
  616.  
  617.   static async getOneByBid(bid) {
  618.     const res = await this.queryEq("bid", bid);
  619.     return res;
  620.   }
  621.  
  622.   static async getAll() {
  623.     const res = await this.connectDB(async (db) => {
  624.       const rrr = await db.getAllDatas();
  625.       return rrr;
  626.     });
  627.     return res;
  628.   }
  629.  
  630.   static async updateByIdAndMemo(id, memo) {
  631.     const item = await this.getOne(id);
  632.     item.nick_name = memo;
  633.     const res = await this.updateOne(item);
  634.     return res;
  635.   }
  636.  
  637.   static async addOrUpdateMany(datas, ignore_mode = true) {
  638.     for (const data of datas) {
  639.       const _item = await this.getOneByBid(data.bid);
  640.       if (_item) {
  641.         if (!ignore_mode) {
  642.           _item.nick_name = data.nick_name;
  643.           _item.bname = data.bname;
  644.           await this.updateOne(_item);
  645.         }
  646.       } else {
  647.         if (!data.bid) continue;
  648.         else {
  649.           const _itm = {
  650.             bid: data.bid,
  651.             bname: data.bname,
  652.             nick_name: data.nick_name,
  653.           };
  654.           await this.addOne(_itm);
  655.         }
  656.       }
  657.     }
  658.     return 1;
  659.   }
  660.  
  661.   static async updateOne(item) {
  662.     const res = await this.connectDB(async (db) => {
  663.       const rrr = await db.updateOne(item);
  664.       return rrr;
  665.     });
  666.     return res;
  667.   }
  668.  
  669.   static async delByBid(bid) {
  670.     const _item = this.getOneByBid(bid);
  671.     if (_item) {
  672.       return await this.delOne(_item.id);
  673.     } else {
  674.       return false;
  675.     }
  676.   }
  677.  
  678.   static async delOne(id) {
  679.     const res = await this.connectDB(async (db) => {
  680.       const rrr = await db.delOne(id);
  681.       return rrr;
  682.     });
  683.   }
  684. }
  685. /*=========================================
  686.    哔站昵称功能对IndexedDB 进行的封装  结束
  687. ==========================================*/
  688.  
  689. /* =======================================
  690.     所有数据库表初始化   开始
  691. ======================================= */
  692. class DBInit {
  693.   static dbName = "bilibili_pxo";
  694.   static dbV = "1";
  695.   static storeList = [
  696.     {
  697.       name: "B站备注表",
  698.       conf: {
  699.         uniqueIndex: ["bid"],
  700.         normalIndex: ["nick_name"],
  701.         DB_NAME: "bilibili_pxo",
  702.         storeName: "my_friends",
  703.       },
  704.       data: [
  705.       ],
  706.     },
  707.     {
  708.       name: "配置项表",
  709.       conf: {
  710.         DB_NAME: "bilibili_pxo",
  711.         storeName: "conf",
  712.       },
  713.       data: [
  714.         {
  715.           id: "bconf",
  716.           simplifyIdx: false,
  717.           autoWideMode: false,
  718.           playerHeight: 700,
  719.           memoMode: 0,
  720.           importMode: 0,
  721.         },
  722.       ],
  723.     },
  724.   ];
  725.  
  726.   static async initAllDB() {
  727.     for (let idx = 0; idx < this.storeList.length; idx++) {
  728.       const myDb = await MyIndexedDB.create(
  729.         this.dbName,
  730.         idx * 1 + 1,
  731.         this.storeList[idx]
  732.       );
  733.       MyIndexedDB.setDBVersion(idx * 1 + 1);
  734.       setTimeout(() => {
  735.         myDb.closeDB();
  736.       }, 100);
  737.     }
  738.   }
  739. }
  740. /* =======================================
  741.     所有数据库表初始化   结束
  742. ======================================= */
  743.  
  744. /* =======================================
  745.     菜单UI部分   结束
  746. ======================================= */
  747. class BMenu {
  748.   static menuStyle = `
  749.   @media (max-width: 1190px){
  750.     div#pxoxq-b-menu .pxoxq-menu-wrap{
  751.       display: block;
  752.       overflow-y: scroll;
  753.       scrollbar-width: thin;
  754.       height: 340px;
  755.     }
  756.     #pxoxq-b-menu .pxoxq-menu-wrap::-webkit-scrollbar{
  757.       width: 5px;
  758.     }
  759.     #pxoxq-b-menu .pxoxq-menu-wrap::-webkit-scrollbar-thumb{
  760.       background-color: #FC6296;
  761.       border-radius: 6px;
  762.     }
  763.   }
  764.  
  765.   /* 菜单最外层 */
  766.   #pxoxq-b-menu{
  767.     text-align: initial;
  768.     font-size: 15px;
  769.     z-index: 999;
  770.     position: fixed;
  771.     left: 0;
  772.     right: 0;
  773.     bottom: 0px;
  774.     height: 340px;
  775.     padding: 8px 10px;
  776.     background-color: white;
  777.     transition: all .24s linear;
  778.     border-top: 1px solid #c3c3c3;
  779.   }
  780.   #pxoxq-b-menu.pxoxq-hide{
  781.     padding: unset;
  782.     height: 0;
  783.   }
  784.   #pxoxq-b-menu button{
  785.     background-color: #FC6296;
  786.     border: 1px solid white;
  787.     color: white;
  788.     font-size: 13px;
  789.     padding: 1px 6px;
  790.     border-radius: 5px;
  791.   }
  792.   #pxoxq-b-menu button:hover{
  793.     border: 1px solid #c5c5c5;
  794.   }
  795.   #pxoxq-b-menu button:active{
  796.     opacity: .7;
  797.   }
  798.   #pxoxq-b-menu .pxoxq-tag{
  799.     position: absolute;
  800.     width: 24px;
  801.     text-align: center;
  802.     color: white;
  803.     padding: 0px 6px;
  804.     left: 2px;
  805.     top: -21px;
  806.     background-color: #FC6296;
  807.     border-radius: 4px 4px 0 0;
  808.     user-select: none;
  809.     transition: all .3s linear;
  810.   }
  811.   
  812.   #pxoxq-b-menu .pxoxq-tag:hover{
  813.     letter-spacing: 3px;
  814.   }
  815.   #pxoxq-b-menu .pxoxq-tag:active{
  816.     opacity: .5;
  817.   }
  818.   #pxoxq-b-menu .pxoxq-menu-wrap{
  819.     display: flex;
  820.   }
  821.   #pxoxq-b-menu .pxoxq-menu-col {
  822.     height: 340px;
  823.     min-height: 340px;
  824.     overflow-y: scroll;
  825.     scrollbar-width: thin;
  826.   }
  827.   #pxoxq-b-menu .pxoxq-menu-col::-webkit-scrollbar{
  828.     width: 5px;
  829.   }
  830.   #pxoxq-b-menu .pxoxq-menu-col::-webkit-scrollbar-thumb{
  831.     background-color: #FC6296;
  832.     border-radius: 6px;
  833.   }
  834.   #pxoxq-b-menu .pxoxq-menu-wrap .pxoxq-setting-wrap{
  835.     flex-grow: 1;
  836.   }
  837.   #pxoxq-b-menu .setting-row:not(.import-row) {
  838.     padding: 4px 0;
  839.     display: flex;
  840.     gap: 3px;
  841.   }
  842.   #pxoxq-b-menu .setting-row .pxoxq-label{
  843.     font-weight: 600;
  844.     color: rgb(100, 100, 100);
  845.   }
  846.   #pxoxq-b-menu .pxoxq-setting-wrap .setting-box{
  847.     display: flex;
  848.     gap: 22px;
  849.   }
  850.   #pxoxq-b-menu .setting-row .pxoxq-inline-label{
  851.     display: inline-block;
  852.     margin-right: 20px;
  853.   }
  854.   #pxoxq-player-h{
  855.     width: 300px;
  856.   }
  857.   #pxoxq-b-menu .setting-row.memo-mode-row{
  858.     display: flex;
  859.     padding-bottom: 10px;
  860.   }
  861.   #pxoxq-b-menu .setting-item-import{
  862.     display: flex;
  863.     margin-bottom: 10px;
  864.   }
  865.   #pxoxq-b-menu .frd-import-btn{
  866.     margin-left: 40px;
  867.   }
  868.   /* 右边部分 */
  869.   #pxoxq-b-menu .pxoxq-menu-wrap .pxoxq-frd-wrap{
  870.     border-left: 1px solid #d1d1d1;
  871.     padding-left: 10px;
  872.   }
  873.   #pxoxq-b-menu .pxoxq-right-header{
  874.     display: flex;
  875.     padding-bottom: 6px;
  876.     margin-bottom: 5px;
  877.     border-bottom: 1px dotted #b2b2b2;
  878.   }
  879.   #pxoxq-b-menu .pxoxq-right-header .pxoxq-right-title{
  880.     font-size: 18px;
  881.     flex-grow: 1;
  882.     text-align: center;
  883.     font-weight: 600;
  884.     color: #4b4b4b;
  885.   }
  886.   /* 右边表格部分 */
  887.   #pxoxq-b-menu .pxoxq-frd-tab{
  888.     white-space: nowrap;
  889.     height: 340px;
  890.   }
  891.   #pxoxq-b-menu .pxoxq-frd-tab .pxoxq-tbody{
  892.     height: 280px;
  893.     overflow-y: scroll;
  894.     scrollbar-width: thin;
  895.   }
  896.   #pxoxq-b-menu .pxoxq-frd-tab .pxoxq-tbody::-webkit-scrollbar{
  897.     width: 4px;
  898.   }
  899.   #pxoxq-b-menu .pxoxq-frd-tab .pxoxq-tbody::-webkit-scrollbar-thumb{
  900.     background-color: #FC6296;
  901.     border-radius: 5px;
  902.   }
  903.   #pxoxq-b-menu .pxoxq-frd-tab .pxoxq-thead{
  904.     font-weight: 600;
  905.   }
  906.   #pxoxq-b-menu .pxoxq-frd-tab .pxoxq-tr{
  907.     border-bottom: 1px solid #dadada;
  908.     /* text-align: center; */
  909.   }
  910.   #pxoxq-b-menu .pxoxq-frd-tab .pxoxq-tr .pxoxq-cell{
  911.     display: inline-block;
  912.     text-align: center;
  913.     font-size: 14px;
  914.     padding: 2px 3px;
  915.   }
  916.   #pxoxq-b-menu .pxoxq-frd-tab .pxoxq-col-1{
  917.     width: 30px;
  918.   }
  919.   #pxoxq-b-menu .pxoxq-frd-tab .pxoxq-col-2{
  920.     width: 120px;
  921.   }
  922.   #pxoxq-b-menu .pxoxq-frd-tab .pxoxq-col-3{
  923.     width: 120px;
  924.   }
  925.   #pxoxq-b-menu .pxoxq-frd-tab .pxoxq-col-4{
  926.     width: 180px;
  927.   }
  928.   #pxoxq-b-menu .pxoxq-frd-tab .pxoxq-col-5{
  929.     width: 100px;
  930.   }
  931.   #pxoxq-b-menu .pxoxq-frd-tab .pxoxq-memo-ipt{
  932.     outline: none;
  933.     border: unset;
  934.     text-align: center;
  935.     padding: 2px 3px;
  936.   }
  937.   #pxoxq-b-menu .pxoxq-frd-tab .pxoxq-memo-ipt.active{
  938.     border-bottom: 1px solid #ffb3e3;
  939.     color:#FC6296;
  940.   }
  941. `;
  942.  
  943.   static wrapId = "pxoxq-b-menu";
  944.  
  945.   static saveDelay = 200;
  946.  
  947.   static importJson = "";
  948.  
  949.   static init() {
  950.     this.injectMemuHtml();
  951.     this.injectStyle();
  952.   }
  953.  
  954.   static injectMemuHtml() {
  955.     // 参数初始化
  956.     const wrap = $("#pxoxq-b-menu");
  957.     ConfigDB.getConf().then(async (_conf) => {
  958.       const friendTab = await this.genFriendTab();
  959.       const leftMenu = `
  960. <h3>备注模块设置</h3>
  961. <div class="setting-row memo-mode-row">
  962.   <div class="pxoxq-label pxoxq-inline-label">备注显示模式</div>
  963.   <div class="pxoxq-radio-item">
  964.     <input class="pxoxq-memo-mode" ${
  965.       _conf.memoMode == 0 ? "checked" : ""
  966.     } value="0" type="radio" name="memo-mode" id="nope">
  967.     <label for="nope">关闭备注功能</label>
  968.   </div>
  969.   <div class="pxoxq-radio-item">
  970.     <input class="pxoxq-memo-mode" ${
  971.       _conf.memoMode == 1 ? "checked" : ""
  972.     } value="1" type="radio" name="memo-mode" id="nick-first">
  973.     <label for="nick-first">昵称（备注）</label>
  974.   </div>
  975.   <div class="pxoxq-radio-item">
  976.     <input class="pxoxq-memo-mode" ${
  977.       _conf.memoMode == 2 ? "checked" : ""
  978.     } value="2" type="radio" name="memo-mode" id="memo-first">
  979.     <label for="memo-first">备注（昵称）</label>
  980.   </div>
  981.   <div class="pxoxq-radio-item">
  982.     <input class="pxoxq-memo-mode" ${
  983.       _conf.memoMode == 3 ? "checked" : ""
  984.     } value="3" type="radio" name="memo-mode" id="just-memo">
  985.     <label for="just-memo">备注</label>
  986.   </div>
  987. </div>
  988. <div class="setting-row import-row">
  989.   <div class="pxoxq-setting-item setting-item-import">
  990.     <div class="pxoxq-label pxoxq-inline-label">导入数据</div>
  991.     <input class="pxoxq-import-mode" ${
  992.       _conf.importMode == 0 ? "checked" : ""
  993.     } id="ignore-same" value="0" type="radio" checked name="import-mode">
  994.     <label for="ignore-same">跳过重复项</label>
  995.     <input class="pxoxq-import-mode" ${
  996.       _conf.importMode == 1 ? "checked" : ""
  997.     } id="update-same" value="1" type="radio" name="import-mode">
  998.     <label for="update-same">覆盖重复项</label>
  999.     <button class="frd-import-btn" type="button">导入</button>
  1000.   </div>
  1001.   <div class="pxoxq-setting-item">
  1002.     <textarea placeholder="请输入数据..." name="pxoxq-frd-json" id="pxoxq-frd-json" cols="80" rows="10"></textarea>
  1003.   </div>
  1004. </div>
  1005.       `;
  1006.       if (wrap && wrap.length > 0) {
  1007.         this.flushConfTab();
  1008.         this.flushFrdTab();
  1009.       } else {
  1010.         const _html = `
  1011.         <div id="pxoxq-b-menu" class="pxoxq-hide">
  1012.         <div class="pxoxq-tag">:)</div>
  1013.         <div class="pxoxq-menu-wrap">
  1014.           <div class="pxoxq-menu-col pxoxq-setting-wrap">
  1015.             ${leftMenu}
  1016.           </div>
  1017.   
  1018.           <div class="pxoxq-frd-wrap">
  1019.             <div class="pxoxq-right-header">
  1020.               <div class="pxoxq-right-title">昵称数据</div>
  1021.               <button class="pxoxq-export-frd-btn" type="button">导出当前数据</button>
  1022.             </div>
  1023.             <div class="pxoxq-tab-wrap">
  1024.               <div class="pxoxq-frd-tab">
  1025.                 <div class="pxoxq-tr pxoxq-thead">
  1026.                     <div class="pxoxq-cell pxoxq-col-1">ID</div>
  1027.                     <div class="pxoxq-cell pxoxq-col-2">BilibiliID</div>
  1028.                     <div class="pxoxq-cell pxoxq-col-3">昵称</div>
  1029.                     <div class="pxoxq-cell pxoxq-col-4">备注</div>
  1030.                     <div class="pxoxq-cell pxoxq-col-5">操作</div>
  1031.                 </div>
  1032.                 <div class="pxoxq-tbody">
  1033.                   ${friendTab}
  1034.                 </div>
  1035.               </div>
  1036.               </div>
  1037.             </div>
  1038.           </div>
  1039.         </div>
  1040.         `;
  1041.         $("body").append(_html);
  1042.         this.addListener();
  1043.       }
  1044.     });
  1045.   }
  1046.  
  1047.   static async genFriendTab() {
  1048.     const friends = await BilibiliMemoDB.getAll();
  1049.     let _html = "";
  1050.  
  1051.     for (const friend of friends) {
  1052.       _html += `
  1053. <div class="pxoxq-tr pxoxq-frd-row pxoxq-frd-${friend.id}">
  1054.   <div class="pxoxq-cell pxoxq-col-1">${friend.id}</div>
  1055.   <div class="pxoxq-cell pxoxq-col-2" title="${friend.bid}">${friend.bid}</div>
  1056.   <div class="pxoxq-cell pxoxq-col-3">${friend.bname}</div>
  1057.   <div class="pxoxq-cell pxoxq-col-4">
  1058.     <input class="pxoxq-memo-ipt pxoxq-memo-ipt-${friend.id}" data-id="${friend.id}"  type="text" value="${friend.nick_name}" readonly>
  1059.   </div>
  1060.   <div class="pxoxq-cell pxoxq-col-5">
  1061.     <button class="pxoxq-memo-edit-btn  pxoxq-memo-edit-btn-${friend.id}" data-id="${friend.id}" type="button">编辑</button>
  1062.     <button class="pxoxq-memo-del-btn" data-id="${friend.id}" type="button">删除</button>
  1063.   </div>
  1064. </div>
  1065.       `;
  1066.     }
  1067.     return _html;
  1068.   }
  1069.  
  1070.   static flushFrdTab() {
  1071.     this.genFriendTab().then((_tabHtml) => {
  1072.       $("#pxoxq-b-menu .pxoxq-frd-tab .pxoxq-tbody").html(_tabHtml);
  1073.     });
  1074.   }
  1075.  
  1076.   static flushConfTab() {
  1077.     ConfigDB.getConf().then((_conf) => {
  1078.       const mmRadios = $(".pxoxq-memo-mode");
  1079.       for (const item of mmRadios) {
  1080.         if (item.value == _conf.memoMode) {
  1081.           item.checked = true;
  1082.         } else {
  1083.           item.checked = false;
  1084.         }
  1085.       }
  1086.       const modeRadios = $(".pxoxq-import-mode");
  1087.       for (const item of modeRadios) {
  1088.         if (item.value == _conf.memoMode) {
  1089.           item.checked = true;
  1090.         } else {
  1091.           item.checked = false;
  1092.         }
  1093.       }
  1094.     });
  1095.   }
  1096.  
  1097.   static injectStyle() {
  1098.     GM_addStyle(this.menuStyle);
  1099.   }
  1100.  
  1101.   static addListener() {
  1102.     const wrapIdSelector = `#${this.wrapId}`;
  1103.  
  1104.     // 面板展开、折叠
  1105.     $("body").on(
  1106.       "click",
  1107.       wrapIdSelector + " .pxoxq-tag",
  1108.       pxoDebounce(this.toggleMenuHandler, this.saveDelay)
  1109.     );
  1110.  
  1111.     // 备注模式选框
  1112.     $("body").on(
  1113.       "click",
  1114.       ".pxoxq-memo-mode",
  1115.       pxoDebounce(this.memoModeHandler, this.saveDelay)
  1116.     );
  1117.  
  1118.     // 导入数据模式
  1119.     $("body").on(
  1120.       "click",
  1121.       ".pxoxq-import-mode",
  1122.       pxoDebounce(this.importModeHandler, this.saveDelay)
  1123.     );
  1124.  
  1125.     // 导入数据
  1126.     $("body").on("click", ".frd-import-btn", this.importFriendHandler);
  1127.  
  1128.     // 导出数据
  1129.     $("body").on(
  1130.       "click",
  1131.       ".pxoxq-export-frd-btn",
  1132.       pxoDebounce(this.exportFrdHandler, this.saveDelay * 2)
  1133.     );
  1134.  
  1135.     // 双击比编辑
  1136.     $("body").on("dblclick", "input.pxoxq-memo-ipt", this.editMemoHandler);
  1137.  
  1138.     // 编辑按钮编辑
  1139.     $("body").on(
  1140.       "click",
  1141.       ".pxoxq-memo-edit-btn",
  1142.       pxoDebounce(this.editMemoHandler, this.saveDelay)
  1143.     );
  1144.  
  1145.     // 保存昵称（更新
  1146.     $("body").on(
  1147.       "click",
  1148.       ".pxoxq-memo-save-btn",
  1149.       pxoDebounce(this.updateMemoHandler, this.saveDelay)
  1150.     );
  1151.  
  1152.     // 删除备注
  1153.     $("body").on(
  1154.       "click",
  1155.       ".pxoxq-memo-del-btn",
  1156.       pxoDebounce(this.delMemoHandler, this.saveDelay)
  1157.     );
  1158.   }
  1159.  
  1160.   // 折叠、打开面板
  1161.   static toggleMenuHandler() {
  1162.     $("#pxoxq-b-menu").toggleClass("pxoxq-hide");
  1163.     // 刷新面板数据
  1164.     if (
  1165.       document
  1166.         .getElementById("pxoxq-b-menu")
  1167.         .classList.value.indexOf("pxoxq-hide") < 0
  1168.     ) {
  1169.       BMenu.flushConfTab();
  1170.       BMenu.flushFrdTab();
  1171.     } else {
  1172.     }
  1173.   }
  1174.  
  1175.   static delMemoHandler() {
  1176.     const id = parseInt(this.dataset.id);
  1177.     const memo = $(".pxoxq-memo-ipt-" + id).val();
  1178.     if (confirm(`是否要删除备注【${memo}】？`)) {
  1179.       BilibiliMemoDB.delOne(id);
  1180.       $(".pxoxq-frd-tab .pxoxq-frd-" + id).remove();
  1181.     }
  1182.   }
  1183.  
  1184.   static updateMemoHandler() {
  1185.     const id = this.dataset.id;
  1186.     let editBtn = $(".pxoxq-memo-edit-btn-" + id);
  1187.     const memoInput = $(".pxoxq-memo-ipt-" + id);
  1188.     // 都需编辑按钮复原
  1189.     $(editBtn).text("编辑");
  1190.     $(editBtn).removeClass("pxoxq-memo-save-btn");
  1191.     memoInput[0].readOnly = true;
  1192.     $(memoInput).removeClass("active");
  1193.     const val = memoInput[0].value;
  1194.     BilibiliMemoDB.updateByIdAndMemo(parseInt(id), val);
  1195.   }
  1196.  
  1197.   static editMemoHandler() {
  1198.     const id = this.dataset.id;
  1199.     // pxoxq-memo-ipt-2
  1200.     let editBtn = $(".pxoxq-memo-edit-btn-" + id);
  1201.     const memoInput = $(".pxoxq-memo-ipt-" + id);
  1202.     if (!memoInput[0].readOnly) {
  1203.       return;
  1204.     }
  1205.  
  1206.     // 都需要给编辑按钮变个东西
  1207.     $(editBtn).text("保存");
  1208.     $(editBtn).addClass("pxoxq-memo-save-btn");
  1209.  
  1210.     memoInput[0].readOnly = false;
  1211.     $(memoInput).addClass("active");
  1212.   }
  1213.  
  1214.   // 导出数据
  1215.   static exportFrdHandler() {
  1216.     BilibiliMemoDB.getAll().then((_datas) => {
  1217.       const json_str = JSON.stringify(_datas);
  1218.       const dataURI =
  1219.         "data:text/plain;charset=utf-8," + encodeURIComponent(json_str);
  1220.       const link = document.createElement("a");
  1221.       link.href = dataURI;
  1222.       link.download = `${DateUtils.getCurrDateTimeStr()}.txt`;
  1223.       link.click();
  1224.     });
  1225.   }
  1226.  
  1227.   // 导入数据
  1228.   static importFriendHandler() {
  1229.     const textNode = $("#pxoxq-frd-json");
  1230.     const val = $(textNode).val();
  1231.     if (!/\S+/.test(val)) return;
  1232.     ConfigDB.getConf().then(async (_conf) => {
  1233.       try {
  1234.         const datas = JSON.parse(val);
  1235.         if (Array.isArray(datas)) {
  1236.           const ignore_mode = _conf.importMode == 1 ? false : true;
  1237.           await BilibiliMemoDB.addOrUpdateMany(datas, ignore_mode);
  1238.           BMenu.flushFrdTab();
  1239.           alert("导入成功");
  1240.         } else {
  1241.           throw Error("数据格式错误！");
  1242.         }
  1243.       } catch (e) {
  1244.         alert("导入失败：" + e);
  1245.       }
  1246.     });
  1247.   }
  1248.  
  1249.   static importModeHandler() {
  1250.     ConfigDB.updateImportMode(this.value);
  1251.   }
  1252.  
  1253.   static memoModeHandler() {
  1254.     MemoGlobalConf.mode = this.value;
  1255.     ConfigDB.updateMemoMode(this.value);
  1256.   }
  1257. }
  1258. /* =======================================
  1259.     菜单UI部分   结束
  1260. ======================================= */
  1261.  
  1262. /*............................................................................................
  1263.  Memo部分 开始
  1264. ............................................................................................*/
  1265. /* =============================================
  1266.    一些配置参数   开始
  1267. =============================================*/
  1268. const memoClassPrefix = "pxo-memo";
  1269. const MemoGlobalConf = {
  1270.   mode: 1, // 【模式】 0：昵称替换成备注； 1：昵称(备注)； 2：(备注)昵称
  1271.   myFriends: [], // 好友信息列表
  1272.   memoClassPrefix,
  1273.   fansInputBlurDelay: 280, // 输入框防抖延迟
  1274.   fansInputBlurTimer: "",
  1275.   fansLoopTimer: "",
  1276.   memoStyle: `
  1277.   .content .be-pager li{
  1278.     z-index: 999;
  1279.     position: relative;
  1280.   }
  1281.   .pxo-frd{    
  1282.     color: #3fb9ffd4;
  1283.     font-weight:600;
  1284.     letter-spacing: 2px;
  1285.     border: 1px solid #ff88a973;
  1286.     border-radius: 6px;
  1287.     background: #ffa9c1a4;
  1288.     margin-top:-2px;
  1289.     padding: 2px 5px;}
  1290.   .h #h-name {
  1291.     background: #ffffffbd;
  1292.     padding: 5px 10px;
  1293.     border-radius: 6px;
  1294.     letter-spacing: 3px;
  1295.     line-height: 22px;
  1296.     font-size: 20px;
  1297.     box-shadow: 1px 1px 2px 2px #ffffff40;
  1298.     border: 1px solid #fff;
  1299.     color: #e87b99;
  1300.     overflow: hidden;
  1301.     transition:all .53s linear;
  1302.   }
  1303.   .h #h-name.hide{
  1304.     width:0px;
  1305.     padding:0px;
  1306.     height:0px;
  1307.     border:none;
  1308.   }
  1309.   .h .homepage-memo-input{
  1310.     border: none;
  1311.     outline:none;
  1312.     overflow:hidden;
  1313.     padding: 5px 6px;
  1314.     border-bottom:2px solid #ff0808;
  1315.     width: 230px;
  1316.     font-size: 17px;
  1317.     line-height: 22px;
  1318.     vertical-align: middle;
  1319.     background: #ffffffbd;;
  1320.     color: #f74979;
  1321.     font-weight:600;
  1322.     margin-right: 8px;
  1323.     transition:all .53s linear;
  1324.     border-radius: 5px 5px 0 0;
  1325.   }
  1326.   .h .homepage-memo-input.hide{
  1327.     width: 0px;
  1328.     padding: 0;
  1329.     border:none;
  1330.  
  1331.   }
  1332.   .${memoClassPrefix}-setting-box{
  1333.     display: inline-block;
  1334.     vertical-align:top;
  1335.     margin-top:-2px;
  1336.     line-height:20px;
  1337.     margin-left:18px;
  1338.   }
  1339.   .${memoClassPrefix}-setting-box div.btn{
  1340.     padding:2px 5px;
  1341.     user-select:none;
  1342.     display:inline-block;
  1343.     overflow: hidden;
  1344.     letter-spacing:2px;
  1345.     background:#e87b99cc;
  1346.     border:none;
  1347.     border-radius:5px;
  1348.     color:white;
  1349.     margin:0 3px;
  1350.     transition:all .53s linear;
  1351.   }
  1352.   .${memoClassPrefix}-setting-box div.btn.hide{
  1353.     height: 0px;
  1354.     width: 0px;
  1355.     opacity: 0.2;
  1356.     padding:0px;
  1357.   }
  1358.   .${memoClassPrefix}-setting-box div.btn:hover{
  1359.     box-shadow: 1px 1px 2px 1px #80808024;
  1360.     outline: .5px solid #e87b99fc;
  1361.  
  1362.   }
  1363.   .${memoClassPrefix}-setting-box input{
  1364.     border: none;
  1365.     outline:none;
  1366.     overflow:hidden;
  1367.     padding: 2px 3px;
  1368.     border-bottom:1px solid #c0c0c0;
  1369.     width: 190px;
  1370.     font-size: 16px;
  1371.     line-height: 18px;
  1372.     color: #ff739a;
  1373.     font-weight:600;
  1374.     vertical-align:top;
  1375.     transition:all .25s linear;
  1376.   }
  1377.   .${memoClassPrefix}-setting-box input.hide{
  1378.     width:0px;
  1379.     padding:0px;
  1380.   }
  1381.   `,
  1382. };
  1383. /* =============================================
  1384.    一些配置参数   结束
  1385. =============================================*/
  1386.  
  1387. /* =============================================
  1388.    定制日志输出   开始
  1389. =============================================*/
  1390. class MyLog {
  1391.   static prefix = "[BilibiliMemo]";
  1392.  
  1393.   static genMsg(msg, type = "") {
  1394.     return `${this.prefix} ${type}: ${msg}`;
  1395.   }
  1396.  
  1397.   static error(msg) {
  1398.     console.error(this.genMsg(msg, "error"));
  1399.   }
  1400.  
  1401.   static warn(msg) {
  1402.     console.warn(this.genMsg(msg, "warn"));
  1403.   }
  1404.  
  1405.   static success(msg) {
  1406.     console.info(this.genMsg(msg, "success"));
  1407.   }
  1408.   static log(msg, ...arg) {
  1409.     console.log(this.genMsg(msg), ...arg);
  1410.   }
  1411. }
  1412. /* =============================================
  1413.    定制日志输出   结束
  1414. =============================================*/
  1415.  
  1416. /* =============================================
  1417.    html 注入部分   开始
  1418. =============================================*/
  1419. class BilibiliMemoInjectoin {
  1420.   // 个人主页 替换 以及初始化
  1421.   static async injectUserHome(bid) {
  1422.     const user = await this.getUserInfoByBid(bid);
  1423.     elmGetter.get('#h-name').then(uname => {
  1424.       if(!uname) return
  1425.       let nickName = uname.innerHTML;
  1426.       if(user){
  1427.         $(uname).html(this.getNameStr(nickName, user.nick_name));
  1428.         $(uname).attr("data-id", user.id);
  1429.       }
  1430.       $(uname).attr("data-bid", bid);
  1431.       $(uname).attr("data-bname", nickName);
  1432.       // 添加备注模块
  1433.       const inputNode = `<input data-bname="${nickName}" data-bid="${bid}" class='${MemoGlobalConf.memoClassPrefix}-input hide homepage-memo-input'/>`
  1434.       $(uname).after(inputNode)
  1435.     })
  1436.   }
  1437.   // 个人主页 替换 更新
  1438.   static injectOneHomePage(user) {
  1439.     if (user) {
  1440.       const nickName = $(".h #h-name").attr("data-bname");
  1441.       $("#h-name").html(this.getNameStr(nickName, user.nick_name));
  1442.       $("#h-name").attr("data-id", user.id);
  1443.     }
  1444.   }
  1445.  
  1446.   // 个人关注、粉丝页替换 以及初始化
  1447.   static injectFanList() {
  1448.     elmGetter.each(".relation-list > li > div.content > a", async (user) => {
  1449.       try {
  1450.         let url = user.href;
  1451.         let uid = url.split("/")[3];
  1452.         const cPrefix = MemoGlobalConf.memoClassPrefix;
  1453.         if (!$(user.children).attr("data-bid")) {
  1454.           const userInfo = await this.getUserInfoByBid(uid);
  1455.           let nickName = $(user.children).html();
  1456.           $(user.children).attr("data-bname", nickName);
  1457.           $(user.children).attr("data-bid", uid);
  1458.           if (userInfo) {
  1459.             $(user.children).html(this.getNameStr(nickName, userInfo.nick_name));
  1460.             $(user.children).attr("data-id", userInfo.id);
  1461.             $(user).addClass("pxo-frd");
  1462.             $(user).addClass("pxo-frd-" + uid);
  1463.           }
  1464.           // 注入备注模块代码
  1465.           const memoBlock = `<div class='${cPrefix}-setting-${uid} ${cPrefix}-setting-box'>
  1466.             <input data-bname="${nickName}" data-bid='${uid}' class='${cPrefix}-input-${uid} hide'/>
  1467.             <div data-bid='${uid}' class='${cPrefix}-btn-bz btn bz-btn-${uid}'>备注</div>
  1468.             <div data-bid='${uid}' class='${cPrefix}-btn-cfm op-btn-${uid} btn cfm-btn-${uid} hide'>确认</div>
  1469.             <div data-bid='${uid}' class='${cPrefix}-btn-cancel op-btn-${uid} btn cancel-btn-${uid} hide'>取消</div>
  1470.             <div data-bid='${uid}' class='${cPrefix}-btn-del op-btn-${uid} btn del-btn-${uid} hide'>清除备注</div>
  1471.             </div>`;
  1472.           $(user).after(memoBlock);
  1473.         }
  1474.       } catch (e) {
  1475.         MyLog.error(e);
  1476.       }
  1477.     });
  1478.   }
  1479.  
  1480.   // 个人关注、粉丝页替换 单个
  1481.   static injectOneFans(user, userANode) {
  1482.     if (user && userANode) {
  1483.       const nickName = $(userANode.children).attr("data-bname");
  1484.       $(userANode.children).html(this.getNameStr(nickName, user.nick_name));
  1485.       $(userANode.children).attr("data-id", user.id);
  1486.       $(userANode).addClass("pxo-frd");
  1487.       $(userANode).addClass("pxo-frd-" + user.bid);
  1488.     }
  1489.   }
  1490.  
  1491.   static replaceMemo(uri) {
  1492.     /*
  1493.     uri 一共有几种形式：
  1494.     https://space.bilibili.com/28563843/fans/follow
  1495.     https://space.bilibili.com/28563843/fans/follow?tagid=-1
  1496.     https://space.bilibili.com/28563843/fans/fans
  1497.     https://space.bilibili.com/472118057/?spm_id_from=333.999.0.0
  1498.     
  1499.     1、换页是页内刷新，需要给页码搞个点击事件
  1500.     2、个人页形式跟其他不太一样
  1501.     */
  1502.     const uType = this.judgeUri(uri);
  1503.     // MyLog.success(`类型是：[${uType}]  ${uri}`);
  1504.     switch (uType) {
  1505.       case "-1":
  1506.         MyLog.warn("Uri获取失败");
  1507.         break;
  1508.       case "+1": //粉丝关注
  1509.         BilibiliMemoInjectoin.injectFanList();
  1510.         break;
  1511.       default: // 个人主页
  1512.         BilibiliMemoInjectoin.injectUserHome(uType);
  1513.     }
  1514.   }
  1515.  
  1516.   static judgeUri(uri) {
  1517.     /*
  1518.     -1    uri为空
  1519.     +x    +1：粉丝、关注 | +* 后续
  1520.     xxxx  纯数字，个人主页
  1521.     */
  1522.     if (!uri) return "-1";
  1523.  
  1524.     const uri_parts = uri.split("/"); // 0-https 1-'' 2-host 3-bid 4-fans/query 5-fans/follow
  1525.     // 这是 space 域下的处理，之后可能扩展到其他更多页面模块
  1526.     if (uri_parts[2] && "space.bilibili.com" == uri_parts[2]) {
  1527.       // 粉丝、关注列表 【归一类，处理方式一样】
  1528.       if (
  1529.         uri_parts.length > 4 &&
  1530.         uri_parts[4] == "fans" &&
  1531.         /(?=fans)|(?=follow)/.test(uri_parts[5])
  1532.       ) {
  1533.         return "+1";
  1534.       }
  1535.       // 个人主页
  1536.       else {
  1537.         return uri_parts[3].split("?")[0];
  1538.       }
  1539.     }
  1540.     return "-1";
  1541.   }
  1542.  
  1543.   // 根据bid获取用户信息 直接从数据库取吧
  1544.   static async getUserInfoByBid(bid) {
  1545.     const res = await BilibiliMemoDB.getOneByBid(bid);
  1546.     return res;
  1547.   }
  1548.  
  1549.   // 根据昵称、备注获取最终显示名
  1550.   static getNameStr(nickName, remark) {
  1551.     // span 标签用于判断是否已经替换过
  1552.     if (nickName.indexOf("<span>") > 0) {
  1553.       return nickName;
  1554.     }
  1555.     let res = "";
  1556.     if (MemoGlobalConf.mode == 1) {
  1557.       res = remark;
  1558.     } else if (MemoGlobalConf.mode == 2) {
  1559.       res = nickName + `(${remark})`;
  1560.     } else if (MemoGlobalConf.mode == 3) {
  1561.       res = remark + `(${nickName})`;
  1562.     }
  1563.     return res + "<span>";
  1564.   }
  1565.  
  1566.   // 注入css样式到头部
  1567.   static injectCSS(css) {
  1568.     GM_addStyle(css);
  1569.   }
  1570. }
  1571. /* =============================================
  1572.    html 注入部分   结束
  1573. =============================================*/
  1574.  
  1575. /* =============================================
  1576.    通用函数部分   开始
  1577. =============================================*/
  1578. class BMemoUtils {
  1579.   // 关注、粉丝列表页 备注编辑模块 编辑模式 / 正常模式
  1580.   static toggleMemoBox(bid, editMode = true) {
  1581.     if (editMode) {
  1582.       $(`.btn.op-btn-${bid}`).removeClass("hide");
  1583.       $(`.${MemoGlobalConf.memoClassPrefix}-input-${bid}`).removeClass("hide");
  1584.       $(`.btn.bz-btn-${bid}`).addClass("hide");
  1585.     } else {
  1586.       $(`.btn.op-btn-${bid}`).addClass("hide");
  1587.       $(`.${MemoGlobalConf.memoClassPrefix}-input-${bid}`).addClass("hide");
  1588.       $(`.btn.bz-btn-${bid}`).removeClass("hide");
  1589.     }
  1590.   }
  1591.  
  1592.   // 个人主页 编辑模式 / 正常模式
  1593.   static toggleUserHomeEditMode(editMode = true) {
  1594.     if (editMode) {
  1595.       $(".h #h-name").addClass("hide");
  1596.       $(".homepage-memo-input").removeClass("hide");
  1597.     } else {
  1598.       $(".h #h-name").removeClass("hide");
  1599.       $(".homepage-memo-input").addClass("hide");
  1600.     }
  1601.   }
  1602.  
  1603.   // 个人空间主页 编辑模式初始化
  1604.   static homePageEditModeHandler(bid) {
  1605.     this.toggleUserHomeEditMode();
  1606.     const inputNode = $(".homepage-memo-input")[0];
  1607.     const bName = $(inputNode).attr("data-bname");
  1608.     $(inputNode).focus();
  1609.     BilibiliMemoDB.getOneByBid(bid).then((user) => {
  1610.       if (user) {
  1611.         $(inputNode).val(user.nick_name);
  1612.       } else {
  1613.         $(inputNode).val(bName);
  1614.       }
  1615.     });
  1616.   }
  1617.  
  1618.   // 个人空间主页 编辑确认
  1619.   static homePageSetMemoHandler(bid) {
  1620.     const inputNode = $(".homepage-memo-input")[0];
  1621.     const bName = $(inputNode).attr("data-bname");
  1622.     const val = $(inputNode).val();
  1623.     const val_reg = /\S.*\S/;
  1624.     if (val && val_reg.test(val)) {
  1625.       const memo = val_reg.exec(val)[0];
  1626.       BilibiliMemoDB.getOneByBid(bid).then(async (user) => {
  1627.         if (user) {
  1628.           if (memo != user.nick_name) {
  1629.             user.nick_name = memo;
  1630.             user.bname = bName;
  1631.             await BilibiliMemoDB.updateOne(user);
  1632.             BilibiliMemoInjectoin.injectOneHomePage(user);
  1633.           }
  1634.           this.toggleUserHomeEditMode(false);
  1635.         } else {
  1636.           if (memo != bName) {
  1637.             user = {
  1638.               bid,
  1639.               nick_name: memo,
  1640.               bname: bName,
  1641.             };
  1642.             await BilibiliMemoDB.addOne(user);
  1643.             user = await BilibiliMemoDB.getOneByBid(bid);
  1644.             BilibiliMemoInjectoin.injectOneHomePage(user);
  1645.           }
  1646.           this.toggleUserHomeEditMode(false);
  1647.         }
  1648.       });
  1649.     }
  1650.   }
  1651.  
  1652.   // 删除备注
  1653.   static delMemoHandler(bid) {
  1654.     BilibiliMemoDB.getOneByBid(bid).then(async (_item) => {
  1655.       if (_item) {
  1656.         if (confirm(`是否删除备注【${_item.nick_name}】?`)) {
  1657.           await BilibiliMemoDB.delOne(_item.id);
  1658.           $("a.pxo-frd-" + bid).removeClass("pxo-frd");
  1659.           const nameSpan = $("a.pxo-frd-" + bid + " span.fans-name");
  1660.           $(nameSpan).text(nameSpan[0].dataset.bname);
  1661.         }
  1662.       }
  1663.     });
  1664.   }
  1665.  
  1666.   // 粉丝、关注页 编辑模式初始化
  1667.   static editModeHandler(bid) {
  1668.     const inputNode = $(`.${MemoGlobalConf.memoClassPrefix}-input-${bid}`)[0];
  1669.     BilibiliMemoDB.getOneByBid(bid).then((user) => {
  1670.       const val = $(inputNode).val();
  1671.       if (!/\S+/.test(val)) {
  1672.         if (user) {
  1673.           $(inputNode).val(user.nick_name);
  1674.         } else {
  1675.           $(inputNode).val($(inputNode).attr("data-bname"));
  1676.         }
  1677.       }
  1678.     });
  1679.     this.toggleMemoBox(bid);
  1680.     $(inputNode).focus();
  1681.   }
  1682.  
  1683.   // 粉丝、关注页编辑确认
  1684.   static setMemoHandler(bid) {
  1685.     const inputNode = $(`.${MemoGlobalConf.memoClassPrefix}-input-${bid}`)[0];
  1686.     const val = $(inputNode).val();
  1687.     const val_reg = /\S.*\S/;
  1688.     const bName = $(inputNode).attr("data-bname");
  1689.     if (val_reg.test(val)) {
  1690.       const memo = val_reg.exec(val)[0];
  1691.       const userANode = $(inputNode).parent().siblings("a")[0];
  1692.       BilibiliMemoInjectoin.getUserInfoByBid(bid).then(async (user) => {
  1693.         if (user) {
  1694.           if (user.nick_name != memo) {
  1695.             user.nick_name = memo;
  1696.             user.bname = bName;
  1697.             await BilibiliMemoDB.updateOne(user);
  1698.             BilibiliMemoInjectoin.injectOneFans(user, userANode);
  1699.           }
  1700.           this.toggleMemoBox(bid, false);
  1701.         } else {
  1702.           if (memo != bName) {
  1703.             user = {
  1704.               bid,
  1705.               nick_name: memo,
  1706.               bname: bName,
  1707.             };
  1708.             await BilibiliMemoDB.addOne(user);
  1709.             user = await BilibiliMemoDB.getOneByBid(bid);
  1710.             BilibiliMemoInjectoin.injectOneFans(user, userANode);
  1711.           }
  1712.           this.toggleMemoBox(bid, false);
  1713.         }
  1714.       });
  1715.     }
  1716.   }
  1717. }
  1718. /* =============================================
  1719.    通用函数部分   结束
  1720. =============================================*/
  1721. /*-----------------初始化 开始-----------------*/
  1722. async function BilibiliMemoInit() {
  1723.   // 注入样式
  1724.   BilibiliMemoInjectoin.injectCSS(MemoGlobalConf.memoStyle);
  1725.  
  1726.     // 个人主页双击修改事件
  1727.     $('body').on(
  1728.       'dblclick',
  1729.       `.h #h-name`,
  1730.       function(event){
  1731.         const bid = event.currentTarget.dataset.bid;
  1732.         BMemoUtils.homePageEditModeHandler(bid)
  1733.       }
  1734.     )
  1735.   
  1736.     // 个人主页搜索框失去焦点事件
  1737.     $('body').on(
  1738.       'focusout',
  1739.       '.homepage-memo-input',
  1740.       function(event){
  1741.         const bid = event.currentTarget.dataset.bid;
  1742.         BMemoUtils.homePageSetMemoHandler(bid)
  1743.       }
  1744.     )
  1745.   
  1746.     // 粉丝、关注页 备注按钮点击事件：
  1747.     $("body").on(
  1748.       "click",
  1749.       `.${MemoGlobalConf.memoClassPrefix}-setting-box div.${MemoGlobalConf.memoClassPrefix}-btn-bz`,
  1750.       function (event) {
  1751.         const bid = event.currentTarget.dataset.bid;
  1752.         BMemoUtils.editModeHandler(bid)
  1753.       }
  1754.     );
  1755.   
  1756.     // 删除备注按钮点击事件
  1757.     $("body").on(
  1758.       "click",
  1759.       `.${MemoGlobalConf.memoClassPrefix}-setting-box div.${MemoGlobalConf.memoClassPrefix}-btn-del`,
  1760.       function (event) {
  1761.         const bid = event.currentTarget.dataset.bid;
  1762.         BMemoUtils.delMemoHandler(bid)
  1763.       }
  1764.     )
  1765.   
  1766.     // 粉丝、关注页确认按钮点击事件
  1767.     $("body").on(
  1768.       "click",
  1769.       `.${MemoGlobalConf.memoClassPrefix}-setting-box .${MemoGlobalConf.memoClassPrefix}-btn-cfm`,
  1770.       function (event) {
  1771.         clearTimeout(MemoGlobalConf.fansInputBlurTimer)
  1772.         const bid = event.currentTarget.dataset.bid;
  1773.         BMemoUtils.setMemoHandler(bid)
  1774.       }
  1775.     );
  1776.   
  1777.     // 粉丝、关注页取消按钮点击事件
  1778.     $("body").on(
  1779.       "click",
  1780.       `.${MemoGlobalConf.memoClassPrefix}-setting-box .${MemoGlobalConf.memoClassPrefix}-btn-cancel`,
  1781.       function (event) {
  1782.         clearTimeout(MemoGlobalConf.fansInputBlurTimer)
  1783.         const bid = event.currentTarget.dataset.bid;
  1784.         BMemoUtils.toggleMemoBox(bid, false)
  1785.   
  1786.       })
  1787.   
  1788.     // 粉丝、关注页输入框市区焦点事件
  1789.     $("body").on(
  1790.       "focusout",
  1791.       `.${MemoGlobalConf.memoClassPrefix}-setting-box input`,
  1792.       function (event) {
  1793.         clearTimeout(MemoGlobalConf.fansInputBlurTimer)
  1794.         MemoGlobalConf.fansInputBlurTimer = setTimeout(()=>{
  1795.           const bid = event.currentTarget.dataset.bid;
  1796.           BMemoUtils.toggleMemoBox(bid, false)
  1797.         }, MemoGlobalConf.fansInputBlurDelay)
  1798.   
  1799.       })
  1800. }
  1801. /*-----------------初始化 结束-----------------*/
  1802.  
  1803. /*........................................................................................................................................
  1804.  Memo部分 结束
  1805. ........................................................................................................................................*/
  1806.  
  1807. async function flushConf() {
  1808.   const _conf = await ConfigDB.getConf();
  1809.   MemoGlobalConf.mode = _conf.memoMode;
  1810.   return true;
  1811. }
  1812.  
  1813. /*+++++++++++++++++++++++++++++++++++++
  1814.   主程序初始化  开始
  1815. +++++++++++++++++++++++++++++++++++++*/
  1816. async function bilibiliCustomInit() {
  1817.   if (!MyIndexedDB.getDBVersion()) {
  1818.     await DBInit.initAllDB();
  1819.   }
  1820.   // 从数据库获取数据，刷新配置参数
  1821.   await flushConf();
  1822.   BMenu.init();
  1823.   if (MemoGlobalConf.mode == 0) return;
  1824.   const uri = window.location.href;
  1825.   BilibiliMemoInit().then((r) => {
  1826.     BilibiliMemoInjectoin.replaceMemo(uri);
  1827.   });
  1828. }
  1829. /*+++++++++++++++++++++++++++++++++++++
  1830.   主程序初始化  结束
  1831. +++++++++++++++++++++++++++++++++++++*/
  1832.  
  1833.  
  1834. function toNewOne(){
  1835.     const newScriptUrl = 'https://scriptcat.org/zh-CN/script-show-page/3059'
  1836.     let timeDiff = 2 * 24 * 60 * 60 * 1e3
  1837.     const never = localStorage.getItem('neverShow')
  1838.     let neverEnd = localStorage.getItem('neverEndTime')
  1839.     const curr = new Date().getTime()
  1840.     neverEnd = Number(neverEnd)
  1841.     if(never == 1 && neverEnd && curr - neverEnd < timeDiff){
  1842.         return 
  1843.     }
  1844.     const dog = document.createElement('dialog')
  1845.     dog.style.cssText = `border:none;border-radius:8px;padding:18px;border: 5px solid #E16689;position:fixed;top: 20vh;margin: 0 auto;`
  1846.     document.body.appendChild(dog)
  1847.     const h = document.createElement('h2')
  1848.     h.style.cssText = `color:#E16689;text-align:center;`
  1849.     dog.appendChild(h)
  1850.     h.innerText = 'B站备注 -- 全新版本来啦！！！！'
  1851.     const content = `<div style="font-size: 18px;line-height: 40px;">新版本已完成适配，支持导入这个版本导出的数据（可以从这个版本导出数据，然后导入到新版本）。<br>
  1852.     迁移完数据后，可以卸载当前版本，只保留新版本。<br>
  1853.     新版本在这里安装：<a target="_blank" style="color:blue;outline:none;" href="${newScriptUrl}">${newScriptUrl}</a>
  1854.     </div>`
  1855.     dog.insertAdjacentHTML('beforeend', content)
  1856.     const btnD = document.createElement('div')
  1857.     dog.appendChild(btnD)
  1858.     const cfm = document.createElement('button')
  1859.     const neverShow = document.createElement('button')
  1860.     btnD.appendChild(cfm)
  1861.     btnD.appendChild(neverShow)
  1862.     btnD.style.cssText = `text-align: right;`
  1863.     cfm.innerText = '已知晓'
  1864.     neverShow.innerText = '不再展示'
  1865.     cfm.style.cssText = `margin-left: 20px;color:white;font-weight:600;font-size: 18px;border:2px solid pink;outline:none;background: #E16689;border-radius:4px;padding: 8px 10px;`
  1866.     neverShow.style.cssText= cfm.style.cssText
  1867.     dog.showModal()
  1868.     cfm.addEventListener('click', function(){
  1869.         dog.close()
  1870.     })
  1871.     neverShow.addEventListener('click', function(){
  1872.         dog.close()
  1873.         localStorage.setItem('neverShow', 1)
  1874.         localStorage.setItem('neverEndTime', new Date().getTime())
  1875.     })
  1876. }
  1877.  
  1878. (function () {
  1879.     toNewOne()
  1880.   bilibiliCustomInit().then((res) => {
  1881.     console.log("init over");
  1882.   });
  1883. })();

欢迎访问Greasy Fork镜像

土豆服务器，请按需使用

镜像地址随时可能被墙，建议加群获取最新地址

加入Q群

QingJ © 2025

镜像随时可能失效，请加Q群300939539或关注我们的公众号极客氢云获取最新地址