☰

Instagram - 为用户添加备注

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

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

  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.0.0
  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. // @author              pana
  19. // @include             http*://www.instagram.com/*
  20. // @require             https://code.jquery.com/jquery-3.4.1.min.js
  21. // @require             https://cdnjs.cloudflare.com/ajax/libs/arrive/2.4.1/arrive.min.js
  22. // @grant               GM_getValue
  23. // @grant               GM_setValue
  24. // ==/UserScript==
  25.  
  26. (function() {
  27. 	'use strict';
  28. 	const LANG = {
  29. 		ZH: {
  30. 			div_title: '备注',
  31. 			input_placeholder: '(请输入备注，置空时删除；按下Enter键保存)',
  32. 			save_button_text: '保存',
  33. 			clear_button_text: '清除',
  34. 			cancel_button_text: '取消',
  35. 			search_placeholder: '搜索备注',
  36. 		},
  37. 		ZH_TW: {
  38. 			div_title: '備註',
  39. 			input_placeholder: '(請輸入備註，置空時刪除；按下Enter鍵儲存)',
  40. 			save_button_text: '儲存',
  41. 			clear_button_text: '清除',
  42. 			cancel_button_text: '取消',
  43. 			search_placeholder: '搜尋備註',
  44. 		},
  45. 		EN: {
  46. 			div_title: 'Note',
  47. 			input_placeholder: '(Enter a note, delete it when blanked; press Enter to save)',
  48. 			save_button_text: 'Save',
  49. 			clear_button_text: 'Clear',
  50. 			cancel_button_text: 'Cancel',
  51. 			search_placeholder: 'Search notes',
  52. 		},
  53. 		JA: {
  54. 			div_title: '備考',
  55. 			input_placeholder: '(注を入力して、空にした時に削除してください。)',
  56. 			save_button_text: '保存する',
  57. 			clear_button_text: 'クリア',
  58. 			cancel_button_text: 'キャンセル',
  59. 			search_placeholder: '検索備考',
  60. 		},
  61. 		KO: {
  62. 			div_title: '주석',
  63. 			input_placeholder: '(메모를 입력하십시오. 비어 있을 때 삭제하십시오. )',
  64. 			save_button_text: '보존',
  65. 			clear_button_text: '제거',
  66. 			cancel_button_text: '취소',
  67. 			search_placeholder: '검색 노트',
  68. 		},
  69. 	};
  70. 	var lang_value = {
  71. 		div_title: 'Note',
  72. 		input_placeholder: '(Enter a note, delete it when blanked; press Enter to save)',
  73. 		save_button_text: 'Save',
  74. 		clear_button_text: 'Clear',
  75. 		cancel_button_text: 'Cancel',
  76. 		search_placeholder: 'Search notes',
  77. 	};
  78. 	var instagram_config = {
  79. 		user_array: [],
  80. 	};
  81. 	var show_list = [];
  82. 	const PAGE_REG = {
  83. 		HOMEPAGE: /^https?:\/\/www\.instagram\.com\/?(\?[a-z]+=[a-z-]+)?$/i,
  84. 		USER_PAGE: /^https?:\/\/www\.instagram\.com\/[^/]*\/?(\?[a-z]+=[a-z-]+)?$/i,
  85. 		STORIES: /^https?:\/\/www\.instagram\.com\/stories\/[^/]*\/?(\?[a-z]+=[a-z-]+)?$/i,
  86. 	};
  87. 	const ICON = {
  88. 		TAGS: 'url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4KICA8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0yMCwxNSBMMjAsNCBMNCw0IEw0LDIwIEwxNSwyMCBMMTUsMTcgQzE1LDE1Ljg5NTQzMDUgMTUuODk1NDMwNSwxNSAxNywxNSBMMjAsMTUgWiBNMTkuNTg1Nzg2NCwxNyBMMTcsMTcgTDE3LDE5LjU4NTc4NjQgTDE5LjU4NTc4NjQsMTcgWiBNNCwyMiBDMi44OTU0MzA1LDIyIDIsMjEuMTA0NTY5NSAyLDIwIEwyLDQgQzIsMi44OTU0MzA1IDIuODk1NDMwNSwyIDQsMiBMMjAsMiBDMjEuMTA0NTY5NSwyIDIyLDIuODk1NDMwNSAyMiw0IEwyMiwxNy40MTQyMTM2IEwxNy40MTQyMTM2LDIyIEw0LDIyIFogTTcsMTcgTDcsMTUgTDEzLDE1IEwxMywxNyBMNywxNyBaIE03LDEzIEw3LDExIEwxNywxMSBMMTcsMTMgTDcsMTMgWiBNNyw5IEw3LDcgTDE3LDcgTDE3LDkgTDcsOSBaIi8+Cjwvc3ZnPgo=)',
  89. 		DOWN_ARROW: 'url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTkuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeD0iMHB4IiB5PSIwcHgiIHZpZXdCb3g9IjAgMCA0OTEuOTk2IDQ5MS45OTYiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDQ5MS45OTYgNDkxLjk5NjsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8Zz4KCTxnPgoJCTxwYXRoIGQ9Ik00ODQuMTMyLDEyNC45ODZsLTE2LjExNi0xNi4yMjhjLTUuMDcyLTUuMDY4LTExLjgyLTcuODYtMTkuMDMyLTcuODZjLTcuMjA4LDAtMTMuOTY0LDIuNzkyLTE5LjAzNiw3Ljg2bC0xODMuODQsMTgzLjg0OCAgICBMNjIuMDU2LDEwOC41NTRjLTUuMDY0LTUuMDY4LTExLjgyLTcuODU2LTE5LjAyOC03Ljg1NnMtMTMuOTY4LDIuNzg4LTE5LjAzNiw3Ljg1NmwtMTYuMTIsMTYuMTI4ICAgIGMtMTAuNDk2LDEwLjQ4OC0xMC40OTYsMjcuNTcyLDAsMzguMDZsMjE5LjEzNiwyMTkuOTI0YzUuMDY0LDUuMDY0LDExLjgxMiw4LjYzMiwxOS4wODQsOC42MzJoMC4wODQgICAgYzcuMjEyLDAsMTMuOTYtMy41NzIsMTkuMDI0LTguNjMybDIxOC45MzItMjE5LjMyOGM1LjA3Mi01LjA2NCw3Ljg1Ni0xMi4wMTYsNy44NjQtMTkuMjI0ICAgIEM0OTEuOTk2LDEzNi45MDIsNDg5LjIwNCwxMzAuMDQ2LDQ4NC4xMzIsMTI0Ljk4NnoiLz4KCTwvZz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K)',
  90. 		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=)',
  91. 	};
  92.  
  93. 	function judge_User(user_title) {
  94. 		for (let i = 0; i < instagram_config.user_array.length; i++) {
  95. 			if (user_title === instagram_config.user_array[i].user_id) {
  96. 				return i
  97. 			}
  98. 		}
  99. 		return -1
  100. 	}
  101. 	function write_User(user_title, input_tag) {
  102. 		let judge_value = judge_User(user_title);
  103. 		if (judge_value !== -1) {
  104. 			if (input_tag) {
  105. 				instagram_config.user_array[judge_value].user_tag = input_tag
  106. 			} else {
  107. 				instagram_config.user_array.splice(judge_value, 1)
  108. 			}
  109. 		} else {
  110. 			if (input_tag) {
  111. 				let temp_user_obj = {
  112. 					user_id: user_title,
  113. 					user_tag: input_tag,
  114. 				};
  115. 				instagram_config.user_array.push(temp_user_obj)
  116. 			}
  117. 		}
  118. 		GM_setValue('instagram_config', instagram_config)
  119. 	}
  120. 	function create_Add_Input_Div(user_title) {
  121. 		let presentation_div = document.createElement('div');
  122. 		presentation_div.className = 'presentation_div_for_user';
  123. 		presentation_div.style.display = 'flex';
  124. 		presentation_div.style.position = 'fixed';
  125. 		presentation_div.style.backgroundColor = 'rgba(0, 0, 0, .5)';
  126. 		presentation_div.style.top = '0';
  127. 		presentation_div.style.bottom = '0';
  128. 		presentation_div.style.left = '0';
  129. 		presentation_div.style.right = '0';
  130. 		presentation_div.style.zIndex = '1';
  131. 		presentation_div.style.alignItems = 'center';
  132. 		presentation_div.style.justifyContent = 'center';
  133. 		presentation_div.addEventListener('click', function(event) {
  134. 			if (event.target === this) {
  135. 				$('.presentation_div_for_user').remove()
  136. 			}
  137. 		});
  138. 		let dialog_div = document.createElement('div');
  139. 		dialog_div.className = 'dialog_div_for_user';
  140. 		dialog_div.style.position = 'relative';
  141. 		dialog_div.style.width = '400px';
  142. 		dialog_div.style.backgroundColor = '#fff';
  143. 		dialog_div.style.border = '0 solid #000';
  144. 		dialog_div.style.borderRadius = '12px';
  145. 		let user_title_p = document.createElement('button');
  146. 		user_title_p.className = 'user_title_span_for_user';
  147. 		user_title_p.innerText = user_title;
  148. 		user_title_p.style.minHeight = '48px';
  149. 		user_title_p.style.textAlign = 'center';
  150. 		user_title_p.style.border = '1px solid #efefef';
  151. 		user_title_p.style.color = '#003399';
  152. 		user_title_p.style.fontWeight = 'bold';
  153. 		user_title_p.style.backgroundColor = 'rgba(0, 0, 0, 0)';
  154. 		user_title_p.style.borderTopLeftRadius = '12px';
  155. 		user_title_p.style.borderTopRightRadius = '12px';
  156. 		let tag_input = document.createElement('input');
  157. 		tag_input.className = 'tag_input_for_user';
  158. 		tag_input.type = 'text';
  159. 		tag_input.placeholder = lang_value.input_placeholder;
  160. 		tag_input.style.minHeight = '32px';
  161. 		tag_input.style.margin = '5px';
  162. 		tag_input.style.border = "1px solid #cc6666";
  163. 		tag_input.style.borderRadius = '3px';
  164. 		tag_input.style.paddingLeft = '5px';
  165. 		let judge_value = judge_User(user_title);
  166. 		if (judge_value !== -1) {
  167. 			tag_input.value = instagram_config.user_array[judge_value].user_tag
  168. 		} else {
  169. 			tag_input.value = ''
  170. 		}
  171. 		$(tag_input).keyup(function(e) {
  172. 			if (e.keyCode === 13) {
  173. 				write_User(user_title, $('.tag_input_for_user').val());
  174. 				save_Update_Event(user_title);
  175. 				$('.presentation_div_for_user').remove()
  176. 			}
  177. 		});
  178. 		let save_button = document.createElement('button');
  179. 		save_button.className = 'save_button_for_user';
  180. 		save_button.type = 'button';
  181. 		save_button.innerText = lang_value.save_button_text;
  182. 		save_button.style.minHeight = '48px';
  183. 		save_button.style.cursor = 'pointer';
  184. 		save_button.style.border = '1px solid #efefef';
  185. 		save_button.style.backgroundColor = 'rgba(0, 0, 0, 0)';
  186. 		save_button.addEventListener('click', function() {
  187. 			write_User(user_title, $('.tag_input_for_user').val());
  188. 			save_Update_Event(user_title);
  189. 			$('.presentation_div_for_user').remove()
  190. 		});
  191. 		let clear_button = document.createElement('button');
  192. 		clear_button.className = 'clear_button_for_user';
  193. 		clear_button.type = 'button';
  194. 		clear_button.innerText = lang_value.clear_button_text;
  195. 		clear_button.style.minHeight = '48px';
  196. 		clear_button.style.cursor = 'pointer';
  197. 		clear_button.style.border = '1px solid #efefef';
  198. 		clear_button.style.backgroundColor = 'rgba(0, 0, 0, 0)';
  199. 		clear_button.addEventListener('click', function() {
  200. 			write_User(user_title, '');
  201. 			save_Update_Event(user_title);
  202. 			$('.presentation_div_for_user').remove()
  203. 		});
  204. 		let cancel_button = document.createElement('button');
  205. 		cancel_button.className = 'cancel_button_for_user';
  206. 		cancel_button.type = 'button';
  207. 		cancel_button.innerText = lang_value.cancel_button_text;
  208. 		cancel_button.style.minHeight = '48px';
  209. 		cancel_button.style.cursor = 'pointer';
  210. 		cancel_button.style.border = '1px solid #efefef';
  211. 		cancel_button.style.backgroundColor = 'rgba(0, 0, 0, 0)';
  212. 		cancel_button.style.borderBottomLeftRadius = '12px';
  213. 		cancel_button.style.borderBottomRightRadius = '12px';
  214. 		cancel_button.addEventListener('click', function(_event) {
  215. 			$('.presentation_div_for_user').remove()
  216. 		});
  217. 		dialog_div.appendChild(user_title_p);
  218. 		dialog_div.appendChild(tag_input);
  219. 		dialog_div.appendChild(save_button);
  220. 		dialog_div.appendChild(clear_button);
  221. 		dialog_div.appendChild(cancel_button);
  222. 		presentation_div.appendChild(dialog_div);
  223. 		return presentation_div
  224. 	}
  225. 	function create_Add_Tags_Div(user_title, icon_size, margin_top) {
  226. 		let tags_div = document.createElement('div');
  227. 		tags_div.className = 'Tags_A';
  228. 		tags_div.title = lang_value.div_title;
  229. 		tags_div.style.width = icon_size;
  230. 		tags_div.style.height = icon_size;
  231. 		tags_div.style.backgroundImage = ICON.TAGS;
  232. 		tags_div.style.backgroundRepeat = 'no-repeat';
  233. 		tags_div.style.backgroundPosition = 'center';
  234. 		tags_div.style.backgroundSize = icon_size;
  235. 		tags_div.style.marginLeft = '5px';
  236. 		tags_div.style.cursor = 'pointer';
  237. 		tags_div.style.marginTop = margin_top;
  238. 		tags_div.addEventListener('click', function() {
  239. 			document.body.appendChild(create_Add_Input_Div(user_title))
  240. 		});
  241. 		return tags_div
  242. 	}
  243. 	function create_Add_Tag_P(tag_string) {
  244. 		let tag_p = document.createElement('p');
  245. 		tag_p.className = 'tag_p';
  246. 		tag_p.style.marginLeft = '5px';
  247. 		tag_p.style.color = '#336699';
  248. 		tag_p.style.whiteSpace = 'nowrap';
  249. 		tag_p.innerText = '[' + tag_string + ']';
  250. 		return tag_p
  251. 	}
  252. 	function create_Add_Tag_Span(tag_string, font_size) {
  253. 		let tag_span = document.createElement('span');
  254. 		tag_span.className = 'tag_span';
  255. 		tag_span.style.marginLeft = '5px';
  256. 		tag_span.style.color = '#336699';
  257. 		tag_span.style.fontSize = font_size;
  258. 		tag_span.innerText = '[' + tag_string + ']';
  259. 		return tag_span
  260. 	}
  261. 	function create_List_Div(id_number, user_obj) {
  262. 		let list_div = document.createElement('div');
  263. 		list_div.id = 'tags_' + id_number;
  264. 		list_div.innerText = user_obj.user_tag;
  265. 		list_div.style.cursor = 'pointer';
  266. 		$(list_div).mouseenter(function() {
  267. 			$(this).css('background-color', '#6699CC').siblings().css('background-color', '')
  268. 		});
  269. 		$(list_div).on('click', function() {
  270. 			window.location.href = 'https://www.instagram.com/' + user_obj.user_id + '/'
  271. 		});
  272. 		return list_div
  273. 	}
  274. 	function create_Search_Frame() {
  275. 		let search_frame = document.createElement('div');
  276. 		search_frame.id = 'searchFrame';
  277. 		search_frame.style.position = 'relative';
  278. 		search_frame.style.marginLeft = '15px';
  279. 		let search_input = document.createElement('input');
  280. 		search_input.id = 'myInputSearch';
  281. 		search_input.type = 'text';
  282. 		search_input.placeholder = lang_value.search_placeholder;
  283. 		search_input.value = "";
  284. 		search_input.style.width = '200px';
  285. 		search_input.style.height = '25px';
  286. 		search_input.style.border = '1px solid #999';
  287. 		search_input.style.borderRadius = '3px';
  288. 		search_input.style.padding = '0 3px';
  289. 		search_input.style.position = 'relative';
  290. 		$(search_input).focus(function() {
  291. 			$('#tagsList').show();
  292. 			let arrow = $('.dropDowns');
  293. 			arrow.addClass('up_arrow');
  294. 			if (arrow.hasClass('up_arrow')) {
  295. 				arrow.css('background-image', ICON.UP_ARROW)
  296. 			} else {
  297. 				arrow.css('background-image', ICON.DOWN_ARROW)
  298. 			}
  299. 			search_Event(search_input)
  300. 		});
  301. 		search_frame.appendChild(search_input);
  302. 		let dropdowns = document.createElement('div');
  303. 		dropdowns.className = 'picture_click dropDowns';
  304. 		dropdowns.style.width = '15px';
  305. 		dropdowns.style.height = '15px';
  306. 		dropdowns.style.backgroundImage = ICON.DOWN_ARROW;
  307. 		dropdowns.style.backgroundRepeat = 'no-repeat';
  308. 		dropdowns.style.backgroundSize = '12px auto';
  309. 		dropdowns.style.position = 'absolute';
  310. 		dropdowns.style.top = '8px';
  311. 		dropdowns.style.right = '2px';
  312. 		$(dropdowns).click(function() {
  313. 			$(this).parent().find('.selectList').toggle();
  314. 			$(this).toggleClass('up_arrow');
  315. 			if ($(this).hasClass('up_arrow')) {
  316. 				$(this).css('background-image', ICON.UP_ARROW)
  317. 			} else {
  318. 				$(this).css('background-image', ICON.DOWN_ARROW)
  319. 			}
  320. 		});
  321. 		search_frame.appendChild(dropdowns);
  322. 		let tags_list = document.createElement('div');
  323. 		tags_list.id = 'tagsList';
  324. 		tags_list.className = 'selectList';
  325. 		tags_list.style.width = '208px';
  326. 		tags_list.style.height = '218px';
  327. 		tags_list.style.overflowY = 'scroll';
  328. 		tags_list.style.textAlign = 'left';
  329. 		tags_list.style.border = '1px solid #999';
  330. 		tags_list.style.display = 'none';
  331. 		tags_list.style.position = 'absolute';
  332. 		tags_list.style.top = '27px';
  333. 		tags_list.style.backgroundColor = '#fff';
  334. 		$.each(instagram_config.user_array, function(index, item) {
  335. 			tags_list.appendChild(create_List_Div(index, item))
  336. 		});
  337. 		search_frame.appendChild(tags_list);
  338. 		document.body.onclick = function(e) {
  339. 			e = e || window.event;
  340. 			let target = e.target || e.srcElement;
  341. 			if (target !== $('.dropDowns')[0] && target !== $('.selectList')[0] && target !== $('#myInputSearch')[0]) {
  342. 				$('#tagsList').hide();
  343. 				let arrow = $('.dropDowns');
  344. 				arrow.removeClass('up_arrow');
  345. 				if (arrow.hasClass('up_arrow')) {
  346. 					arrow.css('background-image', ICON.UP_ARROW)
  347. 				} else {
  348. 					arrow.css('background-image', ICON.DOWN_ARROW)
  349. 				}
  350. 			}
  351. 		};
  352. 		return search_frame
  353. 	}
  354. 	function search_Event(input_dom) {
  355. 		let list_arr = [];
  356. 		$.each($('#tagsList div'), function(index, item) {
  357. 			let arr_obj = {
  358. 				ele_container: item.innerText,
  359. 				ele: item,
  360. 			};
  361. 			list_arr.push(arr_obj)
  362. 		});
  363. 		let current_index = 0;
  364. 		$(input_dom).keyup(function(event) {
  365. 			$('#tagsList').show();
  366. 			let arrow = $('.dropDowns');
  367. 			arrow.addClass('up_arrow');
  368. 			if (arrow.hasClass('up_arrow')) {
  369. 				arrow.css('background-image', ICON.UP_ARROW)
  370. 			} else {
  371. 				arrow.css('background-image', ICON.DOWN_ARROW)
  372. 			}
  373. 			if (event.keyCode === 38) {
  374. 				event.returnValue = false
  375. 			} else if (event.keyCode === 40) {
  376. 				event.returnValue = false
  377. 			} else if (event.keyCode === 37) {
  378. 				event.returnValue = false
  379. 			} else if (event.keyCode === 39) {
  380. 				event.returnValue = false
  381. 			} else if (event.keyCode === 13) {
  382. 				$(show_list[current_index]).click()
  383. 			} else {
  384. 				let search_val = $(this).val();
  385. 				show_list = [];
  386. 				$.each(list_arr, function(index, item) {
  387. 					if (item.ele_container.indexOf(search_val) !== -1) {
  388. 						item.ele.style.display = 'block';
  389. 						show_list.push(item.ele)
  390. 					} else {
  391. 						item.ele.style.display = 'none'
  392. 					}
  393. 				});
  394. 				current_index = 0
  395. 			}
  396. 			$.each(show_list, function(index, item) {
  397. 				if (index === current_index) {
  398. 					item.style.backgroundColor = '#6699CC';
  399. 					$('#tagsList').scrollTop(item.offsetTop)
  400. 				} else {
  401. 					item.style.backgroundColor = ''
  402. 				}
  403. 			});
  404. 			let list_height = $('#tagsList div:first').height() * show_list.length;
  405. 			if (list_height < 218) {
  406. 				$('#tagsList').height(list_height)
  407. 			} else {
  408. 				$('#tagsList').height(218)
  409. 			}
  410. 		});
  411. 		$(input_dom).keydown(function(event) {
  412. 			if (event.keyCode === 38) {
  413. 				current_index--;
  414. 				if (current_index < 0) {
  415. 					current_index = 0
  416. 				}
  417. 			} else if (event.keyCode === 40) {
  418. 				current_index++;
  419. 				if (current_index >= show_list.length) {
  420. 					current_index = show_list.length - 1
  421. 				}
  422. 			}
  423. 			$.each(show_list, function(index, item) {
  424. 				if (index === current_index) {
  425. 					item.style.backgroundColor = '#6699CC';
  426. 					$('#tagsList').scrollTop(item.offsetTop)
  427. 				} else {
  428. 					item.style.backgroundColor = ''
  429. 				}
  430. 			})
  431. 		})
  432. 	}
  433. 	function homepage_Event(dom_container) {
  434. 		let user_title = $(dom_container).find('div.e1e1d a').text();
  435. 		let judge_value = judge_User(user_title);
  436. 		if (judge_value !== -1) {
  437. 			$(dom_container).find('.e1e1d').append(create_Add_Tag_P(instagram_config.user_array[judge_value].user_tag))
  438. 		}
  439. 		$(dom_container).find('span.wmtNn').before(create_Add_Tags_Div(user_title, '24px', '8px'));
  440. 		$(dom_container).find('.e1e1d').css('overflow', 'visible')
  441. 	}
  442. 	function homepage_Stories_Event(dom_container) {
  443. 		let user_title = $(dom_container).find('.jQgLo').text();
  444. 		let judge_value = judge_User(user_title);
  445. 		if (judge_value !== -1) {
  446. 			$(dom_container).find('.jQgLo').append(create_Add_Tag_Span(instagram_config.user_array[judge_value].user_tag, '12px'))
  447. 		}
  448. 	}
  449. 	function user_Page_Event(selector_container) {
  450. 		let user_title = selector_container.find('.KV-D4').text();
  451. 		selector_container.find('.AFWDX').after(create_Add_Tags_Div(user_title, '18px', '2px'));
  452. 		let judge_value = judge_User(user_title);
  453. 		if (judge_value !== -1) {
  454. 			selector_container.find('.AFWDX').after(create_Add_Tag_Span(instagram_config.user_array[judge_value].user_tag, '16px'))
  455. 		}
  456. 		$.each(selector_container.find('span._32eiM'), function(index, item) {
  457. 			let em_user_title = item.innerText;
  458. 			let em_judge_value = judge_User(em_user_title);
  459. 			if (em_judge_value !== -1) {
  460. 				item.innerText = em_user_title + ' [' + instagram_config.user_array[em_judge_value].user_tag + ']'
  461. 			}
  462. 		})
  463. 	}
  464. 	function stories_Page_Event(selector_container) {
  465. 		let user_title = selector_container.find('.FPmhX').text();
  466. 		let judge_value = judge_User(user_title);
  467. 		if (judge_value !== -1) {
  468. 			selector_container.append(create_Add_Tag_Span(instagram_config.user_array[judge_value].user_tag, '14px'))
  469. 		}
  470. 	}
  471. 	function follow_Page_Event(selector_container) {
  472. 		if (selector_container.find('.tag_span').length === 0) {
  473. 			let user_title = selector_container.find('a.FPmhX').attr('title');
  474. 			let judge_value = judge_User(user_title);
  475. 			if (judge_value !== -1) {
  476. 				selector_container.find('a.FPmhX').parent().append(create_Add_Tag_Span(instagram_config.user_array[judge_value].user_tag, '14px'))
  477. 			}
  478. 		}
  479. 	}
  480. 	function save_Update_Event(user_title) {
  481. 		let old_url = location.href;
  482. 		if (PAGE_REG.HOMEPAGE.test(old_url)) {
  483. 			$.each($('article'), function(_index, item) {
  484. 				let page_user_title = $(item).find('div.e1e1d a').text();
  485. 				if (user_title === page_user_title) {
  486. 					let judge_value = judge_User(user_title);
  487. 					if (judge_value !== -1) {
  488. 						if ($(item).find('p.tag_p').length !== 0) {
  489. 							$(item).find('p.tag_p').text('[' + instagram_config.user_array[judge_value].user_tag + ']')
  490. 						} else {
  491. 							$(item).find('.Tags_A').before(create_Add_Tag_P(instagram_config.user_array[judge_value].user_tag))
  492. 						}
  493. 					} else {
  494. 						if ($(item).find('p.tag_p').length !== 0) {
  495. 							$(item).find('p.tag_p').remove()
  496. 						}
  497. 					}
  498. 				}
  499. 			});
  500. 			$.each($('.BI5t6'), function(index, item) {
  501. 				let page_user_selector = $(item).find('.jQgLo').clone();
  502. 				page_user_selector.find('.tag_span').remove();
  503. 				let page_user_title = page_user_selector.text();
  504. 				if (user_title === page_user_title) {
  505. 					let judge_value = judge_User(user_title);
  506. 					if (judge_value !== -1) {
  507. 						if ($(item).find('span.tag_span').length !== 0) {
  508. 							$(item).find('span.tag_span').text('[' + instagram_config.user_array[judge_value].user_tag + ']')
  509. 						} else {
  510. 							$(item).find('.jQgLo').append(create_Add_Tag_Span(instagram_config.user_array[judge_value].user_tag, '12px'))
  511. 						}
  512. 					} else {
  513. 						if ($(item).find('span.tag_span').length !== 0) {
  514. 							$(item).find('span.tag_span').remove()
  515. 						}
  516. 					}
  517. 				}
  518. 			})
  519. 		} else if (PAGE_REG.USER_PAGE.test(old_url)) {
  520. 			let user_title = $('.KV-D4').text();
  521. 			let judge_value = judge_User(user_title);
  522. 			if (judge_value !== -1) {
  523. 				if ($('.tag_span').length !== 0) {
  524. 					$('.tag_span').text('[' + instagram_config.user_array[judge_value].user_tag + ']')
  525. 				} else {
  526. 					$('.AFWDX').after(create_Add_Tag_Span(instagram_config.user_array[judge_value].user_tag, '16px'))
  527. 				}
  528. 			} else {
  529. 				if ($('.tag_span').length !== 0) {
  530. 					$('.tag_span').remove()
  531. 				}
  532. 			}
  533. 		}
  534. 	}
  535. 	function set_Language(lang_string) {
  536. 		switch (lang_string) {
  537. 		case 'zh':
  538. 		case 'zh-cn':
  539. 			lang_value = LANG.ZH;
  540. 			break;
  541. 		case 'zh-hk':
  542. 		case 'zh-tw':
  543. 			lang_value = LANG.ZH_TW;
  544. 			break;
  545. 		case 'en':
  546. 			lang_value = LANG.EN;
  547. 			break;
  548. 		case 'ja':
  549. 			lang_value = LANG.JA;
  550. 			break;
  551. 		case 'ko':
  552. 			lang_value = LANG.KO;
  553. 			break;
  554. 		default:
  555. 			lang_value = LANG.EN;
  556. 			break
  557. 		}
  558. 		instagram_config.lang_value = lang_value;
  559. 		GM_setValue('instagram_config', instagram_config)
  560. 	}
  561. 	function init() {
  562. 		if (instagram_config.lang_value) {
  563. 			lang_value = instagram_config.lang_value
  564. 		} else {
  565. 			set_Language($('html:first').attr('lang'))
  566. 		}
  567. 		$('.LWmhU').after(create_Search_Frame());
  568. 		$('#react-root').arrive('.LWmhU', function() {
  569. 			$(this).after(create_Search_Frame())
  570. 		});
  571. 		$.each($('article'), function(_index, item) {
  572. 			homepage_Event(item)
  573. 		});
  574. 		setTimeout(function() {
  575. 			$.each($('.BI5t6'), function(_index, item) {
  576. 				homepage_Stories_Event(item)
  577. 			})
  578. 		}, 1000);
  579. 		$('#react-root').arrive('article', function() {
  580. 			homepage_Event(this)
  581. 		});
  582. 		$('#react-root').arrive('.BI5t6', function() {
  583. 			homepage_Stories_Event(this)
  584. 		});
  585. 		if ($('.zwlfE').length !== 0) {
  586. 			user_Page_Event($('.zwlfE'))
  587. 		}
  588. 		$('#react-root').arrive('.zwlfE', function() {
  589. 			user_Page_Event($(this))
  590. 		});
  591. 		if ($('.yn6BW').length !== 0) {
  592. 			stories_Page_Event($('.yn6BW'))
  593. 		}
  594. 		$('#react-root').arrive('.yn6BW', function() {
  595. 			stories_Page_Event($(this))
  596. 		});
  597. 		$('body').arrive('.isgrP li', {
  598. 			onceOnly: true
  599. 		}, function() {
  600. 			follow_Page_Event($(this))
  601. 		});
  602. 		$('body').arrive('.d7ByH', function() {
  603. 			follow_Page_Event($(this))
  604. 		})
  605. 	}
  606. 	Promise.all([GM_getValue('instagram_config')]).then(function(data) {
  607. 		if (data[0] !== undefined) {
  608. 			instagram_config = data[0]
  609. 		}
  610. 		init()
  611. 	})
  612. })();