Twitter - 为用户添加备注(别名/标签)

为用户添加备注(别名/标签)功能,以帮助识别和搜索

当前为 2022-11-29 提交的版本,查看 最新版本

您需要先安装一个扩展,例如 篡改猴Greasemonkey暴力猴,之后才能安装此脚本。

You will need to install an extension such as Tampermonkey to install this script.

您需要先安装一个扩展,例如 篡改猴暴力猴,之后才能安装此脚本。

您需要先安装一个扩展,例如 篡改猴Userscripts ,之后才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey,才能安装此脚本。

您需要先安装用户脚本管理器扩展后才能安装此脚本。

(我已经安装了用户脚本管理器,让我安装!)

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

(我已经安装了用户样式管理器,让我安装!)

// ==UserScript==
// @name                Twitter - Add notes to the user
// @name:zh-CN          Twitter - 为用户添加备注(别名/标签)
// @name:zh-TW          Twitter - 為用戶添加備註(別名/標籤)
// @name:ja             Twitter - ユーザーへのメモの追加(エイリアス/ラベル)
// @name:ko             Twitter - 사용자에게 메모 추가 (별칭/라벨)
// @name:fr             Twitter - ajouter des notes aux utilisateurs (alias/tag)
// @namespace           https://greasyfork.org/zh-CN/users/193133-pana
// @homepage            https://greasyfork.org/zh-CN/users/193133-pana
// @icon                data:image/svg+xml;base64,PHN2ZyByb2xlPSJpbWciIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjI0cHgiIGhlaWdodD0iMjRweCIgdmlld0JveD0iMCAwIDI0IDI0IiBhcmlhLWxhYmVsbGVkYnk9Im5ld0ljb25UaXRsZSIgc3Ryb2tlPSJyZ2JhKDI5LDE2MSwyNDIsMS4wMCkiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InNxdWFyZSIgc3Ryb2tlLWxpbmVqb2luPSJtaXRlciIgZmlsbD0ibm9uZSIgY29sb3I9InJnYmEoMjksMTYxLDI0MiwxLjAwKSI+IDx0aXRsZSBpZD0ibmV3SWNvblRpdGxlIj5OZXc8L3RpdGxlPiA8cGF0aCBkPSJNMTkgMTRWMjJIMi45OTk5N1Y0SDEzIi8+IDxwYXRoIGQ9Ik0xNy40NjA4IDQuMDM5MjFDMTguMjQxOCAzLjI1ODE3IDE5LjUwODIgMy4yNTgxNiAyMC4yODkyIDQuMDM5MjFMMjAuOTYwOCA0LjcxMDc5QzIxLjc0MTggNS40OTE4NCAyMS43NDE4IDYuNzU4MTcgMjAuOTYwOCA3LjUzOTIxTDExLjU4NTggMTYuOTE0MkMxMS4yMTA3IDE3LjI4OTMgMTAuNzAyIDE3LjUgMTAuMTcxNiAxNy41TDcuNSAxNy41TDcuNSAxNC44Mjg0QzcuNSAxNC4yOTggNy43MTA3MSAxMy43ODkzIDguMDg1NzkgMTMuNDE0MkwxNy40NjA4IDQuMDM5MjFaIi8+IDxwYXRoIGQ9Ik0xNi4yNSA1LjI1TDE5Ljc1IDguNzUiLz4gPC9zdmc+
// @version             4.3.6
// @description         Add a note(alias/tag) for users to help identify and search
// @description:zh-CN   为用户添加备注(别名/标签)功能,以帮助识别和搜索
// @description:zh-TW   為用戶添加備註(別名/標籤)功能,以幫助識別和搜尋
// @description:ja      ユーザーが識別と検索に役立つメモ(エイリアス/タグ)機能を追加する
// @description:ko      사용자 식별 및 검색에 도움이되는 메모 (별칭/태그) 기능 추가
// @description:fr      Ajouter une fonction de notes (alias/tag) pour les utilisateurs pour aider à identifier et rechercher
// @author              pana
// @license             GNU General Public License v3.0 or later
// @compatible          chrome
// @compatible          firefox
// @match               *://*twitter.com/*
// @require             https://gcore.jsdelivr.net/npm/[email protected]/minified/arrive.min.js
// @require             https://gcore.jsdelivr.net/npm/[email protected]/dist/vue.min.js
// @require             https://gcore.jsdelivr.net/gh/LightAPIs/greasy-fork-library@12db3581edf5f1e638f3466ffab25b05d971165b/Note_Obj.js
// @noframes
// @grant               GM_info
// @grant               GM.info
// @grant               GM_getValue
// @grant               GM.getValue
// @grant               GM_setValue
// @grant               GM.setValue
// @grant               GM_deleteValue
// @grant               GM.deleteValue
// @grant               GM_listValues
// @grant               GM.listValues
// @grant               GM_openInTab
// @grant               GM.openInTab
// @grant               GM_registerMenuCommand
// @grant               GM_unregisterMenuCommand
// @grant               GM_addValueChangeListener
// @grant               GM_removeValueChangeListener
// ==/UserScript==

(async function () {
  'use strict';
  if (typeof Note_Obj !== 'function') {
    alert('Note_Obj.js was not loaded successfully!');
  }
  const UPDATED = '2022-11-29';
  const TWITTER_ICON = {
    NOTE_GRAY:
      'url(data:image/svg+xml;base64,PHN2ZyByb2xlPSJpbWciIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjI0cHgiIGhlaWdodD0iMjRweCIgdmlld0JveD0iMCAwIDI0IDI0IiBhcmlhLWxhYmVsbGVkYnk9Im5ld0ljb25UaXRsZSIgc3Ryb2tlPSJyZ2IoMTAxLCAxMTksIDEzNCkiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InNxdWFyZSIgc3Ryb2tlLWxpbmVqb2luPSJtaXRlciIgZmlsbD0ibm9uZSIgY29sb3I9InJnYigxMDEsIDExOSwgMTM0KSI+IDx0aXRsZSBpZD0ibmV3SWNvblRpdGxlIj5OZXc8L3RpdGxlPiA8cGF0aCBkPSJNMTkgMTRWMjJIMi45OTk5N1Y0SDEzIi8+IDxwYXRoIGQ9Ik0xNy40NjA4IDQuMDM5MjFDMTguMjQxOCAzLjI1ODE3IDE5LjUwODIgMy4yNTgxNiAyMC4yODkyIDQuMDM5MjFMMjAuOTYwOCA0LjcxMDc5QzIxLjc0MTggNS40OTE4NCAyMS43NDE4IDYuNzU4MTcgMjAuOTYwOCA3LjUzOTIxTDExLjU4NTggMTYuOTE0MkMxMS4yMTA3IDE3LjI4OTMgMTAuNzAyIDE3LjUgMTAuMTcxNiAxNy41TDcuNSAxNy41TDcuNSAxNC44Mjg0QzcuNSAxNC4yOTggNy43MTA3MSAxMy43ODkzIDguMDg1NzkgMTMuNDE0MkwxNy40NjA4IDQuMDM5MjFaIi8+IDxwYXRoIGQ9Ik0xNi4yNSA1LjI1TDE5Ljc1IDguNzUiLz4gPC9zdmc+)',
    NOTE_BLUE:
      'url(data:image/svg+xml;base64,PHN2ZyByb2xlPSJpbWciIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjI0cHgiIGhlaWdodD0iMjRweCIgdmlld0JveD0iMCAwIDI0IDI0IiBhcmlhLWxhYmVsbGVkYnk9Im5ld0ljb25UaXRsZSIgc3Ryb2tlPSJyZ2JhKDI5LDE2MSwyNDIsMS4wMCkiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InNxdWFyZSIgc3Ryb2tlLWxpbmVqb2luPSJtaXRlciIgZmlsbD0ibm9uZSIgY29sb3I9InJnYmEoMjksMTYxLDI0MiwxLjAwKSI+IDx0aXRsZSBpZD0ibmV3SWNvblRpdGxlIj5OZXc8L3RpdGxlPiA8cGF0aCBkPSJNMTkgMTRWMjJIMi45OTk5N1Y0SDEzIi8+IDxwYXRoIGQ9Ik0xNy40NjA4IDQuMDM5MjFDMTguMjQxOCAzLjI1ODE3IDE5LjUwODIgMy4yNTgxNiAyMC4yODkyIDQuMDM5MjFMMjAuOTYwOCA0LjcxMDc5QzIxLjc0MTggNS40OTE4NCAyMS43NDE4IDYuNzU4MTcgMjAuOTYwOCA3LjUzOTIxTDExLjU4NTggMTYuOTE0MkMxMS4yMTA3IDE3LjI4OTMgMTAuNzAyIDE3LjUgMTAuMTcxNiAxNy41TDcuNSAxNy41TDcuNSAxNC44Mjg0QzcuNSAxNC4yOTggNy43MTA3MSAxMy43ODkzIDguMDg1NzkgMTMuNDE0MkwxNy40NjA4IDQuMDM5MjFaIi8+IDxwYXRoIGQ9Ik0xNi4yNSA1LjI1TDE5Ljc1IDguNzUiLz4gPC9zdmc+)',
  };
  const TWITTER_STYLE = `
        .note-obj-twitter-blue-tag {
            background-color: #3c81df;
            color: #fff;
            display: inline-flex;
            align-items: center;
            padding: 2px 10px;
            line-height: 100%;
            border-radius: 50px;
        }
        .note-obj-twitter-note-btn {
            background-image: ${TWITTER_ICON.NOTE_GRAY};
            background-repeat: no-repeat;
            background-position: center;
            background-color: rgba(0, 0, 0, 0);
            border-bottom-left-radius: 9999px;
            border-bottom-right-radius: 9999px;
            border-top-left-radius: 9999px;
            border-top-right-radius: 9999px;
            transition-property: background-color, box-shadow;
            transition-duration: 0.2s;
        }
        .note-obj-twitter-note-btn:hover {
            background-image: ${TWITTER_ICON.NOTE_BLUE};
            background-color: rgba(29, 161, 242, .1);
        }
        .note-obj-twitter-panel-btn {
            height: 32px;
            width: 32px;
            margin: 5px 0px 0px 0px;
            background-size: 28px auto;
            cursor: pointer !important;
            border-radius: 0px;
        }
        .note-obj-twitter-panel-btn:hover::after {
            content: "";
            display: flex;
            position: relative;
            background-color: rgba(29, 161, 242, .1);
            width: 48px;
            height: 48px;
            top: -8px;
            left: -8px;
            border-radius: 99px;
        }
        .note-obj-twitter-before-follow-note-btn {
            height: 36px;
            width: 36px;
            background-image: ${TWITTER_ICON.NOTE_BLUE};
            background-repeat: no-repeat;
            background-size: 19px auto;
            background-position: center;
            margin-bottom: 12px;
            margin-right: 12px;
            cursor: pointer;
            border: 1px solid rgba(29, 161, 242, 1);
            border-bottom-left-radius: 9999px;
            border-bottom-right-radius: 9999px;
            border-top-left-radius: 9999px;
            border-top-right-radius: 9999px;
            background-color: rgba(0, 0, 0, 0);
            transition-property: background-color, box-shadow;
            transition-duration: 0.2s;
        }
        .note-obj-twitter-before-follow-note-btn:hover {
            background-color: rgba(29, 161, 242, .1);
        }
        .note-obj-twitter-base-tool-bar-btn {
            height: 18px;
            width: 18px;
            margin: 0px -40px 0px 0px;
            background-size: 20px auto;
            border-radius: 0px;
        }
        .note-obj-twitter-base-tool-bar-btn:hover::after {
            content: "";
            position: absolute;
            background-color: rgba(29, 161, 242, .1);
            width: 34px;
            height: 34px;
            top: -8px;
            left: -8px;
            border-radius: 99px;
        }
        .note-obj-twitter-comment-tool-bar-btn {
            height: 24px;
            width: 24px;
            margin: 12px 0px 0px 0px;
            background-size: 24px auto;
            border-radius: 0px;
            cursor: pointer;
        }
        .note-obj-twitter-comment-tool-bar-btn:hover::after {
            content: "";
            position: absolute;
            background-color: rgba(29, 161, 242, .1);
            width: 38px;
            height: 38px;
            top: -8px;
            left: -8px;
            border-radius: 99px;
        }
        .note-obj-twitter-left-box {
            height: 50%;
        }
    `;
  const selector = {
    root: '#react-root div .r-13awgt0.r-12vffkv',
    homepage: {
      id: 'div[data-testid="User-Names"] a[role="link"] > div[dir] > span',
      article: 'article',
      toolBar: '.css-1dbjc4n.r-18u37iz.r-1wtj0ep.r-1mdbhws',
      showName: 'div[data-testid="User-Names"] a[role="link"] > div > div[dir] > span',
      reprintA: '.css-1dbjc4n.r-1habvwh.r-16y2uox a',
      reprintName: ':scope > span:first-of-type > span',
      at: 'a.css-4rbku5.css-18t94o4.css-901oao.css-16my406.r-1loqt21.r-bcqeeo.r-qvutc0',
      userFrame: '.css-18t94o4.css-1dbjc4n.r-1loqt21.r-1wbh5a2.r-dnmrzs.r-1ny4l3l',
      blockquote: 'div[aria-labelledby][id] > .css-1dbjc4n > div[role="link"]',
      blockquoteId: 'div[tabindex] .css-1dbjc4n > div[dir] > span',
      blockquoteShowName: 'div[data-testid="UserAvatar-Container-unknown"]',
    },
    userpage: {
      main: '.css-1dbjc4n.r-1ifxtd0.r-ymttw5.r-ttdzmv',
      id: '[data-testid="UserName"] .css-1dbjc4n.r-18u37iz.r-1wbh5a2 span',
      showName: '[data-testid="UserName"] .css-901oao.r-1vr29t4.r-bcqeeo.r-qvutc0 > span',
      follow: '.css-1dbjc4n.r-obd0qt.r-18u37iz.r-1w6e6rj.r-1h0z5md.r-dnmrzs',
    },
    comment: {
      toolBar: '.css-1dbjc4n.r-1oszu61.r-1efd50x.r-5kkj8d.r-18u37iz.r-a2tzq0',
    },
    hover: {
      panel: 'div[data-testid="HoverCard"] .r-nsbfu8',
      followBtn: '.css-1dbjc4n.r-bcqeeo',
      id: 'a[role="link"]',
      showName: 'a[role="link"] > div > div[dir] > span',
    },
    modal: {
      cell: '[aria-labelledby="modal-header"] [data-testid="UserCell"]',
      id: 'a[role="link"]',
      showName: 'a[role="link"] > div > div[dir] > span',
    },
    follow: {
      cell: '[data-testid="cellInnerDiv"] [data-testid="UserCell"]',
      id: 'a[role="link"]',
      showName: 'a[role="link"] > div > div[dir] > span',
    },
    rightRecommended: {
      cell: '[role="complementary"] [data-testid="UserCell"]',
      id: 'a[role="link"]',
      showName: 'a[role="link"] > div > div[dir]',
    },
  };
  const noteObj = new Note_Obj('myTwitterNote');
  await noteObj.init({
    style: selector.homepage.showName + ' { white-space: normal; }\n' + TWITTER_STYLE,
    changeEvent: changeEvent,
    settings: {
      showToolbarButton: {
        type: 'checkbox',
        lang: {
          en: 'Display the "Add Note" button in the toolbar below each tweet (if there is no such button in the user\'s hover information panel, this option can be turned on)',
          zh_cn: '在每条推特下方的工具栏里显示"添加备注"按钮 (如果在用户的悬停信息面板里没有此按钮时,可以打开此选项)',
          zh_tw: '在每條推特下方的工具欄裡顯示"添加備註"按鈕 (如果在用戶的懸停資訊面板裡沒有此按鈕時,可以打開此選項)',
          ja: '各Twitterの下のツールバーに“備考追加”ボタンが表示されます(ユーザのホバリング情報パネルにこのボタンがない場合は、このオプションを開くことができます)',
          ko: '각 트위터 아래의 도구 모음에 "메모 추가" 단추가 표시됩니다(사용자의 롤오버 정보 패널에 이 단추가 없는 경우 이 옵션을 설정할 수 있음)',
          fr: "Afficher le bouton \"Ajouter une note\" dans la barre d'outils sous chaque tweet (S'il n'y a pas de bouton de ce type dans le panneau d'informations de survol de l'utilisateur, vous pouvez activer cette option)",
        },
        default: false,
        event: insertToolbarButtonEvent,
      },
      disableInTweets: {
        type: 'checkbox',
        lang: {
          en: 'Disable replaces peoples @username to @note in tweets',
          zh_cn: '禁止将推文中的用户 @username 替换为 @note',
          zh_tw: '禁止將推文中的使用者 @username 替换为 @note',
          ja: '無効にすると、ツイート内のユーザーの@usernameが@noteに置き換えられます',
          ko: '비활성화는 트윗에서 @username을 @note로 대체합니다',
          fr: "Désactiver remplace le @nom d'utilisateur par @note dans les tweets",
        },
        default: false,
        event: disableInTweetsEvent,
      },
    },
    script: {
      author: {
        name: 'pana',
        homepage: 'https://greasyfork.org/zh-CN/users/193133-pana',
      },
      address: 'https://greasyfork.org/scripts/404587',
      updated: UPDATED,
      library: [
        {
          name: 'arrive.js',
          version: '2.4.1',
          url: 'https://github.com/uzairfarooq/arrive',
        },
      ],
    },
    leftBtnBoxClassName: 'note-obj-twitter-left-box',
  });
  function disableInTweetsEvent(status) {
    for (const ele of document.querySelectorAll(selector.homepage.article)) {
      for (const atUser of ele.querySelectorAll(selector.homepage.at)) {
        const atUserId = Note_Obj.fn.getUserIdFromLink(atUser.href, value => /^[^/]+$/i.test(value));
        noteObj.judgeUsers(atUserId) &&
          noteObj.handler(atUserId, atUser, null, {
            symbol: {
              prefix: '@',
            },
            restore: status,
          });
      }
    }
  }
  function insertToolbarButtonEvent(status) {
    document.querySelectorAll(selector.homepage.article).forEach(ele => {
      if (ele.querySelector(selector.homepage.id)) {
        const eleId = ele.querySelector(selector.homepage.id).textContent.replace(/^@/, '');
        const eleName = ele.querySelector(selector.homepage.showName).textContent;
        const toolBar = ele.querySelector(selector.homepage.toolBar);
        const commentToolBar = ele.querySelector(selector.comment.toolBar);
        if (status) {
          toolBar &&
            !toolBar.querySelector('.note-obj-add-note-btn') &&
            toolBar.appendChild(
              noteObj.createNoteBtn(eleId, eleName, ['note-obj-twitter-note-btn', 'note-obj-twitter-base-tool-bar-btn', 'css-1dbjc4n'])
            );
          commentToolBar &&
            !commentToolBar.querySelector('.note-obj-add-note-btn') &&
            commentToolBar.appendChild(
              noteObj.createNoteBtn(eleId, eleName, ['note-obj-twitter-note-btn', 'note-obj-twitter-comment-tool-bar-btn', 'css-1dbjc4n'])
            );
        } else {
          toolBar && toolBar.querySelector('.note-obj-add-note-btn') && toolBar.querySelector('.note-obj-add-note-btn').remove();
          commentToolBar &&
            commentToolBar.querySelector('.note-obj-add-note-btn') &&
            commentToolBar.querySelector('.note-obj-add-note-btn').remove();
        }
      }
    });
  }
  function changeEvent(noteObj, userId = null) {
    for (const ele of document.querySelectorAll(selector.homepage.article)) {
      if (ele.querySelector(selector.homepage.id)) {
        const eleId = ele.querySelector(selector.homepage.id).textContent.replace(/^@/, '');
        (!userId || userId == eleId) &&
          noteObj.handler(eleId, ele, selector.homepage.showName, {
            add: 'span',
            classname: 'note-obj-twitter-blue-tag',
          });
      }
      const reprintA = ele.querySelector(selector.homepage.reprintA);
      if (reprintA) {
        const reprintId = Note_Obj.fn.getUserIdFromLink(reprintA.href);
        (!userId || userId == reprintId) &&
          noteObj.handler(reprintId, reprintA, selector.homepage.reprintName, {
            add: 'span',
            classname: 'note-obj-twitter-blue-tag',
            symbol: {
              offsetWidth: 30,
            },
          });
      }
      const blockquote = ele.querySelector(selector.homepage.blockquote);
      if (blockquote) {
        const blockquoteUserId = blockquote.querySelector(selector.homepage.blockquoteId).textContent.replace(/^@/, '');
        const blockquoteUser = blockquote.querySelector(selector.homepage.blockquoteShowName).nextElementSibling;
        if (blockquoteUserId == userId) {
          noteObj.handler(userId, blockquoteUser);
        }
        (!userId || userId == blockquoteUserId) &&
          noteObj.handler(blockquoteUserId, blockquoteUser, null, {
            add: 'span',
            classname: 'note-obj-twitter-blue-tag',
          });
      }
      for (const atUser of ele.querySelectorAll(selector.homepage.at)) {
        const atUserId = Note_Obj.fn.getUserIdFromLink(atUser.href, value => /^[^/]+$/i.test(value));
        (!userId || userId == atUserId) &&
          noteObj.judgeUsers(atUserId) &&
          noteObj.handler(atUserId, atUser, null, {
            symbol: {
              prefix: '@',
            },
            restore: noteObj.getConfig().other.disableInTweets,
          });
      }
    }
    for (const ele of document.querySelectorAll(selector.userpage.main)) {
      const user = ele.querySelector(selector.userpage.id);
      if (user) {
        const eleId = user.textContent.replace(/^@/, '');
        (!userId || userId == eleId) &&
          noteObj.handler(eleId, ele, selector.userpage.showName, {
            add: 'span',
            classname: 'note-obj-twitter-blue-tag',
          });
      }
    }
    for (const ele of document.querySelectorAll(selector.follow.cell)) {
      const eleId = Note_Obj.fn.getUserIdFromLink(Note_Obj.fn.queryA(ele, selector.follow.id).href);
      if (eleId) {
        (!userId || userId == eleId) &&
          noteObj.handler(eleId, ele, selector.follow.showName, {
            add: 'span',
            class: 'note-obj-twitter-blue-tag',
          });
      }
    }
    for (const ele of document.querySelectorAll(selector.rightRecommended.cell)) {
      const eleId = Note_Obj.fn.getUserIdFromLink(Note_Obj.fn.queryA(ele, selector.rightRecommended.id).href);
      if (eleId) {
        (!userId || userId == eleId) &&
          noteObj.handler(eleId, ele, selector.rightRecommended.showName, {
            add: 'span',
            class: 'note-obj-twitter-blue-tag',
          });
      }
    }
    for (const ele of document.querySelectorAll(selector.modal.cell)) {
      const eleId = Note_Obj.fn.getUserIdFromLink(Note_Obj.fn.queryA(ele, selector.modal.id).href);
      if (eleId) {
        (!userId || userId == eleId) &&
          noteObj.handler(eleId, ele, selector.modal.showName, {
            add: 'span',
            class: 'note-obj-twitter-blue-tag',
          });
      }
    }
  }
  function init() {
    const arriveOption = {
      fireOnAttributesModification: true,
      existing: true,
    };
    document.querySelector(selector.root).arrive(selector.homepage.article, arriveOption, ele => {
      if (ele.querySelector(selector.homepage.id)) {
        const eleId = ele.querySelector(selector.homepage.id).textContent.replace(/^@/, '');
        const eleName = ele.querySelector(selector.homepage.showName).textContent;
        noteObj.getConfig().other.showToolbarButton &&
          ele.querySelector(selector.homepage.toolBar) &&
          ele
            .querySelector(selector.homepage.toolBar)
            .appendChild(
              noteObj.createNoteBtn(eleId, eleName, ['note-obj-twitter-note-btn', 'note-obj-twitter-base-tool-bar-btn', 'css-1dbjc4n'])
            );
        noteObj.getConfig().other.showToolbarButton &&
          ele.querySelector(selector.comment.toolBar) &&
          ele
            .querySelector(selector.comment.toolBar)
            .appendChild(
              noteObj.createNoteBtn(eleId, eleName, ['note-obj-twitter-note-btn', 'note-obj-twitter-comment-tool-bar-btn', 'css-1dbjc4n'])
            );
        noteObj.judgeUsers(eleId) &&
          noteObj.handler(
            eleId,
            ele,
            selector.homepage.showName,
            {
              add: 'span',
              classname: 'note-obj-twitter-blue-tag',
            },
            eleName
          );
      }
      const reprintA = ele.querySelector(selector.homepage.reprintA);
      if (reprintA) {
        const reprintId = Note_Obj.fn.getUserIdFromLink(reprintA.href);
        noteObj.judgeUsers(reprintId) &&
          noteObj.handler(reprintId, reprintA, selector.homepage.reprintName, {
            add: 'span',
            classname: 'note-obj-twitter-blue-tag',
            symbol: {
              offsetWidth: 30,
            },
          });
      }
      const blockquote = ele.querySelector(selector.homepage.blockquote);
      if (blockquote) {
        const blockquoteUserId = blockquote.querySelector(selector.homepage.blockquoteId).textContent.replace(/^@/, '');
        const blockquoteUser = blockquote.querySelector(selector.homepage.blockquoteShowName).nextElementSibling;
        noteObj.judgeUsers(blockquoteUserId) &&
          noteObj.handler(blockquoteUserId, blockquoteUser, null, {
            add: 'span',
            classname: 'note-obj-twitter-blue-tag',
          });
      }
      if (!noteObj.getConfig().other.disableInTweets) {
        for (const atUser of ele.querySelectorAll(selector.homepage.at)) {
          const atUserId = Note_Obj.fn.getUserIdFromLink(atUser.href, value => /^[^/]+$/i.test(value));
          noteObj.judgeUsers(atUserId) &&
            noteObj.handler(atUserId, atUser, null, {
              symbol: {
                prefix: '@',
              },
            });
        }
      }
    });
    document.querySelector(selector.root).arrive(selector.userpage.main, arriveOption, ele => {
      const eleId = ele.querySelector(selector.userpage.id).textContent.replace(/^@/, '');
      const eleName = ele.querySelector(selector.userpage.showName).textContent;
      let followNoteBtn;
      if (ele.querySelector(selector.userpage.follow)) {
        followNoteBtn = noteObj.createNoteBtn(eleId, eleName, ['note-obj-twitter-before-follow-note-btn', 'css-901oao']);
        ele.querySelector(selector.userpage.follow).insertAdjacentElement('afterbegin', followNoteBtn);
      }
      noteObj.judgeUsers(eleId) &&
        noteObj.handler(
          eleId,
          ele,
          selector.userpage.showName,
          {
            add: 'span',
            classname: 'note-obj-twitter-blue-tag',
          },
          eleName
        );
      const userIdChange = new MutationObserver(() => {
        const newUserId = ele.querySelector(selector.userpage.id).textContent.replace(/^@/, '');
        noteObj.handler('', ele, selector.userpage.showName, {
          add: 'span',
          classname: 'note-obj-twitter-blue-tag',
        });
        const newUserName = ele.querySelector(selector.userpage.showName).textContent;
        if (followNoteBtn) {
          followNoteBtn.remove();
          followNoteBtn = noteObj.createNoteBtn(newUserId, newUserName, ['note-obj-twitter-before-follow-note-btn', 'css-901oao']);
          ele.querySelector(selector.userpage.follow).insertAdjacentElement('afterbegin', followNoteBtn);
        }
        noteObj.judgeUsers(newUserId) &&
          noteObj.handler(
            newUserId,
            ele,
            selector.userpage.showName,
            {
              add: 'span',
              classname: 'note-obj-twitter-blue-tag',
            },
            newUserName
          );
      });
      userIdChange.observe(ele.querySelector(selector.userpage.id), {
        subtree: true,
        characterData: true,
      });
    });
    document.querySelector(selector.root).arrive(selector.follow.cell, arriveOption, ele => {
      const eleId = Note_Obj.fn.getUserIdFromLink(Note_Obj.fn.queryA(ele, selector.follow.id).href);
      noteObj.judgeUsers(eleId) &&
        noteObj.handler(eleId, ele, selector.follow.showName, {
          add: 'span',
          class: 'note-obj-twitter-blue-tag',
        });
    });
    document.querySelector(selector.root).arrive(selector.rightRecommended.cell, arriveOption, ele => {
      const eleId = Note_Obj.fn.getUserIdFromLink(Note_Obj.fn.queryA(ele, selector.rightRecommended.id).href);
      noteObj.judgeUsers(eleId) &&
        noteObj.handler(eleId, ele, selector.rightRecommended.showName, {
          add: 'span',
          class: 'note-obj-twitter-blue-tag',
        });
    });
    document.querySelector(selector.root).arrive(selector.hover.panel, arriveOption, ele => {
      const eleId = Note_Obj.fn.getUserIdFromLink(Note_Obj.fn.queryA(ele, selector.hover.id).href);
      if (eleId) {
        const userShowName = ele.querySelector(selector.hover.showName);
        if (userShowName) {
          const userShowNameText = userShowName.textContent;
          ele.querySelector(selector.hover.followBtn) &&
            ele
              .querySelector(selector.hover.followBtn)
              .insertAdjacentElement(
                'beforebegin',
                noteObj.createNoteBtn(eleId, userShowNameText, ['note-obj-twitter-note-btn', 'note-obj-twitter-panel-btn'])
              );
          noteObj.judgeUsers(eleId) &&
            noteObj.handler(
              eleId,
              ele,
              selector.hover.showName,
              {
                add: 'span',
                class: 'note-obj-twitter-blue-tag',
              },
              userShowNameText
            );
        }
      }
    });
    document.querySelector(selector.root).arrive(selector.modal.cell, arriveOption, ele => {
      const eleId = Note_Obj.fn.getUserIdFromLink(Note_Obj.fn.queryA(ele, selector.modal.id).href);
      console.log(eleId);
      noteObj.judgeUsers(eleId) &&
        noteObj.handler(eleId, ele, selector.modal.showName, {
          add: 'span',
          class: 'note-obj-twitter-blue-tag',
        });
    });
  }
  init();
})();