Blockhead

Blocks headers and other sticky elements from wasting precious vertical screen estate by pinning them down.

目前为 2018-04-13 提交的版本。查看 最新版本

  1. // ==UserScript==
  2. // @name Blockhead
  3. // @namespace blockhead
  4. // @description Blocks headers and other sticky elements from wasting precious vertical screen estate by pinning them down.
  5. // @match *://*/*
  6. // @version 19
  7. // @grant GM.getValue
  8. // @grant GM.setValue
  9. // @grant GM_getValue
  10. // @grant GM_setValue
  11. // @grant GM_getResourceText
  12. // @grant GM.getResourceText
  13. // @grant GM.registerMenuCommand
  14. // @grant GM_registerMenuCommand
  15. // @grant GM.setClipboard
  16. // @grant GM_setClipboard
  17. // @require https://greasemonkey.github.io/gm4-polyfill/gm4-polyfill.js
  18. // @xhr-include *
  19. // @author elypter
  20. // @require https://greasyfork.org/scripts/36900-super-gm-setvalue-and-gm-getvalue-lib/code/Super_GM_setValue_and_GM_getValue%20lib.user.js
  21. // @resource black_keywords https://github.com/elypter/filter_processor/raw/master/rules/generic_rule_keywords.txt
  22. // ==/UserScript==
  23.  
  24.  
  25.  
  26. /*
  27. Do you also get annoyed by all those pointless sticky headers with pointless logos, hamburger menus and no particular functionality that can wait for you to scroll up? are you getting flashbacks from your grandmas internet explorer with 10 toolbars installed? do you find it absurd that screens are getting bigger and bigger but there is less and less content to see?
  28. Then get ready to claim back some of that space with this userscript that blocks headers and other sticky elements from wasting precious vertical screen estate by pinning them down to the background of the website. everything is staying acessible but it wont creep up on you like a creeping shower curtain anymore when scrolling.
  29. It checks the computed style of each element. if the position attribute is "fixed" then it checks if its tagname, id or class names contain any keywords provided by the list below. https://raw.githubusercontent.com/elypter/BlockHead/master/black_keywords.js
  30. this list is being created with this tool https://github.com/elypter/rule_keyword_generator by parsing the rules of https://raw.githubusercontent.com/yourduskquibbles/webannoyances/master/ultralist.txt for class names and ids.
  31. There is also a whitelist for certain keywords and tag names to reduce flase positives and processing time.
  32.  
  33. on an 10 year old laptop it can take up 100-200ms or more in extreme cases so the performance aspect is not completely neglegtible but also not a deal breaker.
  34. there is also the option to save automatically generated rules to disk by switching on the save_generated_rules variable in the memory tab of tampermonkey or violentmoneky and later putting "blockhead-rules" into the url of any website like https://example.com/?q=blockhead-rules the rules will be displayed on the site on a simple div layer so you can copy them where you like. for example into an adbloker or you could help out yourduskquibbles with his webannoyances ultralist https://github.com/yourduskquibbles/webannoyances/issues
  35. statistics of the keyword usage can be retrieved in the same way by using "blockhead-statistics" they have to be turned on first as well.
  36. https://github.com/elypter/BlockHead/ License: GPL3
  37. */
  38.  
  39. //this style will be added to all elements that this script detects as sticky annoyances.
  40. var stylefix = 'position:relative !important';
  41.  
  42. var count_element_walker=0; //debug:counts how often a page check is triggered
  43. var count_style_walking=0; //debug:counts how often checking stylesheets is triggered
  44.  
  45. //contained in black_keywords.txt
  46. var black_keywords=GM_getResourceText("black_keywords").toString().split("\n"); //list generated with rule_keyword_generator from webannoyances ultralist
  47.  
  48. //id and classes that any of these keycontainwords will not be modified
  49. var white_names = ["side","guide","article","html5","story","main","left","right","content","account__section","container--wide","container__main","panel",
  50. "body","gutter","embed","watch","background","middleContainer","drag-and-drop"];
  51. //var white_names = ["example-whitelist-entry"];
  52.  
  53. //tags that will not be cheked
  54. var ignore_tags = ["a","A","script","SCRIPT","body","BODY","li","LI","ul","UL","br","BR","h5","H5","b","B","strong","STRONG","svg","SVG","path","PATHH","h2","H2",
  55. "code","CODE","tr","TR","td","TD","h3","H3","h1","H1","h4","H4"];//,"noscript","NOSCRIPT"
  56.  
  57. //debug switch. if on it prints out information in the java script console.
  58. var debug=GM_SuperValue.get ("debug")==true?GM_SuperValue.get ("debug"):0; //1=yes 2=no 3=intense change value in memory tab
  59. GM_SuperValue.set ("debug",debug);
  60.  
  61. //search for floating elements that get added after page load.
  62. var mutation_check=GM_SuperValue.get ("mutation_check")==true?GM_SuperValue.get ("mutation_check"):1; //1=yes 2=no change value in memory tab
  63. GM_SuperValue.set ("mutation_check",mutation_check);
  64.  
  65. //all elements of a site will be checked individually for their computed style and changed if there is a match
  66. var walk_elements=GM_SuperValue.get ("walk_elements")==true?GM_SuperValue.get ("walk_elements"):1; //1=yes 2=no change value in memory tab
  67. GM_SuperValue.set ("walk_elements",walk_elements);
  68.  
  69. //all stylesheets will be checked for classes and changed if there is a match
  70. var walk_styles=GM_SuperValue.get ("walk_styles")==true?GM_SuperValue.get ("walk_styles"):0; //1=yes 2=no change value in memory tab
  71. GM_SuperValue.set ("walk_styles",walk_styles);
  72.  
  73. //this will save the statistics of how often a keyword is being matched in a local variable that can be viewed in the memory tab
  74. var save_keyword_statistics=GM_SuperValue.get ("save_keyword_statistics")==true?GM_SuperValue.get ("save_keyword_statistics"):0; //1=yes 2=no change of value in memory tab
  75. GM_SuperValue.set ("save_keyword_statistics",save_keyword_statistics);
  76.  
  77. //this will save the rules generated based on the blocking in a local variable that can be viewed in the memory tab
  78. var save_generated_rules=GM_SuperValue.get ("save_generated_rules")==true?GM_SuperValue.get ("save_generated_rules"):0; //1=yes 2=no change of value in memory tab
  79. GM_SuperValue.set ("save_generated_rules",save_generated_rules);
  80.  
  81. GM_registerMenuCommand("Copy generated rules to clipboard", "show_saved_generated_rules");
  82.  
  83. function counted_element_walker(elm,orig){
  84. count_element_walker++;
  85.  
  86. //this disables all javascript that is being triggered when scrolling
  87. window.addEventListener("scroll", function (event) {
  88. event.stopPropagation();
  89. }, true);
  90. console.log("check number "+count_element_walker+" from: "+orig);
  91. element_walker_all(elm);
  92. if (debug==3) console.log(GM_SuperValue.get ("white_names_counter"));
  93. if (debug==3) console.log(GM_SuperValue.get ("black_keywords_counter"));
  94. if (debug==3) console.log(GM_SuperValue.get ("generated_rules"));
  95. }
  96.  
  97. function keyword_walker(keyword_list){
  98. var white_names_counter=GM_SuperValue.get ("white_names_counter")||{};
  99. var black_keywords_counter=GM_SuperValue.get ("black_keywords_counter")||{};
  100.  
  101. //todo: switch order of for loops to detect whitelists earlier
  102. var state=-1;
  103. if (debug==3) console.log("list: ("+keyword_list.length+") "+keyword_list);
  104. for (var i=0; i < keyword_list.length; i++){
  105. var subword_list=keyword_list[i].toString().split('-');
  106. if (debug==3) console.log("sublen of: "+subword_list+" from "+keyword_list[i]+" = "+subword_list.length);
  107. for (var j=0; j < subword_list.length; j++){
  108. var subsubword_list=subword_list[j].split('_');
  109. if (debug==3) console.log("subsublen of: "+subsubword_list+" from "+subword_list[j]+" = "+subsubword_list.length);
  110. for (var k=0; k < subsubword_list.length; k++){
  111. for (var l=0; l < white_names.length; l++){
  112. if (debug==3) console.log("test white: l:"+white_names[l]+" in s:"+subsubword_list[k]+" of "+keyword_list);
  113. if (subsubword_list[k].indexOf(white_names[l]) != -1){
  114. if (debug==3) console.log("whitelisted: l:"+white_names[l]+" in s:"+subsubword_list[k]+" of "+keyword_list);
  115. if(white_names_counter[white_names[l]]) white_names_counter[white_names[l]]++;
  116. else white_names_counter[white_names[l]]=1;
  117. if (save_keyword_statistics==1) GM_SuperValue.set ("white_names_counter", white_names_counter);
  118. return 0;
  119. }
  120. }
  121. for (var l=0; l < black_keywords.length; l++){
  122. if (subsubword_list[k].indexOf(black_keywords[l]) != -1){
  123. if (debug==3||debug==1) console.log("matched: l:"+black_keywords[l]+" in s:"+subsubword_list[k]+" of "+keyword_list);
  124. if(black_keywords_counter[black_keywords[l]]) black_keywords_counter[black_keywords[l]]++;
  125. else black_keywords_counter[black_keywords[l]]=1;
  126. state = 1;
  127. }
  128. }
  129. }
  130. }
  131. }
  132.  
  133. if (save_keyword_statistics==1) GM_SuperValue.set ("black_keywords_counter", black_keywords_counter);
  134. return state;
  135. }
  136.  
  137. var generated_rules=GM_SuperValue.get ("generated_rules",[])||[]; //contains all adblock/ublock rules that the script creates based on what it modifies
  138. function element_walker_all(startElem) {
  139. //walk over element list as opposed to an element tree
  140. if (!(startElem instanceof Element)) return;
  141.  
  142. // var generated_rules=GM_SuperValue.get ("generated_rules")||[]; //contains all adblock/ublock rules that the script creates based on what it modifies
  143.  
  144. var elms = startElem.getElementsByTagName("*");
  145. for (var x = elms.length; x--;) {
  146. elm=elms[x];
  147. if (debug==3) console.log("checking: "+elm.tagName.toString());
  148. if(elm instanceof Element && ignore_tags.indexOf(elm.tagName.toString()) == -1 && getComputedStyle(elm)) {
  149. if (debug==3) console.log("testing: "+elm.tagName.toString()+" with position= "+getComputedStyle(elm).getPropertyValue("position").toLowerCase());
  150. if (/*(getComputedStyle(elm).getPropertyValue("position") == "absolute") ||*/
  151. (getComputedStyle(elm).getPropertyValue("position").toLowerCase() == "fixed")/* || */
  152. /*(getComputedStyle(elm).getPropertyValue("position") == "relative")*//* ||*/
  153. /*(getComputedStyle(elm).getPropertyValue("top") != "")*/) {
  154.  
  155. var keyword_list =[];
  156. keyword_list=elm.className.toString().split(' ');
  157. if (typeof(elm.id)=="string"&&elm.id!="") keyword_list.push([elm.id]);
  158. if (typeof(elm.tagName)=="string"&&elm.tagName!="") keyword_list.push([elm.tagName]);
  159.  
  160. var has_matched=-1;
  161. if (keyword_list!=[]&&keyword_list!=[""]){
  162. //compare against black and whitelist
  163. has_matched=keyword_walker(keyword_list);
  164. }
  165. var rule;
  166. var class_list=elm.className.toString().split(' '); //check for rule writing
  167. if (has_matched==1){
  168. if (debug==3||debug==1) console.log("pinning sticky: "+elm.id+","+elm.className+","+elm.tagName);
  169.  
  170. if (elm.id){
  171. rule=window.location.hostname+"###"+elm.id+":style(position: "+"fixed"+" !important;)";
  172. if(generated_rules.indexOf(rule)==-1){
  173. if(!(generated_rules.indexOf(rule) > -1)) generated_rules.push(rule);
  174. //console.log(rule);
  175. }
  176. }
  177. if(elm.className){
  178. for (var i=0; i < class_list.length; i++){
  179. rule=window.location.hostname+"##."+class_list[i]+":style(position: "+"fixed" +" !important;)";
  180. if(generated_rules.indexOf(rule)==-1){
  181. if(!(generated_rules.indexOf(rule) > -1)) generated_rules.push(rule);
  182. //console.log(rule);
  183. }
  184. }
  185. }
  186. elm.setAttribute('style', stylefix);
  187. elm.style.removeProperty('top');
  188. //return;
  189. }else if(has_matched==0){
  190. if (elm.id){
  191. rule=window.location.hostname+"#@#"+elm.id;
  192. if(generated_rules.indexOf(rule)==-1){
  193. if(!(generated_rules.indexOf(rule) > -1)) generated_rules.push(rule);
  194. //console.log(rule);
  195. }
  196. }
  197. if(elm.className){
  198. for (var j=0; j < class_list.length; j++){
  199. rule=window.location.hostname+"#@."+class_list[j];
  200. if(generated_rules.indexOf(rule)==-1){
  201. if(!(generated_rules.indexOf(rule) > -1)) generated_rules.push(rule);
  202. //console.log(rule);
  203. }
  204. }
  205. }
  206. if (debug==3||debug==1) console.log("whitelisted sticky: "+elm.id+","+elm.className+","+elm.tagName);
  207. }else{
  208. if (debug==3||debug==1) console.log("ignoring sticky: "+elm.id+","+elm.className+","+elm.tagName);
  209. }
  210. }
  211. }
  212.  
  213.  
  214.  
  215. }
  216. if (save_generated_rules==1){
  217. GM_SuperValue.set ("generated_rules", generated_rules);
  218. }
  219. }
  220.  
  221. function element_walker(elm) {
  222. //walk over element list as opposed to an element tree
  223. var node;
  224. //console.log("checking: "+elm.tagName.toString());
  225. if(elm instanceof Element && ignore_tags.indexOf(elm.tagName.toString()) == -1 && getComputedStyle(elm)) {
  226. //console.log("testing: "+elm.tagName.toString()+" with position= "+getComputedStyle(elm).getPropertyValue("position").toLowerCase());
  227. if (/*(getComputedStyle(elm).getPropertyValue("position") == "absolute") ||*/
  228. (getComputedStyle(elm).getPropertyValue("position").toLowerCase() == "fixed")/* || */
  229. /*(getComputedStyle(elm).getPropertyValue("position") == "relative")*//* ||*/
  230. /*(getComputedStyle(elm).getPropertyValue("top") != "")*/) {
  231.  
  232. var keyword_list =[];
  233. keyword_list=elm.className.toString().split(' ');
  234. if (typeof(elm.id)=="string"&&elm.id!="") keyword_list.push([elm.id]);
  235.  
  236. var has_matched=-1;
  237. if (keyword_list!=[]&&keyword_list!=[""]){
  238. has_matched=keyword_walker(keyword_list);
  239. }
  240. var rule;
  241. var class_list=elm.className.toString().split(' '); //check for rule writing
  242. if (has_matched==1){
  243. if (debug==3) console.log("pinning sticky: "+elm.id+","+elm.className+","+elm.tagName);
  244.  
  245. if (elm.id){
  246. rule=window.location.hostname+"###"+elm.id+":style(position: "+"fixed"+" !important;)";
  247. if(generated_rules.indexOf(rule)==-1){
  248. generated_rules.push(rule);
  249. if (debug==3||debug==1) console.log(rule);
  250. }
  251. }
  252. if(elm.className){
  253. for (var i=0; i < class_list.length; i++){
  254. rule=window.location.hostname+"##."+class_list[i]+":style(position: "+"fixed" +" !important;)";
  255. if(generated_rules.indexOf(rule)==-1){
  256. generated_rules.push(rule);
  257. if (debug==3||debug==1) console.log(rule);
  258. }
  259. }
  260. }
  261. elm.setAttribute('style', stylefix);
  262. elm.style.removeProperty('top');
  263. //return;
  264. }else if(has_matched==0){
  265. if(elm.className){
  266. for (var j=0; j < class_list.length; j++){
  267. rule="@@"+window.location.hostname+"##."+class_list[j];
  268. if(generated_rules.indexOf(rule)==-1){
  269. generated_rules.push(rule);
  270. if (debug==3||debug==1) console.log(rule);
  271. }
  272. }
  273. }
  274. //return;
  275. }else{
  276. if (debug==3) console.log("ignoring sticky: "+elm.id+","+elm.className+","+elm.tagName);
  277. }
  278. }
  279. }
  280.  
  281. // Handle child elements
  282. for (node = elm.firstChild; node; node = node.nextSibling) {
  283. if (node.nodeType === 1) { // 1 == Element
  284. element_walker(node);
  285. }
  286. }
  287.  
  288.  
  289. }
  290.  
  291. function style_walker() {
  292. //this alternative mode of searching and modifying sticky elements by searching stylesheets directly
  293. //although i thought stylesheet checking would be faster it tends be slower and cannot be performed on external stylesheets
  294.  
  295. var state=0;
  296. count_style_walking++;
  297. if (debug==3) console.log("checking stylesheets for the "+count_style_walking+"th time");
  298. var styleSheets = window.document.styleSheets;
  299.  
  300. for(var i = 0; i < styleSheets.length; i++){
  301. //console.log("checking stylesheet #"+i);//+" named "+styleSheets[i].sheet);
  302.  
  303. //try to get a list of classes for each stylesheet.
  304. //this will throw an error if the stylesheet is hosted on an external server because of cross site protection
  305. //these stylesheets cannot be processed at them moment/or never
  306. var classes;
  307. if (document.styleSheets[i].cssRules){
  308. classes=document.styleSheets[i].cssRules;
  309. }else if (document.styleSheets[i].rules){
  310. classes=document.styleSheets[i].rules;
  311. }//}catch(e){}
  312. if (!classes) continue;
  313.  
  314. for (var j = 0; j < classes.length; j++) {
  315. if (debug==3) console.log("checking class "+classes[x].selectorText);
  316. state=0;
  317. for (var k=0; k < black_keywords.length; k++){
  318. if (classes[j].selectorText) if (classes[j].selectorText.indexOf(black_keywords[k])!=-1){
  319. if (debug==3) console.log("matched: l:"+black_keywords[k]+" in s:"+classes[j].selectorText+" of "+styleSheets[i].sheet);
  320. if (classes[j].position=="absolute" ||classes[j].position=="fixed"){
  321. state = 1;
  322. }
  323. }
  324. }
  325. for (var k=0; k < white_names.length; k++){
  326. if (classes[j].selectorText) if (classes[j].selectorText.indexOf(white_names[k])!=-1){
  327. if (debug==3) console.log("whitelisted: l:"+white_names[k]+" in s:"+classes[j].selectorText+" of "+styleSheets[i].sheet);
  328. state=0;
  329. }
  330. }
  331. if (state==1){
  332. stylesheet.deleteRule("position");
  333. }
  334. }
  335. }
  336. }
  337.  
  338. // show saved rules when opening a location containing "bloackhead-rules"
  339. if(window.location.toString().indexOf("blockhead-rules")!=-1){
  340. show_saved_generated_rules()
  341. copy_saved_generated_rules()
  342.  
  343. }
  344. // show saved rules when opening a location containing "bloackhead-statistics"
  345. if(window.location.toString().indexOf("blockhead-statistics")!=-1){
  346. show_saved_generated_statistics();
  347. copy_saved_generated_statistics();
  348. }
  349.  
  350. function copy_saved_generated_rules(){
  351. var text
  352. var s_rules=GM_SuperValue.get ("generated_rules")||[];
  353. for(var i=0, len=generated_rules.length;i<len;i++){
  354. //text+=s+'\n';
  355. text+=generated_rules[i]+'\n';
  356. //text+=rules[i]+'<br/>\n';
  357. GM_setClipboard(text, { type: 'text', mimetype: 'text/plain'});
  358. }
  359.  
  360. function show_saved_generated_rules(){
  361. var iDiv = document.createElement('div');
  362. iDiv.id = 'blockhead-rules';
  363. iDiv.style.margin = '0 auto';
  364. iDiv.style.position= "absolute";
  365. iDiv.style.backgroundColor ="white";
  366. iDiv.style.zIndex=9001000;
  367. iDiv.style.opacity=1;
  368. document.getElementsByTagName('body')[0].appendChild(iDiv);
  369.  
  370. rules=GM_SuperValue.get ("generated_rules");
  371. for(var i=0;i<rules.length;i++){
  372. iDiv.innerHTML+=rules[i]+'<br/>\n';
  373. }
  374. throw new Error('This is not an error. This is just to abort javascript');
  375. }
  376.  
  377. function copy_saved_generated_statistics(){
  378. var text;
  379. text='#white_names_counter:\ņ';
  380. var rules=GM_SuperValue.get ("white_names_counter");
  381. for (var key in rules) {
  382. text+=key+": "+rules[key]+'\n';
  383. }
  384. text+='\n############\n';
  385. text+='#black_keyword_counter:\ņ';
  386. rules=GM_SuperValue.get ("black_keywords_counter");
  387. for (var key in rules) {
  388. text+=key+": "+rules[key]+'\n';
  389. }
  390. GM_setClipboard(text);
  391. }
  392. function show_saved_generated_statistics(){
  393. var text;
  394. text='#white_names_counter:<br/>\ņ';
  395. var rules=GM_SuperValue.get ("white_names_counter");
  396. for (var key in rules) {
  397. text+=key+": "+rules[key]+'<br/>\n';
  398. }
  399. text+='<hr>\n';
  400. text+='#black_keyword_counter:<br/>\ņ';
  401. rules=GM_SuperValue.get ("black_keywords_counter");
  402. for (var key in rules) {
  403. text+=key+": "+rules[key]+'<br/>\n';
  404. }
  405. var iDiv = document.createElement('div');
  406. iDiv.id = 'blockhead-statistics';
  407. iDiv.style.margin = '0 auto';
  408. iDiv.style.position= "absolute";
  409. iDiv.style.backgroundColor ="white";
  410. iDiv.style.zIndex=9001000;
  411. iDiv.style.opacity=1;
  412. document.getElementsByTagName('body')[0].appendChild(iDiv);
  413.  
  414.  
  415. iDiv.innerHTML=text;
  416. throw new Error('This is not an error. This is just to abort javascript');
  417. }
  418.  
  419. // Kick it off starting with the `body` element
  420. if(walk_styles==1) style_walker();
  421. if(walk_elements==1) counted_element_walker(document.body,"onstart");
  422.  
  423. // check elements again if the page code changes
  424. if(walk_elements==1) document.onload = counted_element_walker(document.body,"onload");
  425.  
  426. // check elements again if the page code changes
  427. if(walk_elements==1) document.onchange = counted_element_walker(document.body,"onchange");
  428.  
  429. // check elements again if the user scrolls the page(doesnt really do anything)
  430. if(walk_elements==1) document.onscroll = counted_element_walker(document.body,"onscroll");
  431.  
  432.  
  433.  
  434. //check if the dom is modified and checks the changed elements again
  435. if(mutation_check==1 && walk_elements==1){
  436. MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
  437.  
  438. // define a new observer
  439. var obs = new MutationObserver(function(mutations, observer) {
  440. // look through all mutations that just occured
  441. for(var i=0; i<mutations.length; ++i) {
  442. for(var j=0; j<mutations[i].addedNodes.length; ++j) {
  443. //check this mutation
  444. counted_element_walker(mutations[i].addedNodes[j],"onmutation");
  445. }
  446. }
  447. });
  448.  
  449. // have the observer observe for changes in children
  450. obs.observe(document.body, {
  451. attributes : true, //check for attribute changes
  452. childList: true, //use a list of occured changes
  453. subtree: false //also return all subelements of a change
  454. });
  455. }