☰

Custom Google Navigation Bar

Choose what you want to see on the Google navigation bar.

目前为 2015-10-17 提交的版本。查看 最新版本。

  1. // ==UserScript==
  2. // @name        Custom Google Navigation Bar
  3. // @description Choose what you want to see on the Google navigation bar.
  4. // @namespace   407d4100-4661-11e4-916c-0800200c9a66
  5. // @grant       GM_addStyle
  6. // @include     http*://*.google.com/*
  7. // @version     2.0.1
  8. // ==/UserScript==
  9. GM_addStyle("\
  10. 	#cgnb-glass {\
  11. 		display: none;\
  12. 		position: fixed;\
  13. 		top: 0px;\
  14. 		left: 0px;\
  15. 		bottom: 0px;\
  16. 		right: 0px;\
  17. 		background-color: rgba(102, 102, 102, 0.5);\
  18. 		z-index: 360;\
  19. 	}\
  20. 	#cgnb-settings {\
  21. 		position: fixed;\
  22. 		top: 50%;\
  23. 		left: 50%;\
  24. 		width: 640px;\
  25. 		height: 480px;\
  26. 		background-color: #fff;\
  27. 		margin-top: -240px;\
  28. 		margin-left: -320px;\
  29. 	}\
  30. 	#cgnb-settings-close {\
  31. 		position: absolute;\
  32. 		top: 10px;\
  33. 		right: 16px;\
  34. 		display: block;\
  35. 	}\
  36. 	#cgnb-settings h1 {\
  37. 		text-align: center;\
  38. 		font-size: 20px;\
  39. 		margin-top: 18px;\
  40. 		margin-bottom: 12px;\
  41. 	}\
  42. 	#cgnb-controls-container {\
  43. 		box-sizing: border-box;\
  44. 		padding: 0px 12px;\
  45. 		height: 371px;\
  46. 		overflow-y: auto;\
  47. 	}\
  48. 	#cgnb-checklist label {\
  49. 		display: block;\
  50. 		height: 24px;\
  51. 	}\
  52. 	#cgnb-checklist label input {\
  53. 		margin: 3px;\
  54. 		margin-right: 6px;\
  55. 	}\
  56. 	#cgnb-display {\
  57. 		height: 200px;\
  58. 	}\
  59. 	#cgnb-links {\
  60.     border-collapse: separate;\
  61.     border-spacing: 3px 3px;\
  62. 	}\
  63. 	#cgnb-settings a {\
  64. 		font-size: 18px;\
  65. 		color: #737373;\
  66. 		text-decoration: none;\
  67. 	}\
  68. 	#cgnb-settings a:hover, #cgnb-settings a:active {\
  69. 		color: #262626;\
  70. 	}\
  71. 	#cgnb-links input {\
  72. 		width: 100%;\
  73. 		border: 1px solid #D9D9D9;\
  74. 		box-sizing: border-box;\
  75. 		padding: 4px;\
  76. 	}\
  77. 	#cgnb-links input:hover {\
  78. 		border-color: #A0A0A0;\
  79. 	}\
  80. 	#cgnb-links input:focus {\
  81. 		border-color: #4D90FE;\
  82. 	}\
  83. 	#cgnb-links .cgnb-delete {\
  84. 		padding: 0px 1px;\
  85. 	}\
  86. 	#cgnb-links .cgnb-display {\
  87. 		width: 180px;\
  88. 	}\
  89. 	#cgnb-links .cgnb-url {\
  90. 		width: 480px;\
  91. 	}\
  92. 	a#cgnb-addLink {\
  93. 		display: block;\
  94. 		width: 100%;\
  95. 		font-size: 14px;\
  96. 		text-align: center;\
  97. 		margin-bottom: 2px;\
  98. 	}\
  99. 	#cgnb-buttons {\
  100. 		position: absolute;\
  101. 		bottom: 0px;\
  102. 		left: 0px;\
  103. 		right: 0px;\
  104. 		height: 53px;\
  105. 		border-top: 1px solid #E4E4E4;\
  106. 		background-color: #F2F2F2;\
  107. 		text-align: right;\
  108. 	}\
  109. 	#cgnb-credit {\
  110. 		font-size: 12px;\
  111. 		position: absolute;\
  112. 		left: 12px;\
  113. 		text-align: left;\
  114. 		width: 443px;\
  115. 	}\
  116. 	#cgnb-credit a {\
  117. 		font-size: 12px;\
  118. 	}\
  119. 	#cgnb-buttons button {\
  120.     border-radius: 2px;\
  121.     background-color: #F5F5F5;\
  122.     background-image: -moz-linear-gradient(center top , #F5F5F5, #F1F1F1);\
  123.     border: 1px solid rgba(0, 0, 0, 0.1);\
  124.     color: #444;\
  125.     cursor: default;\
  126.     font-family: inherit;\
  127.     font-size: 11px;\
  128.     font-weight: bold;\
  129.     height: 29px;\
  130.     line-height: 27px;\
  131.     margin: 12px 12px 0px 4px;\
  132.     min-width: 72px;\
  133.     outline: 0px none;\
  134.     padding: 0px 8px;\
  135. 		cursor: pointer;\
  136. 	}\
  137. 	#cgnb-buttons button:focus {\
  138. 		border: 1px solid #4D90FE;\
  139. 	}\
  140. 	#cgnb-buttons button:hover {\
  141. 		box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.05);\
  142. 		background-color: #F8F8F8;\
  143. 		background-image: -moz-linear-gradient(center top , #F8F8F8, #F1F1F1);\
  144. 		border: 1px solid #C6C6C6;\
  145. 		color: #333;\
  146. 	}\
  147. ");
  148.  
  149. document.getElementById("fsett").innerHTML += "<a id='cgnb-customize' href='javascript:void(0);'>Customize navigation bar</a>";
  150. document.getElementsByTagName("body")[0].innerHTML += "<div id='cgnb-glass'>\
  151. 	<div id='cgnb-settings'>\
  152. 		<a id='cgnb-settings-close' href='javascript:void(0)'>✕</a>\
  153. 		<h1>Custom Google Navigation Bar</h1>\
  154. 		<div id='cgnb-controls-container'>\
  155. 			<div id='cgnb-checklist'>\
  156. 				<label><input type='checkbox' autocomplete='off' id='cgnb-showApps'/>Show apps list</label>\
  157. 				<label><input type='checkbox' autocomplete='off' id='cgnb-showNotifications'/>Show notifications</label>\
  158. 				<label><input type='checkbox' autocomplete='off' id='cgnb-showName'/>Show name</label>\
  159. 				<label><input type='checkbox' autocomplete='off' id='cgnb-newTab'/>Open links in a new tab</label>\
  160. 			</div>\
  161. 			<table id='cgnb-links'><tbody></tbody></table>\
  162. 			<a id='cgnb-addLink' href='javascript:void(0)'>Add link</a>\
  163. 		</div>\
  164. 		<div id='cgnb-buttons'><p id='cgnb-credit'>Custom Google Navigation Bar is a Greasemonkey script developed by <a href='https://greasyfork.org/users/5353'>Qvcool</a>. Report bugs at <a href='https://greasyfork.org/scripts/5332'>https://greasyfork.org/scripts/5332</a>.</p><button id='cgnb-cancel'>Cancel</button><button id='cgnb-apply'>Apply</button></div>\
  165. 	</div>\
  166. </div>";
  167.  
  168. document.getElementById("cgnb-customize").addEventListener("click", function() {document.getElementById("cgnb-glass").style.display = "block";}, false);
  169. document.getElementById("cgnb-settings-close").addEventListener("click", function() {document.getElementById("cgnb-glass").style.display = "none";}, false);
  170. document.getElementById("cgnb-cancel").addEventListener("click", function() {document.getElementById("cgnb-glass").style.display = "none";}, false);
  171.  
  172. document.getElementById("cgnb-addLink").addEventListener("click", function() {
  173. 	ele = document.createElement("tr");
  174. 	ele.innerHTML = "<td class='cgnb-delete'><a href='javascript:void(0)' title='Delete this link'>×</a></td><td class='cgnb-display'><input type='text' autocomplete='off' placeholder='Display text' /></td><td class='cgnb-url'><input type='text' autocomplete='off' placeholder='URL' /></td>";
  175. 	document.getElementById("cgnb-links").getElementsByTagName("tbody")[0].appendChild(ele)
  176.  
  177. 	tableRows = document.getElementById("cgnb-links").getElementsByTagName("tr");
  178. 	for(i=0;i<tableRows.length;i++) {
  179. 		tableRows[i].getElementsByClassName("cgnb-delete")[0].children[0].addEventListener("click", function() {
  180. 			this.parentElement.parentElement.parentElement.removeChild(this.parentElement.parentElement);
  181. 		}, false);
  182. 	}
  183. }, false);
  184.  
  185. document.getElementById("cgnb-apply").addEventListener("click", function() {
  186. 	links = [];
  187. 	tableRows = document.getElementById("cgnb-links").getElementsByTagName("tbody")[0].getElementsByTagName("tr");
  188. 	for(i=0;i<tableRows.length;i++) {
  189. 		display = tableRows[i].getElementsByClassName("cgnb-display")[0].getElementsByTagName("input")[0].value.replace(/ࠊ/g, "").replace(/;/g, "ࠊ");
  190. 		url = tableRows[i].getElementsByClassName("cgnb-url")[0].getElementsByTagName("input")[0].value.replace(/ࠊ/g, "").replace(/;/g, "ࠊ");
  191. 		if(display != "" && url != "") {
  192. 			links.push({display: display, url: url});
  193. 		}
  194. 	}
  195.  
  196. 	exdate = new Date();
  197. 	exdate.setTime(exdate.getTime() + 5000000000000) // A bit over 158 years
  198.  
  199. 	document.cookie = "cgnb_settings=" + JSON.stringify({
  200. 		showApps: document.getElementById("cgnb-showApps").checked,
  201. 		showNotifications: document.getElementById("cgnb-showNotifications").checked,
  202. 		showName: document.getElementById("cgnb-showName").checked,
  203. 		newTab: document.getElementById("cgnb-newTab").checked,
  204. 		links: links
  205. 	}) + "; expires=" + exdate.toUTCString();
  206.  
  207. 	window.location.reload();
  208. }, false);
  209.  
  210. settingsString = document.cookie.replace(/(?:(?:^|.*;\s*)cgnb_settings\s*\=\s*([^;]*).*$)|^.*$/, "$1");
  211. var settings;
  212. if(settingsString != "") settings = JSON.parse(settingsString);
  213. else settings = {showApps: true, showNotifications: true, showName: false, links: [{display: "Click here or click on Settings in the bottom right corner to customize the navigation toolbar.", url: "javascript:document.getElementById(\"cgnb-customize\").click();"}]};
  214.  
  215. if(!settings.showApps) {
  216. 	document.getElementById("gbwa").style.display = "none";
  217. 	document.getElementsByClassName("gb_0d gb_R gb_ee gb_7d")[0].style.paddingRight = "0px";
  218. } else {
  219. 	document.getElementById("cgnb-showApps").checked = true;
  220. }
  221.  
  222. if(!settings.showNotifications) {
  223. 	document.getElementsByClassName("gb_Vb gb_Ob gb_R gb_Wb")[0].style.display = "none";
  224. } else {
  225. 	document.getElementById("cgnb-showNotifications").checked = true;
  226. }
  227.  
  228. if(!settings.showName) {
  229. 	document.getElementsByClassName("gb_Q gb_R")[0].style.display = "none";
  230. } else {
  231. 	document.getElementById("cgnb-showName").checked = true;
  232. }
  233.  
  234. if(settings.newTab) {
  235. 	document.getElementById("cgnb-newTab").checked = true;
  236. }
  237.  
  238. document.getElementsByClassName("gb_Q gb_R")[1].style.display = "none";
  239. document.getElementsByClassName("gb_Q gb_R")[2].style.display = "none";
  240.  
  241. for(i=0;i<settings.links.length;i++) {
  242. 	document.getElementsByClassName("gb_0d gb_R gb_ee gb_7d")[0].innerHTML += "<div class='gb_Q gb_R' style='display:block;'><a" + (settings.newTab?" target='_blank'":"") + " href='" + settings.links[i].url.replace(/ࠊ/g, ";").replace(/\\/g, "\\\\").replace(/'/g, "\\'") + "' class='gb_P'>" + settings.links[i].display.replace(/ࠊ/g, ";").replace(/</g, "&lt;").replace(/>/g, "&gt;") + "</a></div>";;
  243. 	document.getElementById("cgnb-links").getElementsByTagName("tbody")[0].innerHTML += "<td class='cgnb-delete'><a href='javascript:void(0)' title='Delete this link'>×</a></td><td class='cgnb-display'><input type='text' autocomplete='off' placeholder='Display text' value='" + settings.links[i].display.replace(/ࠊ/g, ";") + "' /></td><td class='cgnb-url'><input type='text' autocomplete='off' placeholder='URL' value='" + settings.links[i].url.replace(/ࠊ/g, ";") + "' /></td>";
  244. }
  245.  
  246. tableRows = document.getElementById("cgnb-links").getElementsByTagName("tr");
  247. tableRows = document.getElementById("cgnb-links").getElementsByTagName("tr");
  248. for(i=0;i<tableRows.length;i++) {
  249. 	tableRows[i].getElementsByClassName("cgnb-delete")[0].children[0].addEventListener("click", function() {
  250. 		this.parentElement.parentElement.parentElement.removeChild(this.parentElement.parentElement);
  251. 	}, false);
  252. }