☰

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

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

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

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