☰

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

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

当前为 2022-10-02 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name                Instagram为关注用户添加备注
  3. // @name:en             Instagram - Add notes(aliases/tags) to the user
  4. // @name:zh-CN          Instagram - 为用户添加备注(别名/标签)
  5. // @name:zh-TW          Instagram - 為用戶添加備註(別名/標籤)
  6. // @name:ja             Instagram - ユーザーへのメモの追加（エイリアス/ラベル）
  7. // @name:ko             Instagram - 사용자에게 메모 추가 (별칭/라벨)
  8. // @name:fr             Instagram - ajouter des notes aux utilisateurs (alias/tag)
  9. // @namespace           https://greasyfork.org/zh-CN/users/193133-pana
  10. // @homepage            https://greasyfork.org/zh-CN/users/193133-pana
  11. // @icon                data:image/svg+xml;base64,PHN2ZyByb2xlPSJpbWciIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjI0cHgiIGhlaWdodD0iMjRweCIgdmlld0JveD0iMCAwIDI0IDI0IiBhcmlhLWxhYmVsbGVkYnk9Im5ld0ljb25UaXRsZSIgc3Ryb2tlPSJyZ2JhKDI5LDE2MSwyNDIsMS4wMCkiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InNxdWFyZSIgc3Ryb2tlLWxpbmVqb2luPSJtaXRlciIgZmlsbD0ibm9uZSIgY29sb3I9InJnYmEoMjksMTYxLDI0MiwxLjAwKSI+IDx0aXRsZSBpZD0ibmV3SWNvblRpdGxlIj5OZXc8L3RpdGxlPiA8cGF0aCBkPSJNMTkgMTRWMjJIMi45OTk5N1Y0SDEzIi8+IDxwYXRoIGQ9Ik0xNy40NjA4IDQuMDM5MjFDMTguMjQxOCAzLjI1ODE3IDE5LjUwODIgMy4yNTgxNiAyMC4yODkyIDQuMDM5MjFMMjAuOTYwOCA0LjcxMDc5QzIxLjc0MTggNS40OTE4NCAyMS43NDE4IDYuNzU4MTcgMjAuOTYwOCA3LjUzOTIxTDExLjU4NTggMTYuOTE0MkMxMS4yMTA3IDE3LjI4OTMgMTAuNzAyIDE3LjUgMTAuMTcxNiAxNy41TDcuNSAxNy41TDcuNSAxNC44Mjg0QzcuNSAxNC4yOTggNy43MTA3MSAxMy43ODkzIDguMDg1NzkgMTMuNDE0MkwxNy40NjA4IDQuMDM5MjFaIi8+IDxwYXRoIGQ9Ik0xNi4yNSA1LjI1TDE5Ljc1IDguNzUiLz4gPC9zdmc+
  12. // @version             5.3.14
  13. // @description         为用户添加备注(别名/标签)功能，以帮助识别和搜索
  14. // @description:en      Add a note(alias/tag) for users to help identify and search
  15. // @description:zh-CN   为用户添加备注(别名/标签)功能，以帮助识别和搜索
  16. // @description:zh-TW   為用戶添加備註(別名/標籤)功能，以幫助識別和搜尋
  17. // @description:ja      ユーザーが識別と検索に役立つメモ(エイリアス/タグ)機能を追加する
  18. // @description:ko      사용자 식별 및 검색에 도움이되는 메모 (별칭/태그) 기능 추가
  19. // @description:fr      Ajouter une fonction de notes (alias/tag) pour les utilisateurs pour aider à identifier et rechercher
  20. // @license             GNU General Public License v3.0 or later
  21. // @compatible          chrome
  22. // @compatible          firefox
  23. // @author              pana
  24. // @match               *://*.instagram.com/*
  25. // @require             https://gcore.jsdelivr.net/npm/arrive@2.4.1/minified/arrive.min.js
  26. // @require             https://gcore.jsdelivr.net/npm/vue@2.7.10/dist/vue.min.js
  27. // @require             https://gcore.jsdelivr.net/gh/LightAPIs/greasy-fork-library@430413fcf3c682a97ee084d72bce96206ee7c64f/Note_Obj.js
  28. // @grant               GM_info
  29. // @grant               GM.info
  30. // @grant               GM_getValue
  31. // @grant               GM.getValue
  32. // @grant               GM_setValue
  33. // @grant               GM.setValue
  34. // @grant               GM_deleteValue
  35. // @grant               GM.deleteValue
  36. // @grant               GM_listValues
  37. // @grant               GM.listValues
  38. // @grant               GM_openInTab
  39. // @grant               GM.openInTab
  40. // @grant               GM_registerMenuCommand
  41. // @grant               GM_unregisterMenuCommand
  42. // @grant               GM_addValueChangeListener
  43. // @grant               GM_removeValueChangeListener
  44. // @noframes
  45. // ==/UserScript==
  46.  
  47. (async function () {
  48.   'use strict';
  49.   if (typeof Note_Obj !== 'function') {
  50.     alert('Note_Obj.js was not loaded successfully!');
  51.   }
  52.   const updated = '2022-10-02';
  53.   const INS_ICON = {
  54.     NOTE_BLACK:
  55.       'url(data:image/svg+xml;base64,PHN2ZyByb2xlPSJpbWciIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjI0cHgiIGhlaWdodD0iMjRweCIgdmlld0JveD0iMCAwIDI0IDI0IiBhcmlhLWxhYmVsbGVkYnk9Im5ld0ljb25UaXRsZSIgc3Ryb2tlPSJyZ2IoMzgsIDM4LCAzOCkiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InNxdWFyZSIgc3Ryb2tlLWxpbmVqb2luPSJtaXRlciIgZmlsbD0ibm9uZSIgY29sb3I9InJnYigzOCwgMzgsIDM4KSI+IDx0aXRsZSBpZD0ibmV3SWNvblRpdGxlIj5OZXc8L3RpdGxlPiA8cGF0aCBkPSJNMTkgMTRWMjJIMi45OTk5N1Y0SDEzIi8+IDxwYXRoIGQ9Ik0xNy40NjA4IDQuMDM5MjFDMTguMjQxOCAzLjI1ODE3IDE5LjUwODIgMy4yNTgxNiAyMC4yODkyIDQuMDM5MjFMMjAuOTYwOCA0LjcxMDc5QzIxLjc0MTggNS40OTE4NCAyMS43NDE4IDYuNzU4MTcgMjAuOTYwOCA3LjUzOTIxTDExLjU4NTggMTYuOTE0MkMxMS4yMTA3IDE3LjI4OTMgMTAuNzAyIDE3LjUgMTAuMTcxNiAxNy41TDcuNSAxNy41TDcuNSAxNC44Mjg0QzcuNSAxNC4yOTggNy43MTA3MSAxMy43ODkzIDguMDg1NzkgMTMuNDE0MkwxNy40NjA4IDQuMDM5MjFaIi8+IDxwYXRoIGQ9Ik0xNi4yNSA1LjI1TDE5Ljc1IDguNzUiLz4gPC9zdmc+)',
  56.     SERACH_BLUE:
  57.       'url(data:image/svg+xml;base64,PHN2ZyByb2xlPSJpbWciIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjI0cHgiIGhlaWdodD0iMjRweCIgdmlld0JveD0iMCAwIDI0IDI0IiBhcmlhLWxhYmVsbGVkYnk9InNlYXJjaEljb25UaXRsZSIgc3Ryb2tlPSJyZ2JhKDI5LDE2MSwyNDIsMS4wMCkiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InNxdWFyZSIgc3Ryb2tlLWxpbmVqb2luPSJtaXRlciIgZmlsbD0ibm9uZSIgY29sb3I9InJnYmEoMjksMTYxLDI0MiwxLjAwKSI+IDx0aXRsZSBpZD0ic2VhcmNoSWNvblRpdGxlIj5TZWFyY2g8L3RpdGxlPiA8cGF0aCBkPSJNMTQuNDEyMTEyMiwxNC40MTIxMTIyIEwyMCwyMCIvPiA8Y2lyY2xlIGN4PSIxMCIgY3k9IjEwIiByPSI2Ii8+IDwvc3ZnPg==)',
  58.   };
  59.   const INS_STYLE = `
  60.         .note-obj-ins-font-blue-color {
  61.             color: #336699;
  62.         }
  63.         .note-obj-ins-background-box {
  64.             display: inline-block;
  65.             align-items: center;
  66.             white-space: nowrap;
  67.             border-radius: 50px;
  68.             padding: 0px 10px;
  69.             background-color: #336699;
  70.             color: #fff;
  71.         }
  72.         .note-obj-ins-add-btn {
  73.             background-image: ${INS_ICON.NOTE_BLACK};
  74.             background-size: 24px;
  75.             background-repeat: no-repeat;
  76.             background-position: center;
  77.             margin-left: 5px;
  78.             cursor: pointer;
  79.             width: 24px;
  80.             height: 24px;
  81.         }
  82.         .note-obj-ins-homepage-btn {
  83.             margin: 6px !important;
  84.         }
  85.         .note-obj-ins-homepage-btn:hover {
  86.           opacity: 0.5;
  87.         }
  88.         .note-obj-ins-userpage-btn {
  89.             margin-top: 2px;
  90.         }
  91.         .note-obj-ins-userpage-tag {
  92.             display: block;
  93.             font-size: 20px;
  94.             margin-bottom: 20px;
  95.             white-space: nowrap;
  96.         }
  97.         .note-obj-ins-mobile-search-button {
  98.             background-image: ${INS_ICON.SERACH_BLUE};
  99.             background-size: 24px;
  100.             background-repeat: no-repeat;
  101.             background-position: center;
  102.             cursor: pointer;
  103.             min-width: 0px;
  104.             height: 100%;
  105.             flex: 1 1 auto;
  106.         }
  107.         .note-obj-ins-font-bold {
  108.             font-weight: bold;
  109.         }
  110.         .note-obj-veryins-blue-tag {
  111.             background-color: #3c81df;
  112.             color: #fff;
  113.             display: inline-flex;
  114.             align-items: center;
  115.             padding: 0px 10px;
  116.             white-space: nowrap;
  117.             line-height: 100%;
  118.             border-radius: 50px;
  119.             padding: 2px 10px;
  120.         }
  121.         .note-obj-veryins-userpage-btn {
  122.             display: inline-block;
  123.             vertical-align: middle;
  124.         }
  125.         .note-obj-ins-left-box {
  126.           height: 25%;
  127.         }
  128.         .note-obj-interface-dark .note-obj-settings-frame-card label {
  129.           color: #fff;
  130.         }
  131.     `;
  132.   const selector = {
  133.     body: 'body',
  134.     homepage: {
  135.       article: '[role="main"] article',
  136.       id: '._aaqt a',
  137.       icon: 'span._aamz',
  138.       comment_id: '._aap6._aap7._aap8 a',
  139.       comment_at: '._aat6 ._aade > .notranslate',
  140.     },
  141.     homepage_stories: {
  142.       id: '._aamb._aamc',
  143.       id_shell: '._aam8',
  144.     },
  145.     homepage_recommend: {
  146.       id: '._aak3 ._aap6._aap7._aap8 a',
  147.     },
  148.     user_page: {
  149.       frame: '._aa_h',
  150.       id: '._aa_m h2',
  151.       bar: '._aa_n',
  152.       box: '._aa_m',
  153.       common: 'span._aaai',
  154.       suggest: '._acj1 a.notranslate',
  155.       info_at: '.notranslate',
  156.       user_name: '._aa_c > span',
  157.     },
  158.     watch_list: {
  159.       initial_item: '[aria-labelledby]',
  160.       later_item: '._aaei',
  161.       id: '._aap6._aap7._aap8 a',
  162.     },
  163.     stories: {
  164.       id: 'a.notranslate',
  165.       id_shell: '._ac0q',
  166.     },
  167.     dialog: {
  168.       frame: '[role="dialog"] ._a3gq article',
  169.       comment_id: '._a9zm ._aap6._aap7._aap8 a',
  170.       comment_at: '._a9zs .notranslate',
  171.     },
  172.     request: {
  173.       follow: '._aajc ._aap6._aap7._aap8 a',
  174.     },
  175.     mobile: {
  176.       bottom_bar: '._abp7',
  177.     },
  178.     suggest: {
  179.       user: '._aa0- ._aap6._aap7._aap8 a',
  180.     },
  181.   };
  182.   function instagram_Change_Event(note_obj, user_id = undefined) {
  183.     for (const article of Note_Obj.fn.qDocAll(selector.homepage.article)) {
  184.       const articleUser = Note_Obj.fn.queryA(article, selector.homepage.id);
  185.       if (articleUser) {
  186.         const article_user_id = Note_Obj.fn.getUserIdFromLink(articleUser.href);
  187.         (!user_id || user_id == article_user_id) &&
  188.           note_obj.handler(article_user_id, articleUser, null, {
  189.             add: note_obj.getConfig().other.replaceHomepageID ? null : 'span',
  190.             classname: note_obj.getConfig().other.replaceHomepageID ? 'note-obj-ins-font-blue-color' : 'note-obj-ins-background-box',
  191.             title: note_obj.getConfig().other.replaceHomepageID,
  192.           });
  193.       }
  194.       for (const comment of Note_Obj.fn.qAllA(article, selector.homepage.comment_id)) {
  195.         const comment_id = Note_Obj.fn.getUserIdFromLink(comment.href);
  196.         (!user_id || user_id == comment_id) &&
  197.           note_obj.handler(comment_id, comment, null, {
  198.             classname: 'note-obj-ins-font-blue-color',
  199.           });
  200.       }
  201.       for (const comment_at of Note_Obj.fn.qAllA(article, selector.homepage.comment_at)) {
  202.         const comment_at_id = Note_Obj.fn.getUserIdFromLink(comment_at.href);
  203.         (!user_id || user_id == comment_at_id) &&
  204.           note_obj.handler(comment_at_id, comment_at, null, {
  205.             symbol: {
  206.               prefix: '@',
  207.             },
  208.             title: true,
  209.             classname: 'note-obj-ins-font-blue-color',
  210.           });
  211.       }
  212.       for (const pic_comment_user of Note_Obj.fn.qAllA(article, selector.dialog.comment_id)) {
  213.         const pic_comment_id = Note_Obj.fn.getUserIdFromLink(pic_comment_user.href);
  214.         (!user_id || user_id == pic_comment_id) &&
  215.           note_obj.handler(pic_comment_id, pic_comment_user, null, {
  216.             title: true,
  217.             classname: 'note-obj-ins-font-blue-color',
  218.           });
  219.       }
  220.       for (const pic_comment_at of Note_Obj.fn.qAllA(article, selector.dialog.comment_at)) {
  221.         if (!pic_comment_at.classList.contains(selector.homepage.comment_id.replace(/^\.|\s+.*$/g, ''))) {
  222.           const pic_comment_at_id = Note_Obj.fn.getUserIdFromLink(pic_comment_at.href);
  223.           (!user_id || user_id == pic_comment_at_id) &&
  224.             note_obj.handler(pic_comment_at_id, pic_comment_at, null, {
  225.               symbol: {
  226.                 prefix: '@',
  227.               },
  228.               title: true,
  229.               classname: 'note-obj-ins-font-blue-color',
  230.             });
  231.         }
  232.       }
  233.     }
  234.     for (const homepage_stories of Note_Obj.fn.qDocAll(selector.homepage_stories.id_shell)) {
  235.       const homepageStoriesId = homepage_stories.querySelector(selector.homepage_stories.id);
  236.       if (homepageStoriesId) {
  237.         const homepageStoriesIdVal = homepageStoriesId.textContent;
  238.         if (!user_id || user_id == homepageStoriesIdVal) {
  239.           homepage_stories.title = note_obj.getUserTag(homepageStoriesIdVal);
  240.         }
  241.       }
  242.     }
  243.     for (const homepage_recommend of Note_Obj.fn.qDocAllA(selector.homepage_recommend.id)) {
  244.       const homepage_recommend_id = Note_Obj.fn.getUserIdFromLink(homepage_recommend.href);
  245.       (!user_id || user_id == homepage_recommend_id) &&
  246.         note_obj.handler(homepage_recommend_id, homepage_recommend, null, {
  247.           classname: 'note-obj-ins-font-blue-color',
  248.         });
  249.     }
  250.     for (const user_page of document.querySelectorAll(selector.user_page.frame)) {
  251.       const userPageId = user_page.querySelector(selector.user_page.id);
  252.       if (userPageId) {
  253.         const userPageIdVal = userPageId.textContent;
  254.         if (!user_id || user_id == userPageIdVal) {
  255.           const user_page_tag = user_page.querySelector('.note-obj-user-tag');
  256.           user_page_tag && user_page_tag.remove();
  257.           const userPageBox = user_page.querySelector(selector.user_page.box);
  258.           if (userPageIdVal && note_obj.judgeUsers(userPageIdVal) && userPageBox) {
  259.             userPageBox.after(
  260.               note_obj.createNoteTag(
  261.                 userPageIdVal,
  262.                 {
  263.                   secondaryColor: false,
  264.                   offsetWidth: -20,
  265.                 },
  266.                 'div',
  267.                 ['note-obj-ins-userpage-tag', 'note-obj-ins-font-blue-color', 'note-obj-ins-font-bold']
  268.               )
  269.             );
  270.           }
  271.         }
  272.       }
  273.       for (const common_user of Note_Obj.fn.qAll(user_page, selector.user_page.common)) {
  274.         const common_user_id = common_user.textContent;
  275.         if (!user_id || user_id == common_user_id) {
  276.           if (note_obj.judgeUsers(common_user_id)) {
  277.             common_user.title = note_obj.getUserTag(common_user_id);
  278.             if (note_obj.getShowNoteColorConfig()) {
  279.               common_user.style.setProperty('color', note_obj.getPrimaryColor(common_user_id), 'important');
  280.             } else {
  281.               common_user.style.setProperty('color', '');
  282.             }
  283.             common_user.classList.add('note-obj-ins-font-blue-color');
  284.           } else {
  285.             (common_user.title = ''), common_user.style.setProperty('color', '');
  286.             common_user.classList.remove('note-obj-ins-font-blue-color');
  287.           }
  288.         }
  289.       }
  290.       for (const info_at_user of Note_Obj.fn.qAllA(user_page, selector.user_page.info_at)) {
  291.         const info_at_user_id = Note_Obj.fn.getUserIdFromLink(info_at_user.href);
  292.         (!user_id || user_id == info_at_user_id) &&
  293.           note_obj.handler(info_at_user_id, info_at_user, null, {
  294.             symbol: {
  295.               prefix: '@',
  296.             },
  297.             classname: 'note-obj-ins-font-blue-color',
  298.             title: true,
  299.           });
  300.       }
  301.     }
  302.     for (const stories_shell of document.querySelectorAll(selector.stories.id_shell)) {
  303.       const stories = Note_Obj.fn.queryA(stories_shell, selector.stories.id);
  304.       if (stories) {
  305.         const stories_user_id = Note_Obj.fn.getUserIdFromLink(stories.href);
  306.         (!user_id || user_id == stories_user_id) &&
  307.           note_obj.handler(stories_user_id, stories, null, {
  308.             classname: 'note-obj-ins-font-blue-color',
  309.           });
  310.       }
  311.     }
  312.     for (const initial of document.querySelectorAll(selector.watch_list.initial_item)) {
  313.       const initial_item = Note_Obj.fn.queryA(initial, selector.watch_list.id);
  314.       if (initial_item) {
  315.         const initial_item_id = Note_Obj.fn.getUserIdFromLink(initial_item.href);
  316.         (!user_id || user_id == initial_item_id) &&
  317.           note_obj.handler(initial_item_id, initial_item, null, {
  318.             classname: 'note-obj-ins-font-blue-color',
  319.           });
  320.       }
  321.     }
  322.     for (const later of document.querySelectorAll(selector.watch_list.later_item)) {
  323.       const later_item = Note_Obj.fn.queryA(later, selector.watch_list.id);
  324.       if (later_item) {
  325.         const later_item_id = Note_Obj.fn.getUserIdFromLink(later_item.href);
  326.         (!user_id || user_id == later_item_id) &&
  327.           note_obj.handler(later_item_id, later_item, null, {
  328.             classname: 'note-obj-ins-font-blue-color',
  329.           });
  330.       }
  331.     }
  332.     for (const dialog of document.querySelectorAll(selector.dialog.frame)) {
  333.       const dialog_a = Note_Obj.fn.queryA(dialog, selector.homepage.id);
  334.       if (dialog_a) {
  335.         const dialog_a_id = Note_Obj.fn.getUserIdFromLink(dialog_a.href);
  336.         (!user_id || user_id == dialog_a_id) &&
  337.           note_obj.handler(dialog_a_id, dialog_a, null, {
  338.             title: true,
  339.             classname: 'note-obj-ins-font-blue-color',
  340.           });
  341.       }
  342.       for (const like of Note_Obj.fn.qAllA(dialog, selector.homepage.comment_id)) {
  343.         const like_id = Note_Obj.fn.getUserIdFromLink(like.href);
  344.         (!user_id || user_id == like_id) &&
  345.           note_obj.judgeUsers(like_id) &&
  346.           note_obj.handler(like_id, like, null, {
  347.             classname: 'note-obj-ins-font-blue-color',
  348.           });
  349.       }
  350.       for (const comment_user of Note_Obj.fn.qAllA(dialog, selector.dialog.comment_id)) {
  351.         const comment_id = Note_Obj.fn.getUserIdFromLink(comment_user.href);
  352.         (!user_id || user_id == comment_id) &&
  353.           note_obj.handler(comment_id, comment_user, null, {
  354.             classname: 'note-obj-ins-font-blue-color',
  355.             title: true,
  356.           });
  357.       }
  358.       for (const comment_at of Note_Obj.fn.qAllA(dialog, selector.dialog.comment_at)) {
  359.         const comment_at_id = Note_Obj.fn.getUserIdFromLink(comment_at.href);
  360.         (!user_id || user_id == comment_at_id) &&
  361.           note_obj.handler(comment_at_id, comment_at, null, {
  362.             symbol: {
  363.               prefix: '@',
  364.             },
  365.             classname: 'note-obj-ins-font-blue-color',
  366.             title: true,
  367.           });
  368.       }
  369.     }
  370.     for (const follow of Note_Obj.fn.qDocAllA(selector.request.follow)) {
  371.       const follow_user_id = Note_Obj.fn.getUserIdFromLink(follow.href);
  372.       (!user_id || user_id == follow_user_id) &&
  373.         note_obj.handler(follow_user_id, follow, null, {
  374.           classname: 'note-obj-ins-font-blue-color',
  375.         });
  376.     }
  377.     for (const suggest_user of Note_Obj.fn.qDocAllA(selector.suggest.user)) {
  378.       const suggest_user_id = Note_Obj.fn.getUserIdFromLink(suggest_user.href);
  379.       (!user_id || user_id == suggest_user_id) &&
  380.         note_obj.handler(suggest_user_id, suggest_user, null, {
  381.           classname: 'note-obj-ins-font-blue-color',
  382.         });
  383.     }
  384.     for (const suggest of Note_Obj.fn.qDocAllA(selector.user_page.suggest)) {
  385.       const suggest_user_id = Note_Obj.fn.getUserIdFromLink(suggest.href);
  386.       (!user_id || user_id == suggest_user_id) &&
  387.         note_obj.handler(suggest_user_id, suggest, null, {
  388.           classname: 'note-obj-ins-font-blue-color',
  389.         });
  390.     }
  391.   }
  392.   function instagram_Homepage_Event(newValue, oldValue) {
  393.     if (newValue != oldValue) {
  394.       for (const article of document.querySelectorAll(selector.homepage.article)) {
  395.         const article_user = Note_Obj.fn.queryA(article, selector.homepage.id);
  396.         if (article_user) {
  397.           const article_user_id = Note_Obj.fn.getUserIdFromLink(article_user.href);
  398.           note_obj.handler(article_user_id, article_user, null, {
  399.             add: oldValue ? null : 'span',
  400.             classname: oldValue ? 'note-obj-ins-font-blue-color' : 'note-obj-ins-background-box',
  401.             title: oldValue,
  402.             restore: true,
  403.           });
  404.           note_obj.handler(article_user_id, article_user, null, {
  405.             add: newValue ? null : 'span',
  406.             classname: newValue ? 'note-obj-ins-font-blue-color' : 'note-obj-ins-background-box',
  407.             title: newValue,
  408.           });
  409.         }
  410.       }
  411.     }
  412.   }
  413.   function init_Instagram(note_obj) {
  414.     const arrive_option = {
  415.       fireOnAttributesModification: true,
  416.       existing: true,
  417.     };
  418.     Note_Obj.fn.isMobilePage() &&
  419.       document.body.arrive(selector.mobile.bottom_bar, arrive_option, item =>
  420.         item.appendChild(note_obj.createSearchButton('note-obj-ins-mobile-search-button'))
  421.       );
  422.     document.body.arrive(selector.homepage.article, arrive_option, article => {
  423.       const article_user = Note_Obj.fn.queryA(article, selector.homepage.id);
  424.       if (article_user) {
  425.         const article_user_id = Note_Obj.fn.getUserIdFromLink(article_user.href);
  426.         note_obj.judgeUsers(article_user_id) &&
  427.           note_obj.handler(article_user_id, article_user, null, {
  428.             add: note_obj.getConfig().other.replaceHomepageID ? null : 'span',
  429.             classname: note_obj.getConfig().other.replaceHomepageID ? 'note-obj-ins-font-blue-color' : 'note-obj-ins-background-box',
  430.             title: note_obj.getConfig().other.replaceHomepageID,
  431.           });
  432.         const homepageIcon = article.querySelector(selector.homepage.icon);
  433.         homepageIcon &&
  434.           homepageIcon.insertAdjacentElement(
  435.             'beforebegin',
  436.             note_obj.createNoteBtn(article_user_id, null, ['note-obj-ins-add-btn', 'note-obj-ins-homepage-btn'], 'span')
  437.           );
  438.       }
  439.       for (const comment of Note_Obj.fn.qAllA(article, selector.homepage.comment_id)) {
  440.         const comment_id = Note_Obj.fn.getUserIdFromLink(comment.href);
  441.         note_obj.judgeUsers(comment_id) &&
  442.           note_obj.handler(comment_id, comment, null, {
  443.             classname: 'note-obj-ins-font-blue-color',
  444.           });
  445.       }
  446.       article.arrive(selector.homepage.comment_at, arrive_option, comment_at => {
  447.         const comment_at_id = Note_Obj.fn.getUserIdFromLink(comment_at.href);
  448.         note_obj.judgeUsers(comment_at_id) &&
  449.           note_obj.handler(comment_at_id, comment_at, null, {
  450.             symbol: {
  451.               prefix: '@',
  452.             },
  453.             title: true,
  454.             classname: 'note-obj-ins-font-blue-color',
  455.           });
  456.       });
  457.       article.arrive(selector.dialog.comment_id, arrive_option, pic_comment_user => {
  458.         const pic_comment_id = Note_Obj.fn.getUserIdFromLink(pic_comment_user.href);
  459.         note_obj.judgeUsers(pic_comment_id) &&
  460.           note_obj.handler(pic_comment_id, pic_comment_user, null, {
  461.             title: true,
  462.             classname: 'note-obj-ins-font-blue-color',
  463.           });
  464.       });
  465.       article.arrive(selector.dialog.comment_at, arrive_option, pic_comment_at => {
  466.         if (!pic_comment_at.classList.contains(selector.homepage.comment_id.replace(/^\.|\s+.*$/g, ''))) {
  467.           const pic_comment_at_id = Note_Obj.fn.getUserIdFromLink(pic_comment_at.href);
  468.           note_obj.judgeUsers(pic_comment_at_id) &&
  469.             note_obj.handler(pic_comment_at_id, pic_comment_at, null, {
  470.               symbol: {
  471.                 prefix: '@',
  472.               },
  473.               title: true,
  474.               classname: 'note-obj-ins-font-blue-color',
  475.             });
  476.         }
  477.       });
  478.     });
  479.     document.body.arrive(selector.homepage_stories.id_shell, arrive_option, homepage_stories => {
  480.       const homepageStoriesId = homepage_stories.querySelector(selector.homepage_stories.id);
  481.       if (homepageStoriesId) {
  482.         const homepage_stories_id = homepageStoriesId.textContent;
  483.         if (note_obj.judgeUsers(homepage_stories_id)) {
  484.           homepage_stories.title = note_obj.getUserTag(homepage_stories_id);
  485.         }
  486.       }
  487.     });
  488.     document.body.arrive(selector.homepage_recommend.id, arrive_option, homepage_recommend => {
  489.       const homepage_recommend_id = Note_Obj.fn.getUserIdFromLink(homepage_recommend.href);
  490.       note_obj.judgeUsers(homepage_recommend_id) &&
  491.         note_obj.handler(homepage_recommend_id, homepage_recommend, null, {
  492.           classname: 'note-obj-ins-font-blue-color',
  493.         });
  494.     });
  495.     document.body.arrive(selector.user_page.frame, arrive_option, user_page => {
  496.       const userPageId = user_page.querySelector(selector.user_page.id);
  497.       if (userPageId) {
  498.         const user_page_id = userPageId.textContent;
  499.         const user_name = user_page.querySelector(selector.user_page.user_name);
  500.         let user_name_text = '';
  501.         if (user_name) {
  502.           user_name_text = user_name.textContent;
  503.         }
  504.         const userPageBar = user_page.querySelector(selector.user_page.bar);
  505.         user_page_id &&
  506.           userPageBar &&
  507.           userPageBar.after(note_obj.createNoteBtn(user_page_id, user_name_text, ['note-obj-ins-add-btn', 'note-obj-ins-userpage-btn']));
  508.         const userPageBox = user_page.querySelector(selector.user_page.box);
  509.         user_page_id &&
  510.           note_obj.judgeUsers(user_page_id) &&
  511.           userPageBox &&
  512.           userPageBox.after(
  513.             note_obj.createNoteTag(
  514.               user_page_id,
  515.               {
  516.                 secondaryColor: false,
  517.                 offsetWidth: -20,
  518.               },
  519.               'div',
  520.               ['note-obj-ins-userpage-tag', 'note-obj-ins-font-blue-color', 'note-obj-ins-font-bold'],
  521.               user_name_text
  522.             )
  523.           );
  524.       }
  525.       for (const common_user of Note_Obj.fn.qAll(user_page, selector.user_page.common)) {
  526.         const common_user_id = common_user.textContent;
  527.         if (note_obj.judgeUsers(common_user_id)) {
  528.           common_user.title = note_obj.getUserTag(common_user_id);
  529.           note_obj.getShowNoteColorConfig() &&
  530.             common_user.style.setProperty('color', note_obj.getPrimaryColor(common_user_id), 'important');
  531.           common_user.classList.add('note-obj-ins-font-blue-color');
  532.         }
  533.       }
  534.       for (const info_at_user of Note_Obj.fn.qAllA(user_page, selector.user_page.info_at)) {
  535.         const info_at_user_id = Note_Obj.fn.getUserIdFromLink(info_at_user.href);
  536.         note_obj.judgeUsers(info_at_user_id) &&
  537.           note_obj.handler(info_at_user_id, info_at_user, null, {
  538.             symbol: {
  539.               prefix: '@',
  540.             },
  541.             classname: 'note-obj-ins-font-blue-color',
  542.             title: true,
  543.           });
  544.       }
  545.     });
  546.     document.body.arrive(selector.stories.id_shell, arrive_option, stories_shell => {
  547.       const stories = Note_Obj.fn.queryA(stories_shell, selector.stories.id);
  548.       if (stories) {
  549.         const stories_user_id = Note_Obj.fn.getUserIdFromLink(stories.href);
  550.         note_obj.judgeUsers(stories_user_id) &&
  551.           note_obj.handler(stories_user_id, stories, null, {
  552.             classname: 'note-obj-ins-font-blue-color',
  553.           });
  554.       }
  555.       const userIdChange = new MutationObserver(() => {
  556.         const newUserId = Note_Obj.fn.getUserIdFromLink(stories.href);
  557.         if (note_obj.judgeUsers(newUserId)) {
  558.           note_obj.handler(newUserId, stories, null, {
  559.             classname: 'note-obj-ins-font-blue-color',
  560.           });
  561.         } else {
  562.           note_obj.handler(newUserId, stories, null, {
  563.             restore: true,
  564.           });
  565.         }
  566.       });
  567.       userIdChange.observe(stories, {
  568.         attributeFilter: ['href'],
  569.       });
  570.     });
  571.     const sBody = document.querySelector(selector.body);
  572.     if (sBody) {
  573.       sBody.arrive(selector.watch_list.initial_item, arrive_option, initial => {
  574.         const initial_item = Note_Obj.fn.queryA(initial, selector.watch_list.id);
  575.         if (initial_item) {
  576.           const initial_item_id = Note_Obj.fn.getUserIdFromLink(initial_item.href);
  577.           note_obj.judgeUsers(initial_item_id) &&
  578.             note_obj.handler(initial_item_id, initial_item, null, {
  579.               classname: 'note-obj-ins-font-blue-color',
  580.             });
  581.         }
  582.       });
  583.       sBody.arrive(selector.watch_list.later_item, arrive_option, later => {
  584.         const later_item = Note_Obj.fn.queryA(later, selector.watch_list.id);
  585.         if (later_item) {
  586.           const later_item_id = Note_Obj.fn.getUserIdFromLink(later_item.href);
  587.           note_obj.judgeUsers(later_item_id) &&
  588.             note_obj.handler(later_item_id, later_item, null, {
  589.               classname: 'note-obj-ins-font-blue-color',
  590.             });
  591.         }
  592.       });
  593.       sBody.arrive(selector.dialog.frame, arrive_option, dialog => {
  594.         const dialog_a = Note_Obj.fn.queryA(dialog, selector.homepage.id);
  595.         if (dialog_a) {
  596.           const dialog_a_id = Note_Obj.fn.getUserIdFromLink(dialog_a.href);
  597.           note_obj.judgeUsers(dialog_a_id) &&
  598.             note_obj.handler(dialog_a_id, dialog_a, null, {
  599.               title: true,
  600.               classname: 'note-obj-ins-font-blue-color',
  601.             });
  602.           const homepageIcon = dialog.querySelector(selector.homepage.icon);
  603.           homepageIcon &&
  604.             homepageIcon.insertAdjacentElement(
  605.               'beforebegin',
  606.               note_obj.createNoteBtn(dialog_a_id, null, ['note-obj-ins-add-btn', 'note-obj-ins-homepage-btn'], 'span')
  607.             );
  608.         }
  609.         for (const like of Note_Obj.fn.qAllA(dialog, selector.homepage.comment_id)) {
  610.           const like_id = Note_Obj.fn.getUserIdFromLink(like.href);
  611.           note_obj.judgeUsers(like_id) &&
  612.             note_obj.handler(like_id, like, null, {
  613.               classname: 'note-obj-ins-font-blue-color',
  614.             });
  615.         }
  616.         dialog.arrive(selector.dialog.comment_id, arrive_option, comment_user => {
  617.           const comment_id = Note_Obj.fn.getUserIdFromLink(comment_user.href);
  618.           note_obj.judgeUsers(comment_id) &&
  619.             note_obj.handler(comment_id, comment_user, null, {
  620.               classname: 'note-obj-ins-font-blue-color',
  621.               title: true,
  622.             });
  623.         });
  624.         dialog.arrive(selector.dialog.comment_at, arrive_option, comment_at => {
  625.           const comment_at_id = Note_Obj.fn.getUserIdFromLink(comment_at.href);
  626.           note_obj.judgeUsers(comment_at_id) &&
  627.             note_obj.handler(comment_at_id, comment_at, null, {
  628.               symbol: {
  629.                 prefix: '@',
  630.               },
  631.               classname: 'note-obj-ins-font-blue-color',
  632.               title: true,
  633.             });
  634.         });
  635.       });
  636.     }
  637.     document.body.arrive(selector.request.follow, arrive_option, follow => {
  638.       const follow_user_id = Note_Obj.fn.getUserIdFromLink(follow.href);
  639.       note_obj.judgeUsers(follow_user_id) &&
  640.         note_obj.handler(follow_user_id, follow, null, {
  641.           classname: 'note-obj-ins-font-blue-color',
  642.         });
  643.     });
  644.     document.body.arrive(selector.suggest.user, arrive_option, suggest_user => {
  645.       const suggest_user_id = Note_Obj.fn.getUserIdFromLink(suggest_user.href);
  646.       note_obj.judgeUsers(suggest_user_id) &&
  647.         note_obj.handler(suggest_user_id, suggest_user, null, {
  648.           classname: 'note-obj-ins-font-blue-color',
  649.         });
  650.     });
  651.     document.body.arrive(selector.user_page.suggest, arrive_option, suggest => {
  652.       const suggest_user_id = Note_Obj.fn.getUserIdFromLink(suggest.href);
  653.       note_obj.judgeUsers(suggest_user_id) &&
  654.         note_obj.handler(suggest_user_id, suggest, null, {
  655.           classname: 'note-obj-ins-font-blue-color',
  656.         });
  657.     });
  658.   }
  659.   const note_obj = new Note_Obj('myInstagramNote');
  660.   await note_obj.init({
  661.     style: INS_STYLE,
  662.     changeEvent: instagram_Change_Event,
  663.     script: {
  664.       author: {
  665.         name: 'pana',
  666.         homepage: 'https://greasyfork.org/zh-CN/users/193133-pana',
  667.       },
  668.       address: 'https://greasyfork.org/scripts/387871',
  669.       updated: updated,
  670.       library: [
  671.         {
  672.           name: 'arrive.js',
  673.           version: '2.4.1',
  674.           url: 'https://github.com/uzairfarooq/arrive',
  675.         },
  676.       ],
  677.     },
  678.     primaryColor: '#336699',
  679.     settings: {
  680.       replaceHomepageID: {
  681.         type: 'checkbox',
  682.         lang: {
  683.           en: 'Allow to replace the user ID on the instagram homepage',
  684.           zh_cn: '允许替换 Instagram 首页上的用户 ID',
  685.           zh_tw: '允許替換 Instagram 首頁上的用戶 ID',
  686.           ja: 'Instagram ホームページのユーザーIDの置き換えを許可する',
  687.           ko: 'Instagram 첫 페이지에 있는 사용자 ID 바꾸기 허용',
  688.           fr: "Permettre de remplacer l'ID utilisateur sur la page d'accueil Instagram",
  689.         },
  690.         default: true,
  691.         event: instagram_Homepage_Event,
  692.       },
  693.     },
  694.     leftBtnBoxClassName: 'note-obj-ins-left-box',
  695.   });
  696.   init_Instagram(note_obj);
  697. })();