// ==UserScript==
// @name                Twitter - Add notes to the user
// @name:zh-CN          Twitter - 为用户添加备注
// @name:zh-TW          Twitter - 為用戶添加備註
// @name:ja             Twitter - ユーザーに備考を加える
// @name:ko             Twitter - 사용자에 대한 주석 추가
// @namespace           https://greasyfork.org/zh-CN/users/193133-pana
// @homepage            https://www.sailboatweb.com
// @icon                data:image/svg+xml;base64,PHN2ZyByb2xlPSJpbWciIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjI0cHgiIGhlaWdodD0iMjRweCIgdmlld0JveD0iMCAwIDI0IDI0IiBhcmlhLWxhYmVsbGVkYnk9Im5ld0ljb25UaXRsZSIgc3Ryb2tlPSJyZ2JhKDI5LDE2MSwyNDIsMS4wMCkiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InNxdWFyZSIgc3Ryb2tlLWxpbmVqb2luPSJtaXRlciIgZmlsbD0ibm9uZSIgY29sb3I9InJnYmEoMjksMTYxLDI0MiwxLjAwKSI+IDx0aXRsZSBpZD0ibmV3SWNvblRpdGxlIj5OZXc8L3RpdGxlPiA8cGF0aCBkPSJNMTkgMTRWMjJIMi45OTk5N1Y0SDEzIi8+IDxwYXRoIGQ9Ik0xNy40NjA4IDQuMDM5MjFDMTguMjQxOCAzLjI1ODE3IDE5LjUwODIgMy4yNTgxNiAyMC4yODkyIDQuMDM5MjFMMjAuOTYwOCA0LjcxMDc5QzIxLjc0MTggNS40OTE4NCAyMS43NDE4IDYuNzU4MTcgMjAuOTYwOCA3LjUzOTIxTDExLjU4NTggMTYuOTE0MkMxMS4yMTA3IDE3LjI4OTMgMTAuNzAyIDE3LjUgMTAuMTcxNiAxNy41TDcuNSAxNy41TDcuNSAxNC44Mjg0QzcuNSAxNC4yOTggNy43MTA3MSAxMy43ODkzIDguMDg1NzkgMTMuNDE0MkwxNy40NjA4IDQuMDM5MjFaIi8+IDxwYXRoIGQ9Ik0xNi4yNSA1LjI1TDE5Ljc1IDguNzUiLz4gPC9zdmc+
// @version             3.0.3
// @description         Add a note for users to help identify and search
// @description:zh-CN   为用户添加备注功能，以帮助识别和搜索
// @description:zh-TW   為用戶添加備註功能，以幫助識別和搜尋
// @description:ja      ユーザーに備考機能を追加し、識別と検索を助ける
// @description:ko      식별 및 검색에 도움이 되는 사용자에 대한 주석 추가 기능
// @author              pana
// @license             GNU General Public License v3.0 or later
// @include             http*://*twitter.com/*
// @require             https://cdn.jsdelivr.net/npm/arrive@2.4.1/minified/arrive.min.js
// @require             https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js
// @require             https://greasyfork.org/scripts/408454-note-obj/code/Note_Obj.js?version=840284
// @grant               GM_info
// @grant               GM_getValue
// @grant               GM_setValue
// @grant               GM_deleteValue
// @grant               GM_listValues
// @grant               GM_registerMenuCommand
// @grant               GM_addValueChangeListener
// @downloadURL none
// ==/UserScript==

(function() {
    'use strict';
    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+)',
        'SEARCH_BLUE': 'url(data:image/svg+xml;base64,PHN2ZyByb2xlPSJpbWciIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjI0cHgiIGhlaWdodD0iMjRweCIgdmlld0JveD0iMCAwIDI0IDI0IiBhcmlhLWxhYmVsbGVkYnk9InNlYXJjaEljb25UaXRsZSIgc3Ryb2tlPSJyZ2JhKDI5LDE2MSwyNDIsMS4wMCkiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InNxdWFyZSIgc3Ryb2tlLWxpbmVqb2luPSJtaXRlciIgZmlsbD0ibm9uZSIgY29sb3I9InJnYmEoMjksMTYxLDI0MiwxLjAwKSI+IDx0aXRsZSBpZD0ic2VhcmNoSWNvblRpdGxlIj5TZWFyY2g8L3RpdGxlPiA8cGF0aCBkPSJNMTQuNDEyMTEyMiwxNC40MTIxMTIyIEwyMCwyMCIvPiA8Y2lyY2xlIGN4PSIxMCIgY3k9IjEwIiByPSI2Ii8+IDwvc3ZnPg==)'
    };
    const TWITTER_STYLE = `
        .note-obj-twitter-blue-tag {
            background-color: #3c81df;
            color: #fff;
            display: inline-flex;
            align-items: center;
            padding: 0px 10px;
            white-space: nowrap;
            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-base-tool-bar-btn {
            height: 32px;
            width: 32px;
            margin: 5px 0px 0px 0px;
            background-size: 28px auto;
            cursor: pointer;
            border-radius: 0px;
        }
        .note-obj-twitter-base-tool-bar-btn-mobile {
            height: 18px;
            width: 18px;
            margin: 0px 20px 0px 0px;
            background-size: 18px auto;
            border-radius: 0px;
        }
        .note-obj-twitter-comment-tool-bar-btn-mobile {
            height: 24px;
            width: 24px;
            background-size: 24px auto;
            border-radius: 0px;
            margin: 10px 0px 0px 0px;
        }
        .note-obj-twitter-before-follow-note-btn {
            height: 38px;
            width: 38px;
            background-image: ${TWITTER_ICON.NOTE_BLUE};
            background-repeat: no-repeat;
            background-size: 19px auto;
            background-position: center;
            margin-bottom: 10px;
            margin-right: 10px;
            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-before-follow-note-btn-mobile {
            margin-bottom: 8px !important;
        }
        .note-obj-twitter-search-btn-mobile {
            background-image: ${TWITTER_ICON.SEARCH_BLUE};
            background-size: 28px auto;
            background-position: center;
            background-repeat: no-repeat;
            width: 28px;
            height: 28px;
            margin: 10px 20px 0px 0px;
        }
    `;
    var selector = {
        'body': 'body',
        'root': '#react-root div .r-13awgt0.r-12vffkv',
        'homepage': {
            'article': 'article',
            'tool_bar': '.css-1dbjc4n.r-18u37iz.r-1wtj0ep.r-1mdbhws',
            'show_name': '.css-901oao.css-bfa6kz.r-1qd0xha.r-vw2c0b.r-ad9z0x.r-bcqeeo.r-3s2u2q.r-qvutc0 > span',
            'id': '.css-901oao.css-bfa6kz.r-18u37iz.r-1qd0xha.r-16dba41.r-ad9z0x.r-bcqeeo.r-qvutc0 > span',
            'reprint_a': '.css-1dbjc4n.r-1habvwh.r-16y2uox a',
            'reprint_name': '.css-1dbjc4n.r-1habvwh.r-16y2uox a > span > span',
            'at': 'a.css-4rbku5.css-18t94o4.css-901oao.css-16my406.r-1loqt21.r-1qd0xha.r-ad9z0x.r-bcqeeo.r-qvutc0',
            'user_frame': '.css-18t94o4.css-1dbjc4n.r-1ny4l3l.r-1j3t67a.r-1w50u8q.r-o7ynqc.r-6416eg',
            'blockquote': 'div[role="blockquote"]'
        },
        'userpage': {
            'main_user_id': '.css-1dbjc4n.r-15d164r.r-1g94qm0 .css-1dbjc4n.r-18u37iz.r-1wbh5a2 > div > span',
            'main': '.css-1dbjc4n.r-ku1wi2.r-1j3t67a.r-m611by',
            'id': '.css-1dbjc4n.r-18u37iz.r-1wbh5a2 > div > span',
            'follow': '.css-1dbjc4n.r-obd0qt.r-18u37iz.r-1w6e6rj.r-1h0z5md.r-dnmrzs',
            'show_name': '.css-901oao.r-1qd0xha.r-1b6yd1w.r-1vr29t4.r-ad9z0x.r-bcqeeo.r-qvutc0 > span'
        },
        'comment': {
            'tool_bar': '.css-1dbjc4n.r-1oszu61.r-1efd50x.r-5kkj8d.r-18u37iz.r-a2tzq0'
        },
        'mobile': {
            'bootom_bar': ''
        },
        'hover': {
            'panel': 'div.css-1dbjc4n.r-1oqcu8e',
            'follow_btn': '.css-1dbjc4n.r-bcqeeo',
            'id': '.css-1dbjc4n.r-18u37iz.r-1wbh5a2',
            'show_name': '.css-901oao.css-bfa6kz.r-1qd0xha.r-a023e6.r-vw2c0b.r-ad9z0x.r-bcqeeo.r-3s2u2q.r-qvutc0 > span'
        }
    };
    var mobile_selector = {
        'body': 'body',
        'root': '#react-root div .r-13awgt0.r-12vffkv',
        'homepage': {
            'article': 'article',
            'tool_bar': '.css-1dbjc4n.r-18u37iz.r-1wtj0ep.r-1mdbhws',
            'show_name': '.css-901oao.css-bfa6kz.r-1qd0xha.r-vw2c0b.r-ad9z0x.r-bcqeeo.r-3s2u2q.r-qvutc0 > span',
            'id': '.css-901oao.css-bfa6kz.r-18u37iz.r-1qd0xha.r-16dba41.r-ad9z0x.r-bcqeeo.r-qvutc0 > span',
            'reprint_a': '.css-1dbjc4n.r-1habvwh.r-1iusvr4.r-16y2uox a',
            'reprint_name': '.css-1dbjc4n.r-1habvwh.r-1iusvr4.r-16y2uox a > span > span',
            'at': 'a.css-4rbku5.css-18t94o4.css-901oao.css-16my406.r-1loqt21.r-1qd0xha.r-ad9z0x.r-bcqeeo.r-qvutc0',
            'user_frame': '.css-18t94o4.css-1dbjc4n.r-rull8r.r-qklmqi.r-1ny4l3l.r-779j7e.r-1xtiow5.r-o7ynqc.r-6416eg',
            'blockquote': 'div[role="blockquote"]'
        },
        'userpage': {
            'main_user_id': '.css-1dbjc4n.r-hxarbt.r-1g94qm0 .css-1dbjc4n.r-18u37iz.r-1wbh5a2 > div > span',
            'main': '.css-1dbjc4n.r-1cad53l.r-779j7e.r-1b9bua6',
            'id': '.css-1dbjc4n.r-18u37iz.r-1wbh5a2 > div > span',
            'follow': '.css-1dbjc4n.r-obd0qt.r-18u37iz.r-1w6e6rj.r-1h0z5md.r-dnmrzs',
            'show_name': '.css-901oao.r-1qd0xha.r-1i10wst.r-1vr29t4.r-ad9z0x.r-bcqeeo.r-qvutc0 > span'
        },
        'comment': {
            'tool_bar': '.css-1dbjc4n.r-1oszu61.r-1efd50x.r-5kkj8d.r-18u37iz.r-a2tzq0'
        },
        'mobile': {
            'bootom_bar': '.css-1dbjc4n.r-18u37iz.r-drjvcx.r-ripixn.r-13qz1uu'
        },
        'hover': {
            'panel': 'div.css-1dbjc4n.r-1oqcu8e',
            'follow_btn': '.css-1dbjc4n.r-bcqeeo',
            'id': '.css-1dbjc4n.r-18u37iz.r-1wbh5a2',
            'show_name': '.css-901oao.css-bfa6kz.r-1qd0xha.r-a023e6.r-vw2c0b.r-ad9z0x.r-bcqeeo.r-3s2u2q.r-qvutc0 > span'
        }
    };
    function change_Event(note_obj, user_id = null) {
        for (let ele of document.querySelectorAll(selector.homepage.article)) {
            if (ele.querySelector(selector.homepage.id)) {
                let ele_id = ele.querySelector(selector.homepage.id).textContent.replace(/^@/, '');
                (! user_id || user_id == ele_id) && note_obj.handler(ele_id, ele, selector.homepage.show_name, {
                    'add': 'span',
                    'classname': 'note-obj-twitter-blue-tag'
                });
            }
            if (ele.querySelector(selector.homepage.reprint_a)) {
                let reprint_id = Note_Obj.fn.getUserIdFromLink(ele.querySelector(selector.homepage.reprint_a).href);
                (! user_id || user_id == reprint_id) && note_obj.handler(reprint_id, ele, selector.homepage.reprint_name, {
                    'add': 'span',
                    'classname': 'note-obj-twitter-blue-tag'
                });
            }
            let blockquote_user = ele.querySelector(selector.homepage.blockquote);
            if (blockquote_user) {
                let blockquote_user_id = blockquote_user.querySelector(selector.homepage.id).textContent.replace(/^@/, '');
                if (blockquote_user_id == user_id) {
                    note_obj.doneHandle(user_id, blockquote_user, selector.homepage.show_name);
                }
                (! user_id || user_id == blockquote_user_id) && note_obj.handler(blockquote_user_id, blockquote_user, selector.homepage.show_name, {
                    'add': 'span',
                    'classname': 'note-obj-twitter-blue-tag'
                });
            }
            for (let at_user of ele.querySelectorAll(selector.homepage.at)) {
                let at_user_id = Note_Obj.fn.getUserIdFromLink(at_user.href, value => /^[^/]+$/i.test(value));
                (! user_id || user_id == at_user_id) && note_obj.judgeUsers(at_user_id) && note_obj.handler(at_user_id, at_user, null, {
                    'symbol': {
                        'prefix': '@'
                    }
                });
            }
        }
        for (let ele of document.querySelectorAll(selector.userpage.main)) {
            let ele_id = ele.querySelector(selector.userpage.id).textContent.replace(/^@/, '');
            (! user_id || user_id == ele_id) && note_obj.handler(ele_id, ele, selector.userpage.show_name, {
                'add': 'span',
                'classname': 'note-obj-twitter-blue-tag'
            });
        }
        for (let ele of document.querySelectorAll(selector.homepage.user_frame)) {
            let ele_id = ele.querySelector(selector.userpage.id).textContent.replace(/^@/, '');
            (! user_id || user_id == ele_id) && note_obj.handler(ele_id, ele, selector.homepage.show_name, {
                'add': 'span',
                'class': 'note-obj-twitter-blue-tag'
            });
        }
    }
    function init() {
        let note_obj = new Note_Obj('myTwitterNote', document.documentElement.lang);
        let arrive_option = {
            'fireOnAttributesModification': true,
            'existing': true
        };
        if (Note_Obj.fn.isMobilePage()) {
            selector = mobile_selector;
            document.querySelector(selector.root).arrive(selector.mobile.bootom_bar, arrive_option, function() {
                this.appendChild(note_obj.createSearchButton('note-obj-twitter-search-btn-mobile'));
            });
        }
        note_obj.init({
            'style': selector.homepage.show_name + ' { white-space: normal; }\n' + TWITTER_STYLE,
            'changeEvent': change_Event,
            'script': {
                'author': {
                    'name': 'pana',
                    'homepage': 'https://www.sailboatweb.com/'
                },
                'address': 'https://greasyfork.org/scripts/404587',
                'updated': '2020-8-22',
                'library': [
                    {
                        'name': 'Vue.js',
                        'version': '2.6.11',
                        'url': 'https://vuejs.org/'
                    },
                    {
                        'name': 'arrive.js',
                        'version': '2.4.1',
                        'url': 'https://github.com/uzairfarooq/arrive'
                    }
                ]
            },
            'CSP': true
        });
        document.querySelector(selector.root).arrive(selector.homepage.article, arrive_option, ele => {
            if (ele.querySelector(selector.homepage.id)) {
                let ele_id = ele.querySelector(selector.homepage.id).textContent.replace(/^@/, '');
                let ele_name = ele.querySelector(selector.homepage.show_name).textContent;
                if (Note_Obj.fn.isMobilePage()) {
                    ele.querySelector(selector.homepage.tool_bar) && ele.querySelector(selector.homepage.tool_bar).appendChild(note_obj.createNoteBtn(ele_id, ele_name, ['note-obj-twitter-note-btn', 'note-obj-twitter-base-tool-bar-btn-mobile', 'css-1dbjc4n']));
                }
                if (Note_Obj.fn.isMobilePage()) {
                    ele.querySelector(selector.comment.tool_bar) && ele.querySelector(selector.comment.tool_bar).appendChild(note_obj.createNoteBtn(ele_id, ele_name, ['note-obj-twitter-note-btn', 'note-obj-twitter-comment-tool-bar-btn-mobile', 'css-1dbjc4n']));
                }
                note_obj.judgeUsers(ele_id) && note_obj.handler(ele_id, ele, selector.homepage.show_name, {
                    'add': 'span',
                    'classname': 'note-obj-twitter-blue-tag'
                });
            }
            if (ele.querySelector(selector.homepage.reprint_a)) {
                let reprint_id = Note_Obj.fn.getUserIdFromLink(ele.querySelector(selector.homepage.reprint_a).href);
                note_obj.judgeUsers(reprint_id) && note_obj.handler(reprint_id, ele, selector.homepage.reprint_name, {
                    'add': 'span',
                    'classname': 'note-obj-twitter-blue-tag'
                });
            }
            let blockquote_user = ele.querySelector(selector.homepage.blockquote);
            if (blockquote_user) {
                let blockquote_user_id = blockquote_user.querySelector(selector.homepage.id).textContent.replace(/^@/, '');
                note_obj.judgeUsers(blockquote_user_id) && note_obj.handler(blockquote_user_id, blockquote_user, selector.homepage.show_name, {
                    'add': 'span',
                    'classname': 'note-obj-twitter-blue-tag'
                });
            }
            for (let at_user of ele.querySelectorAll(selector.homepage.at)) {
                let at_user_id = Note_Obj.fn.getUserIdFromLink(at_user.href, value => /^[^/]+$/i.test(value));
                note_obj.judgeUsers(at_user_id) && note_obj.handler(at_user_id, at_user, null, {
                    'symbol': {
                        'prefix': '@'
                    }
                });
            }
        });
        document.querySelector(selector.root).arrive(selector.userpage.main, arrive_option, ele => {
            let ele_id = ele.querySelector(selector.userpage.id).textContent.replace(/^@/, '');
            let ele_name = ele.querySelector(selector.userpage.show_name).textContent;
            var follow_note_btn;
            if (ele.querySelector(selector.userpage.follow)) {
                if (Note_Obj.fn.isMobilePage()) {
                    follow_note_btn = note_obj.createNoteBtn(ele_id, ele_name, ['note-obj-twitter-before-follow-note-btn', 'note-obj-twitter-before-follow-note-btn-mobile', 'css-901oao']);
                } else {
                    follow_note_btn = note_obj.createNoteBtn(ele_id, ele_name, ['note-obj-twitter-before-follow-note-btn', 'css-901oao']);
                }
                ele.querySelector(selector.userpage.follow).insertAdjacentElement('afterbegin', follow_note_btn);
            }
            note_obj.judgeUsers(ele_id) && note_obj.handler(ele_id, ele, selector.userpage.show_name, {
                'add': 'span',
                'classname': 'note-obj-twitter-blue-tag'
            });
            let user_id_change = new MutationObserver(() => {
                let new_user_id = ele.querySelector(selector.userpage.id).textContent.replace(/^@/, '');
                note_obj.handler('', ele, selector.userpage.show_name, {
                    'add': 'span',
                    'classname': 'note-obj-twitter-blue-tag'
                });
                let new_user_name = ele.querySelector(selector.userpage.show_name).textContent;
                if (follow_note_btn) {
                    follow_note_btn.remove();
                    if (Note_Obj.fn.isMobilePage()) {
                        follow_note_btn = note_obj.createNoteBtn(new_user_id, new_user_name, ['note-obj-twitter-before-follow-note-btn', 'note-obj-twitter-before-follow-note-btn-mobile', 'css-901oao']);
                    } else {
                        follow_note_btn = note_obj.createNoteBtn(new_user_id, new_user_name, ['note-obj-twitter-before-follow-note-btn', 'css-901oao']);
                    }
                    ele.querySelector(selector.userpage.follow).insertAdjacentElement('afterbegin', follow_note_btn);
                }
                note_obj.judgeUsers(new_user_id) && note_obj.handler(new_user_id, ele, selector.userpage.show_name, {
                    'add': 'span',
                    'classname': 'note-obj-twitter-blue-tag'
                });
            });
            user_id_change.observe(ele.querySelector(selector.userpage.main_user_id), {
                'subtree': true,
                'characterData': true
            });
        });
        document.querySelector(selector.root).arrive(selector.homepage.user_frame, arrive_option, ele => {
            let ele_id = ele.querySelector(selector.userpage.id).textContent.replace(/^@/, '');
            note_obj.judgeUsers(ele_id) && note_obj.handler(ele_id, ele, selector.homepage.show_name, {
                'add': 'span',
                'class': 'note-obj-twitter-blue-tag'
            });
        });
        document.querySelector(selector.root).arrive(selector.hover.panel, arrive_option, ele => {
            let ele_id = ele.querySelector(selector.hover.id).textContent.replace(/^@/, '');
            let user_show_name = ele.querySelector(selector.hover.show_name).textContent;
            ele.querySelector(selector.hover.follow_btn) && ele.querySelector(selector.hover.follow_btn).insertAdjacentElement('beforebegin', note_obj.createNoteBtn(ele_id, user_show_name, ['note-obj-twitter-note-btn', 'note-obj-twitter-base-tool-bar-btn']));
            note_obj.judgeUsers(ele_id) && note_obj.handler(ele_id, ele, selector.hover.show_name, {
                'add': 'span',
                'class': 'note-obj-twitter-blue-tag'
            });
        });
    }
    init();
})();