☰

Instagram - 为用户添加备注

为用户添加备注功能，以帮助识别和搜索

当前为 2020-05-28 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name                Instagram为关注用户添加备注
  3. // @name:en             Instagram - Add a note to the user
  4. // @name:zh-CN          Instagram - 为用户添加备注
  5. // @name:zh-TW          Instagram - 為使用者新增備註
  6. // @name:ja             Instagram - ユーザーに備考を加える
  7. // @name:ko             Instagram - 사용자에 대한 주석 추가
  8. // @namespace           https://greasyfork.org/zh-CN/users/193133-pana
  9. // @homepage            https://www.sailboatweb.com
  10. // @icon                data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4KICA8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0yMCwxNSBMMjAsNCBMNCw0IEw0LDIwIEwxNSwyMCBMMTUsMTcgQzE1LDE1Ljg5NTQzMDUgMTUuODk1NDMwNSwxNSAxNywxNSBMMjAsMTUgWiBNMTkuNTg1Nzg2NCwxNyBMMTcsMTcgTDE3LDE5LjU4NTc4NjQgTDE5LjU4NTc4NjQsMTcgWiBNNCwyMiBDMi44OTU0MzA1LDIyIDIsMjEuMTA0NTY5NSAyLDIwIEwyLDQgQzIsMi44OTU0MzA1IDIuODk1NDMwNSwyIDQsMiBMMjAsMiBDMjEuMTA0NTY5NSwyIDIyLDIuODk1NDMwNSAyMiw0IEwyMiwxNy40MTQyMTM2IEwxNy40MTQyMTM2LDIyIEw0LDIyIFogTTcsMTcgTDcsMTUgTDEzLDE1IEwxMywxNyBMNywxNyBaIE03LDEzIEw3LDExIEwxNywxMSBMMTcsMTMgTDcsMTMgWiBNNyw5IEw3LDcgTDE3LDcgTDE3LDkgTDcsOSBaIi8+Cjwvc3ZnPgo=
  11. // @version             2.1.1
  12. // @description         为用户添加备注功能，以帮助识别和搜索
  13. // @description:en      Add a note for users to help identify and search
  14. // @description:zh-CN   为用户添加备注功能，以帮助识别和搜索
  15. // @description:zh-TW   為使用者新增備註功能，以幫助識別和搜尋
  16. // @description:ja      ユーザーに備考機能を追加し、識別と検索を助ける
  17. // @description:ko      식별 및 검색에 도움이 되는 사용자에 대한 주석 추가 기능
  18. // @license             GNU General Public License v3.0 or later
  19. // @author              pana
  20. // @include             http*://www.instagram.com/*
  21. // @require             https://code.jquery.com/jquery-3.4.1.min.js
  22. // @require             https://cdnjs.cloudflare.com/ajax/libs/arrive/2.4.1/arrive.min.js
  23. // @grant               GM_getValue
  24. // @grant               GM_setValue
  25. // ==/UserScript==
  26.  
  27. (function() {
  28.     'use strict';
  29.     const LANG = {
  30.         ZH: {
  31.             div_title: '备注',
  32.             input_placeholder: '(请输入备注，置空时删除；按下Enter键保存)',
  33.             save_button_text: '保存',
  34.             clear_button_text: '清除',
  35.             cancel_button_text: '取消',
  36.             search_placeholder: '搜索备注',
  37.         },
  38.         ZH_TW: {
  39.             div_title: '備註',
  40.             input_placeholder: '(請輸入備註，置空時刪除；按下Enter鍵儲存)',
  41.             save_button_text: '儲存',
  42.             clear_button_text: '清除',
  43.             cancel_button_text: '取消',
  44.             search_placeholder: '搜尋備註',
  45.         },
  46.         EN: {
  47.             div_title: 'Note',
  48.             input_placeholder: '(Enter a note, delete it when blanked; press Enter to save)',
  49.             save_button_text: 'Save',
  50.             clear_button_text: 'Clear',
  51.             cancel_button_text: 'Cancel',
  52.             search_placeholder: 'Search notes',
  53.         },
  54.         JA: {
  55.             div_title: '備考',
  56.             input_placeholder: '(注を入力して、空にした時に削除してください。)',
  57.             save_button_text: '保存する',
  58.             clear_button_text: 'クリア',
  59.             cancel_button_text: 'キャンセル',
  60.             search_placeholder: '検索備考',
  61.         },
  62.         KO: {
  63.             div_title: '주석',
  64.             input_placeholder: '(메모를 입력하십시오. 비어 있을 때 삭제하십시오. )',
  65.             save_button_text: '보존',
  66.             clear_button_text: '제거',
  67.             cancel_button_text: '취소',
  68.             search_placeholder: '검색 노트',
  69.         },
  70.     };
  71.     var lang_value = {
  72.         div_title: 'Note',
  73.         input_placeholder: '(Enter a note, delete it when blanked; press Enter to save)',
  74.         save_button_text: 'Save',
  75.         clear_button_text: 'Clear',
  76.         cancel_button_text: 'Cancel',
  77.         search_placeholder: 'Search notes',
  78.     };
  79.     var selector = {
  80.         'body': 'body',
  81.         'root': '#react-root',
  82.         'search': {
  83.             'frame': '.LWmhU'
  84.         },
  85.         'homepage': {
  86.             'article': 'article',
  87.             'id': '.e1e1d a',
  88.             'id_shell': '.e1e1d',
  89.             'icon': 'span.wmtNn',
  90.             'comment_id': '.FPmhX'
  91.         },
  92.         'homepage_stories': {
  93.             'id': '.eebAO',
  94.             'id_shell': '.Fd_fQ',
  95.         },
  96.         'homepage_recommend': {
  97.             'id': '._8UZ6e .fDxYl a'
  98.         },
  99.         'user_page': {
  100.             'frame': '.zwlfE',
  101.             'id': '.KV-D4',
  102.             'bar': '.AFWDX',
  103.             'box': '.nZSzR',
  104.             'common': 'span._32eiM'
  105.         },
  106.         'stories': {
  107.             'id': '.FPmhX',
  108.             'id_shell': '.yn6BW'
  109.         },
  110.         'watch_list': {
  111.             'initial_item': '.isgrP li',
  112.             'later_item': '.d7ByH',
  113.             'id': 'a.FPmhX'
  114.         }
  115.     };
  116.     var instagram_config = {
  117.         user_array: [],
  118.     };
  119.     var show_list = [];
  120.     const PAGE_REG = {
  121.         HOMEPAGE: /^https?:\/\/www\.instagram\.com\/?(\?[a-z]+=[a-z-]+)?$/i,
  122.         USER_PAGE: /^https?:\/\/www\.instagram\.com\/[^/]*\/?(\?[a-z]+=[a-z-]+)?$/i,
  123.         STORIES: /^https?:\/\/www\.instagram\.com\/stories\/[^/]*\/?(\?[a-z]+=[a-z-]+)?$/i,
  124.         PIC: /^https?:\/\/www\.instagram\.com\/p\//i
  125.     };
  126.     const ICON = {
  127.         TAGS: 'url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4KICA8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0yMCwxNSBMMjAsNCBMNCw0IEw0LDIwIEwxNSwyMCBMMTUsMTcgQzE1LDE1Ljg5NTQzMDUgMTUuODk1NDMwNSwxNSAxNywxNSBMMjAsMTUgWiBNMTkuNTg1Nzg2NCwxNyBMMTcsMTcgTDE3LDE5LjU4NTc4NjQgTDE5LjU4NTc4NjQsMTcgWiBNNCwyMiBDMi44OTU0MzA1LDIyIDIsMjEuMTA0NTY5NSAyLDIwIEwyLDQgQzIsMi44OTU0MzA1IDIuODk1NDMwNSwyIDQsMiBMMjAsMiBDMjEuMTA0NTY5NSwyIDIyLDIuODk1NDMwNSAyMiw0IEwyMiwxNy40MTQyMTM2IEwxNy40MTQyMTM2LDIyIEw0LDIyIFogTTcsMTcgTDcsMTUgTDEzLDE1IEwxMywxNyBMNywxNyBaIE03LDEzIEw3LDExIEwxNywxMSBMMTcsMTMgTDcsMTMgWiBNNyw5IEw3LDcgTDE3LDcgTDE3LDkgTDcsOSBaIi8+Cjwvc3ZnPgo=)',
  128.         DOWN_ARROW: 'url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTkuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeD0iMHB4IiB5PSIwcHgiIHZpZXdCb3g9IjAgMCA0OTEuOTk2IDQ5MS45OTYiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDQ5MS45OTYgNDkxLjk5NjsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8Zz4KCTxnPgoJCTxwYXRoIGQ9Ik00ODQuMTMyLDEyNC45ODZsLTE2LjExNi0xNi4yMjhjLTUuMDcyLTUuMDY4LTExLjgyLTcuODYtMTkuMDMyLTcuODZjLTcuMjA4LDAtMTMuOTY0LDIuNzkyLTE5LjAzNiw3Ljg2bC0xODMuODQsMTgzLjg0OCAgICBMNjIuMDU2LDEwOC41NTRjLTUuMDY0LTUuMDY4LTExLjgyLTcuODU2LTE5LjAyOC03Ljg1NnMtMTMuOTY4LDIuNzg4LTE5LjAzNiw3Ljg1NmwtMTYuMTIsMTYuMTI4ICAgIGMtMTAuNDk2LDEwLjQ4OC0xMC40OTYsMjcuNTcyLDAsMzguMDZsMjE5LjEzNiwyMTkuOTI0YzUuMDY0LDUuMDY0LDExLjgxMiw4LjYzMiwxOS4wODQsOC42MzJoMC4wODQgICAgYzcuMjEyLDAsMTMuOTYtMy41NzIsMTkuMDI0LTguNjMybDIxOC45MzItMjE5LjMyOGM1LjA3Mi01LjA2NCw3Ljg1Ni0xMi4wMTYsNy44NjQtMTkuMjI0ICAgIEM0OTEuOTk2LDEzNi45MDIsNDg5LjIwNCwxMzAuMDQ2LDQ4NC4xMzIsMTI0Ljk4NnoiLz4KCTwvZz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K)',
  129.         UP_ARROW: 'url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTkuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeD0iMHB4IiB5PSIwcHgiIHZpZXdCb3g9IjAgMCA0OTIuMDAyIDQ5Mi4wMDIiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDQ5Mi4wMDIgNDkyLjAwMjsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8Zz4KCTxnPgoJCTxwYXRoIGQ9Ik00ODQuMTM2LDMyOC40NzNMMjY0Ljk4OCwxMDkuMzI5Yy01LjA2NC01LjA2NC0xMS44MTYtNy44NDQtMTkuMTcyLTcuODQ0Yy03LjIwOCwwLTEzLjk2NCwyLjc4LTE5LjAyLDcuODQ0ICAgIEw3Ljg1MiwzMjguMjY1QzIuNzg4LDMzMy4zMzMsMCwzNDAuMDg5LDAsMzQ3LjI5N2MwLDcuMjA4LDIuNzg0LDEzLjk2OCw3Ljg1MiwxOS4wMzJsMTYuMTI0LDE2LjEyNCAgICBjNS4wNjQsNS4wNjQsMTEuODI0LDcuODYsMTkuMDMyLDcuODZzMTMuOTY0LTIuNzk2LDE5LjAzMi03Ljg2bDE4My44NTItMTgzLjg1MmwxODQuMDU2LDE4NC4wNjQgICAgYzUuMDY0LDUuMDYsMTEuODIsNy44NTIsMTkuMDMyLDcuODUyYzcuMjA4LDAsMTMuOTYtMi43OTIsMTkuMDI4LTcuODUybDE2LjEyOC0xNi4xMzIgICAgQzQ5NC42MjQsMzU2LjA0MSw0OTQuNjI0LDMzOC45NjUsNDg0LjEzNiwzMjguNDczeiIvPgoJPC9nPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+Cjwvc3ZnPgo=)',
  130.     };
  131.     const STYLE_VALUE = `
  132.         .ins_visible {
  133.             overflow: visible !important;
  134.         }
  135.         .ins_tag_p {
  136.             margin-left: 5px;
  137.             color: #336699;
  138.             white-space: nowrap;
  139.         }
  140.         .ins_tag_a {
  141.             background-image: ${ICON.TAGS};
  142.             background-repeat: no-repeat;
  143.             background-position: center;
  144.             margin-left: 5px;
  145.             cursor: pointer;
  146.         }
  147.         .ins_homepage_icon {
  148.             width: 24px;
  149.             height: 24px;
  150.             background-size: 24px;
  151.             margin-top: 8px;
  152.         }
  153.         .ins_user_page_icon {
  154.             width: 24px;
  155.             height: 24px;
  156.             background-size: 24px;
  157.             margin-top: 2px;
  158.         }
  159.         .presentation_div_for_user {
  160.             display: flex;
  161.             position: fixed;
  162.             background-color: rgba(0, 0, 0, .5);
  163.             top: 0;
  164.             bottom: 0;
  165.             left: 0;
  166.             right: 0;
  167.             z-index: 1;
  168.             align-items: center;
  169.             justify-content: center;
  170.         }
  171.         .dialog_div_for_user {
  172.             position: relative;
  173.             width: 400px;
  174.             background-color: #fff;
  175.             border: 0 solid #000;
  176.             border-radius: 12px;
  177.         }
  178.         .user_title_span_for_user {
  179.             min-height: 48px;
  180.             text-align: center;
  181.             border: 1px solid #efefef;
  182.             color: #003399;
  183.             font-wight: bold;
  184.             background-color: rgba(0, 0, 0, 0);
  185.             border-top-left-radius: 12px;
  186.             border-top-right-radius: 12px;
  187.         }
  188.         .tag_input_for_user {
  189.             min-height: 32px;
  190.             margin: 5px;
  191.             border: 1px solid #cc6666;
  192.             padding-left: 5px;
  193.         }
  194.         .button_for_user {
  195.             min-height: 48px;
  196.             cursor: pointer;
  197.             border: 1px solid #efefef;
  198.             background-color: rgba(0, 0, 0, 0);
  199.         }
  200.         .cancel_button_for_user {
  201.             border-bottom-left-radius: 12px;
  202.             border-bottom-right-radius: 12px;
  203.         }
  204.         #searchFrame {
  205.             position: relative;
  206.             margin-left: 15px;
  207.         }
  208.         #myInputSearch {
  209.             width: 200px;
  210.             height: 25px;
  211.             border: 1px solid #999;
  212.             border-radius: 3px;
  213.             padding: 0 3px;
  214.             position: relative;
  215.         }
  216.         #dropDowns {
  217.             width: 15px;
  218.             height: 15px;
  219.             background-repeat: no-repeat;
  220.             background-size: 12px auto;
  221.             position: absolute;
  222.             top: 8px;
  223.             right: 2px;
  224.         }
  225.         .ins_down_arrow {
  226.             background-image: ${ICON.DOWN_ARROW};
  227.         }
  228.         .ins_up_arrow {
  229.             background-image: ${ICON.UP_ARROW};
  230.         }
  231.         #tagsList {
  232.             width: 208px;
  233.             height: 218px;
  234.             overflow-y: scroll;
  235.             text-align: left;
  236.             border: 1px solid #999;
  237.             display: none;
  238.             position: absolute;
  239.             top: 27px;
  240.             background-color: #fff;
  241.         }
  242.         .ins_list_item {
  243.             cursor: pointer;
  244.         }
  245.         .ins_highlight {
  246.             background-color: #6699cc;
  247.         }
  248.         .ins_hide {
  249.             display: none;
  250.         }
  251.         .ins_tag_div {
  252.             color: #336699;
  253.             margin-bottom: 20px;
  254.             font-size: 18px;
  255.         }
  256.         .ins_tag_span {
  257.             margin-left: 5px;
  258.             color: #336699;
  259.         }
  260.         .font_size_14 {
  261.             font-size: 14px;
  262.         }
  263.         .font_blue_color {
  264.             color: #336699 !important;
  265.         }
  266.     `;
  267.     function judge_User(user_title) {
  268.         for (let i = 0; i < instagram_config.user_array.length; i ++) {
  269.             if (user_title === instagram_config.user_array[i].user_id) {
  270.                 return i;
  271.             }
  272.         }
  273.         return -1;
  274.     }
  275.     function write_User(user_title, input_tag) {
  276.         let judge_value = judge_User(user_title);
  277.         if (judge_value !== -1) {
  278.             if (input_tag) {
  279.                 instagram_config.user_array[judge_value].user_tag = input_tag;
  280.             } else {
  281.                 instagram_config.user_array.splice(judge_value, 1);
  282.             }
  283.         } else {
  284.             if (input_tag) {
  285.                 let temp_user_obj = {
  286.                     user_id: user_title,
  287.                     user_tag: input_tag,
  288.                 };
  289.                 instagram_config.user_array.push(temp_user_obj);
  290.             }
  291.         }
  292.         GM_setValue('instagram_config', instagram_config);
  293.     }
  294.     function create_Add_Input_Div(user_title) {
  295.         let presentation_div = document.createElement('div');
  296.         presentation_div.className = 'presentation_div_for_user';
  297.         presentation_div.addEventListener('click', function (event) {
  298.             if (event.target === this) {
  299.                 $('.presentation_div_for_user').remove();
  300.             }
  301.         });
  302.         let dialog_div = document.createElement('div');
  303.         dialog_div.className = 'dialog_div_for_user';
  304.         let user_title_p = document.createElement('button');
  305.         user_title_p.className = 'user_title_span_for_user';
  306.         user_title_p.innerText = user_title;
  307.         let tag_input = document.createElement('input');
  308.         tag_input.className = 'tag_input_for_user';
  309.         tag_input.type = 'text';
  310.         tag_input.placeholder = lang_value.input_placeholder;
  311.         let judge_value = judge_User(user_title);
  312.         if (judge_value !== -1) {
  313.             tag_input.value = instagram_config.user_array[judge_value].user_tag;
  314.         } else {
  315.             tag_input.value = '';
  316.         }
  317.         $(tag_input).keyup(function (e) { 
  318.             if (e.keyCode === 13) {
  319.                 write_User(user_title, $('.tag_input_for_user').val());
  320.                 save_Update_Event(user_title);
  321.                 $('.presentation_div_for_user').remove();
  322.             }
  323.         });
  324.         setTimeout(function() {
  325.             try {
  326.                 tag_input.focus();
  327.                 tag_input.select();
  328.             } catch (e) {
  329.                 console.log(e);
  330.             }
  331.         }, 200);
  332.         let save_button = document.createElement('button');
  333.         save_button.className = 'button_for_user';
  334.         save_button.type = 'button';
  335.         save_button.innerText = lang_value.save_button_text;
  336.         save_button.addEventListener('click', function () {
  337.             write_User(user_title, $('.tag_input_for_user').val());
  338.             save_Update_Event(user_title);
  339.             $('.presentation_div_for_user').remove();
  340.         });
  341.         let clear_button = document.createElement('button');
  342.         clear_button.className = 'button_for_user';
  343.         clear_button.type = 'button';
  344.         clear_button.innerText = lang_value.clear_button_text;
  345.         clear_button.addEventListener('click', function() {
  346.             write_User(user_title, '');
  347.             save_Update_Event(user_title);
  348.             $('.presentation_div_for_user').remove();
  349.         });
  350.         let cancel_button = document.createElement('button');
  351.         cancel_button.className = 'button_for_user cancel_button_for_user';
  352.         cancel_button.type = 'button';
  353.         cancel_button.innerText = lang_value.cancel_button_text;
  354.         cancel_button.addEventListener('click', function (_event) {
  355.             $('.presentation_div_for_user').remove();
  356.         });
  357.         dialog_div.appendChild(user_title_p);
  358.         dialog_div.appendChild(tag_input);
  359.         dialog_div.appendChild(save_button);
  360.         dialog_div.appendChild(clear_button);
  361.         dialog_div.appendChild(cancel_button);
  362.         presentation_div.appendChild(dialog_div);
  363.         return presentation_div;
  364.     }
  365.     function create_Add_Tags_Icon(user_title, an_class_name) {
  366.         let tags_div = document.createElement('div');
  367.         tags_div.className = 'ins_tag_a';
  368.         tags_div.classList.add(an_class_name);
  369.         tags_div.title = lang_value.div_title;
  370.         tags_div.addEventListener('click', function () {
  371.             document.body.appendChild(create_Add_Input_Div(user_title));
  372.         });
  373.         return tags_div;
  374.     }
  375.     function create_Add_Tag_P(tag_string) {
  376.         let tag_p = document.createElement('p');
  377.         tag_p.className = 'ins_tag_p';
  378.         tag_p.innerText = '[' + tag_string + ']';
  379.         return tag_p;
  380.     }
  381.     function create_Add_Tag_Span(tag_string, an_class_name) {
  382.         let tag_span = document.createElement('span');
  383.         tag_span.className = 'ins_tag_span';
  384.         tag_span.classList.add(an_class_name);
  385.         tag_span.innerText = '[' + tag_string + ']';
  386.         return tag_span;
  387.     }
  388.     function create_Add_Tag_Div(tag_string) {
  389.         let tag_div = document.createElement('div');
  390.         tag_div.className = 'ins_tag_div';
  391.         tag_div.innerText = '[' + tag_string + ']';
  392.         return tag_div;
  393.     }
  394.     function create_List_Div(id_number, user_obj) {
  395.         let list_div = document.createElement('div');
  396.         list_div.id = 'tags_' + id_number;
  397.         list_div.className = 'ins_list_item';
  398.         list_div.innerText = user_obj.user_tag;
  399.         $(list_div).mouseenter(function() {
  400.             $(this).addClass('ins_highlight').siblings().removeClass('ins_highlight');
  401.         });
  402.         $(list_div).on('click', function () {
  403.             window.location.href = 'https://www.instagram.com/' + user_obj.user_id + '/';
  404.         });
  405.         return list_div;
  406.     }
  407.     function create_Search_Frame() {
  408.         let search_frame = document.createElement('div');
  409.         search_frame.id = 'searchFrame';
  410.         let search_input = document.createElement('input');
  411.         search_input.id = 'myInputSearch';
  412.         search_input.type = 'text';
  413.         search_input.placeholder = lang_value.search_placeholder;
  414.         search_input.value = "";
  415.         $(search_input).focus(function () {
  416.             $('#tagsList').show();
  417.             let arrow = $('#dropDowns');
  418.             arrow.removeClass('ins_down_arrow');
  419.             arrow.addClass('ins_up_arrow');
  420.             search_Event(search_input);
  421.         });
  422.         search_frame.appendChild(search_input);
  423.         let dropdowns = document.createElement('div');
  424.         dropdowns.id = 'dropDowns';
  425.         dropdowns.className = 'ins_down_arrow';
  426.         $(dropdowns).click(function () {
  427.             $(this).parent().find('#tagsList').toggle();
  428.             $(this).toggleClass('ins_up_arrow');
  429.             $(this).toggleClass('ins_down_arrow');
  430.         });
  431.         search_frame.appendChild(dropdowns);
  432.         let tags_list = document.createElement('div');
  433.         tags_list.id = 'tagsList';
  434.         $.each(instagram_config.user_array, function (index, item) {
  435.             tags_list.appendChild(create_List_Div(index, item));
  436.         });
  437.         search_frame.appendChild(tags_list);
  438.         document.body.onclick = function(e){
  439.             e = e || window.event;
  440.             let target = e.target || e.srcElement;
  441.             if(target !== $('#dropDowns')[0] && target !== $('#tagsList')[0] && target !== $('#myInputSearch')[0]){
  442.                 $('#tagsList').hide();
  443.                 let arrow = $('#dropDowns');
  444.                 arrow.removeClass('ins_up_arrow');
  445.                 arrow.addClass('ins_down_arrow');
  446.             }
  447.         };
  448.         return search_frame;
  449.     }
  450.     function search_Event(input_dom) {
  451.         let list_arr = [];
  452.         $.each($('#tagsList div'), function (_index, item) {
  453.             let arr_obj = {
  454.                 ele_container: item.innerText,
  455.                 ele: item,
  456.             };
  457.             list_arr.push(arr_obj);
  458.         });
  459.         let current_index = 0;
  460.         $(input_dom).keyup(function (event) {
  461.             $('#tagsList').show();
  462.             let arrow = $('#dropDowns');
  463.             arrow.removeClass('ins_down_arrow');
  464.             arrow.addClass('ins_up_arrow');
  465.             if (event.keyCode === 38) {
  466.                 event.returnValue = false;
  467.             } else if (event.keyCode === 40) {
  468.                 event.returnValue = false;
  469.             } else if (event.keyCode === 37) {
  470.                 event.returnValue = false;
  471.             } else if (event.keyCode === 39) {
  472.                 event.returnValue = false;
  473.             } else if (event.keyCode === 13) {
  474.                 $(show_list[current_index]).click();
  475.             } else {
  476.                 let search_val = $(this).val();
  477.                 show_list = [];
  478.                 $.each(list_arr, function (_index, item) {
  479.                     if (item.ele_container.indexOf(search_val) !== -1) {
  480.                         item.ele.classList.remove('ins_hide');
  481.                         show_list.push(item.ele);
  482.                     } else {
  483.                         item.ele.classList.add('ins_hide');
  484.                     }
  485.                 });
  486.                 current_index = 0;
  487.             }
  488.             $.each(show_list, function (index, item) {
  489.                 if (index === current_index) {
  490.                     item.classList.add('ins_highlight');
  491.                     $('#tagsList').scrollTop(item.offsetTop);
  492.                 } else {
  493.                     item.classList.remove('ins_highlight');
  494.                 }
  495.             });
  496.             let list_height = $('#tagsList div:first').height() * show_list.length;
  497.             if (list_height < 218) {
  498.                 $('#tagsList').height(list_height);
  499.             } else {
  500.                 $('#tagsList').height(218);
  501.             }
  502.         });
  503.         $(input_dom).keydown(function (event) {
  504.             if (event.keyCode === 38) {
  505.                 current_index--;
  506.                 if (current_index < 0) {
  507.                     current_index = 0;
  508.                 }
  509.             } else if (event.keyCode === 40) {
  510.                 current_index++;
  511.                 if (current_index >= show_list.length) {
  512.                     current_index = show_list.length - 1;
  513.                 }
  514.             }
  515.             $.each(show_list, function (index, item) {
  516.                 if (index === current_index) {
  517.                     item.classList.add('ins_highlight');
  518.                     $('#tagsList').scrollTop(item.offsetTop);
  519.                 } else {
  520.                     item.classList.remove('ins_highlight');
  521.                 }
  522.             });
  523.         });
  524.     }
  525.     function homepage_Event(dom_container) {
  526.         let old_url = location.href;
  527.         let user_title = $(dom_container).find(selector.homepage.id).text();
  528.         let judge_value = judge_User(user_title);
  529.         if (judge_value !== -1) {
  530.             if (PAGE_REG.HOMEPAGE.test(old_url)) {
  531.                 $(dom_container).find(selector.homepage.id_shell).append(create_Add_Tag_P(instagram_config.user_array[judge_value].user_tag));
  532.             } else if (PAGE_REG.PIC.test(old_url)) {
  533.                 $(dom_container).find(selector.homepage.id).attr('title', instagram_config.user_array[judge_value].user_tag).addClass('font_blue_color');
  534.             }
  535.         }
  536.         $(dom_container).find(selector.homepage.icon).before(create_Add_Tags_Icon(user_title, 'ins_homepage_icon'));
  537.         $(dom_container).find(selector.homepage.id_shell).addClass('ins_visible');
  538.         $(dom_container).find(selector.homepage.comment_id).each(function (_index, item) {
  539.             let comment_title = $(item).attr('href').replace(/^\/|\/$/gi, '');
  540.             let comment_judge_value = judge_User(comment_title);
  541.             if (comment_judge_value !== -1) {
  542.                 $(item).attr('title', instagram_config.user_array[comment_judge_value].user_tag).addClass('font_blue_color');
  543.             }
  544.         });
  545.     }
  546.     function homepage_Stories_Event(dom_container) {
  547.         let user_title = $(dom_container).find(selector.homepage_stories.id).text();
  548.         let judge_value = judge_User(user_title);
  549.         if (judge_value !== -1) {
  550.             $(dom_container).attr('title', instagram_config.user_array[judge_value].user_tag);
  551.         }
  552.     }
  553.     function homepage_Recommend_Event(dom_container) {
  554.         let user_title = $(dom_container).attr('href').replace(/^\/|\/$/gi, '');
  555.         let judge_value = judge_User(user_title);
  556.         if (judge_value !== -1) {
  557.             $(dom_container).attr('title', instagram_config.user_array[judge_value].user_tag);
  558.         }
  559.     }
  560.     function user_Page_Event(selector_container) {
  561.         let user_title = selector_container.find(selector.user_page.id).text();
  562.         selector_container.find(selector.user_page.bar).after(create_Add_Tags_Icon(user_title, 'ins_user_page_icon'));
  563.         let judge_value = judge_User(user_title);
  564.         if (judge_value !== -1) {
  565.             selector_container.find(selector.user_page.box).after(create_Add_Tag_Div(instagram_config.user_array[judge_value].user_tag));
  566.         }
  567.         $.each(selector_container.find(selector.user_page.common), function (_index, item) {
  568.             let em_user_title = item.innerText;
  569.             let em_judge_value = judge_User(em_user_title);
  570.             if (em_judge_value !== -1) {
  571.                 item.title = instagram_config.user_array[em_judge_value].user_tag;
  572.                 item.classList.add('font_blue_color');
  573.             }
  574.         });
  575.     }
  576.     function stories_Page_Event(selector_container) {
  577.         let user_title = selector_container.find(selector.stories.id).text();
  578.         let judge_value = judge_User(user_title);
  579.         if (judge_value !== -1) {
  580.             selector_container.append(create_Add_Tag_Span(instagram_config.user_array[judge_value].user_tag, 'font_size_14'));
  581.         }
  582.     }
  583.     function follow_Page_Event(selector_container) {
  584.         if (selector_container.find('.ins_tag_span').length === 0) {
  585.             let user_title = selector_container.find(selector.watch_list.id).attr('href').replace(/^\/|\/$/gi, '');
  586.             let judge_value = judge_User(user_title);
  587.             if (judge_value !== -1)  {
  588.                 selector_container.find(selector.watch_list.id).attr('title', instagram_config.user_array[judge_value].user_tag).addClass('font_blue_color');
  589.             }
  590.         }
  591.     }
  592.     function save_Update_Event(user_title) {
  593.         let old_url = location.href;
  594.         let tags_list = $('#tagsList');
  595.         if (tags_list.length === 1) {
  596.             tags_list.empty();
  597.             $.each(instagram_config.user_array, function (index, item) {
  598.                 tags_list.append(create_List_Div(index, item));
  599.             });
  600.         }
  601.         if (PAGE_REG.HOMEPAGE.test(old_url)) {
  602.             $.each($(selector.homepage.article), function (_index, item) {
  603.                 let page_user_title = $(item).find(selector.homepage.id).text();
  604.                 if (user_title === page_user_title) {
  605.                     let judge_value = judge_User(user_title);
  606.                     if (judge_value !== -1) {
  607.                         if ($(item).find('p.ins_tag_p').length !== 0) {
  608.                             $(item).find('p.ins_tag_p').text('[' + instagram_config.user_array[judge_value].user_tag + ']');
  609.                         } else {
  610.                             $(item).find(selector.homepage.id_shell).append(create_Add_Tag_P(instagram_config.user_array[judge_value].user_tag));
  611.                         }
  612.                     } else {
  613.                         if ($(item).find('p.ins_tag_p').length !== 0) {
  614.                             $(item).find('p.ins_tag_p').remove();
  615.                         }
  616.                     }
  617.                 }
  618.                 $(item).find(selector.homepage.comment_id).each(function (_index, ele_item) {
  619.                     let comment_title = $(ele_item).attr('href').replace(/^\/|\/$/gi, '');
  620.                     let comment_judge_value = judge_User(comment_title);
  621.                     if (comment_judge_value !== -1) {
  622.                         $(ele_item).attr('title', instagram_config.user_array[comment_judge_value].user_tag).addClass('font_blue_color');
  623.                     } else {
  624.                         $(ele_item).attr('title', comment_title).removeClass('font_blue_color');
  625.                     }
  626.                 });
  627.             });
  628.             $.each($(selector.homepage_stories.id_shell), function (_index, item) {
  629.                 let page_user_title = $(item).find(selector.homepage_stories.id).text();
  630.                 if (user_title === page_user_title) {
  631.                     let judge_value = judge_User(user_title);
  632.                     if (judge_value !== -1) {
  633.                         $(item).attr('title', instagram_config.user_array[judge_value].user_tag);
  634.                     } else {
  635.                         $(item).attr('title', '');
  636.                     }
  637.                 }
  638.             });
  639.         } else if (PAGE_REG.USER_PAGE.test(old_url)) {
  640.             let judge_value = judge_User(user_title);
  641.             if (judge_value !== -1) {
  642.                 if ($('.ins_tag_div').length !== 0) {
  643.                     $('.ins_tag_div').text('[' + instagram_config.user_array[judge_value].user_tag + ']');
  644.                 } else {
  645.                     $(selector.user_page.box).after(create_Add_Tag_Div(instagram_config.user_array[judge_value].user_tag));
  646.                 }
  647.             } else {
  648.                 if ($('.ins_tag_div').length !== 0) {
  649.                     $('.ins_tag_div').remove();
  650.                 }
  651.             }
  652.         } else if (PAGE_REG.PIC.test(old_url)) {
  653.             $.each($(selector.homepage.article), function (_index, item) {
  654.                 let pic_judge_value = judge_User(user_title);
  655.                 if (pic_judge_value !== -1) {
  656.                     $(item).find(selector.homepage.id).attr('title', instagram_config.user_array[pic_judge_value].user_tag).addClass('font_blue_color');
  657.                 } else {
  658.                     $(item).find(selector.homepage.id).attr('title', '').removeClass('font_blue_color');
  659.                 }
  660.             });
  661.         }
  662.     }
  663.     function set_Language(lang_string) {
  664.         switch (lang_string) {
  665.             case 'zh':
  666.             case 'zh-cn':
  667.                 lang_value = LANG.ZH;
  668.                 break;
  669.             case 'zh-hk':
  670.             case 'zh-tw':
  671.                 lang_value = LANG.ZH_TW;
  672.                 break;
  673.             case 'en':
  674.                 lang_value = LANG.EN;
  675.                 break;
  676.             case 'ja':
  677.                 lang_value = LANG.JA;
  678.                 break;
  679.             case 'ko':
  680.                 lang_value = LANG.KO;
  681.                 break;
  682.             default:
  683.                 lang_value = LANG.EN;
  684.                 break;
  685.         }
  686.         instagram_config.lang_value = lang_value;
  687.         GM_setValue('instagram_config', instagram_config);
  688.     }
  689.     function init() {
  690.         let style_dom = document.createElement('style');
  691.         style_dom.type = 'text/css';
  692.         style_dom.innerHTML = STYLE_VALUE;
  693.         document.body.appendChild(style_dom);
  694.         if (instagram_config.lang_value) {
  695.             lang_value = instagram_config.lang_value;
  696.         } else {
  697.             set_Language($('html:first').attr('lang'));
  698.         }
  699.         $(selector.search.frame).after(create_Search_Frame());
  700.         $(selector.root).arrive(selector.search.frame, function () {
  701.             $(this).after(create_Search_Frame());
  702.         });
  703.         $.each($(selector.homepage.article), function (_index, item) {
  704.             homepage_Event(item);
  705.         });
  706.         setTimeout(function () {
  707.             $.each($(selector.homepage_stories.id_shell), function (_index, item) {
  708.                 homepage_Stories_Event(item);
  709.             });
  710.         }, 1000);
  711.         setTimeout(function () {
  712.             $.each($(selector.homepage_recommend.id), function (_index, item) {
  713.                 homepage_Recommend_Event(item);
  714.             });
  715.         }, 1000);
  716.         $(selector.root).arrive(selector.homepage.article, function () {
  717.             homepage_Event(this);
  718.         });
  719.         $(selector.root).arrive(selector.homepage_stories.id_shell, function () {
  720.             homepage_Stories_Event(this);
  721.         });
  722.         $(selector.root).arrive(selector.homepage_recommend.id, function () {
  723.             homepage_Recommend_Event(this);
  724.         });
  725.         if ($(selector.user_page.frame).length !== 0) {
  726.             user_Page_Event($(selector.user_page.frame));
  727.         }
  728.         $(selector.root).arrive(selector.user_page.frame, function () {
  729.             user_Page_Event($(this));
  730.         });
  731.         if ($(selector.stories.id_shell).length !== 0) {
  732.             stories_Page_Event($(selector.stories.id_shell));
  733.         }
  734.         $(selector.root).arrive(selector.stories.id_shell, function () {
  735.             stories_Page_Event($(this));
  736.         });
  737.         $(selector.body).arrive(selector.watch_list.initial_item, {onceOnly: true}, function () {
  738.             follow_Page_Event($(this));
  739.         });
  740.         $(selector.body).arrive(selector.watch_list.later_item, function () {
  741.             follow_Page_Event($(this));
  742.         });
  743.     }
  744.     Promise.all([GM_getValue('instagram_config')]).then(function (data) {
  745.         if (data[0] !== undefined) {
  746.             instagram_config = data[0];
  747.         }
  748.         init();
  749.     }).catch(function(e) {
  750.         console.error('Error reading value.');
  751.         console.error(e);
  752.     });
  753. })();