Geekbang player tweak

tweak caption size

  1. // ==UserScript==
  2. // @name Geekbang player tweak
  3. // @namespace http://tampermonkey.net/
  4. // @version 0.1
  5. // @description tweak caption size
  6. // @author You
  7. // @match https://u.geekbang.org/*
  8. // @icon https://www.google.com/s2/favicons?sz=64&domain=geekbang.org
  9. // @grant none
  10. // @license MIT
  11. // ==/UserScript==
  12.  
  13. (function() {
  14. 'use strict';
  15. window.addEventListener('load', function() {
  16. var fontSize = 55;
  17. var btn = document.createElement('button');
  18. btn.type = 'button';
  19. var style = btn.style;
  20. style.position = 'absolute';
  21. style.top = '190px';
  22. style.right = '10px';
  23. style.zIndex = 9999;
  24. style.paddingLeft = '10px';
  25. style.paddingRight = '10px';
  26. style.background = 'linear-gradient(-30deg,#f2802a,#fe9022)';
  27. style.border = 'none';
  28. style.boxShadow = '1px 3px 15px 0 rgb(242 128 42 / 20%)';
  29. style.boxSizing = 'border-box';
  30. style.width = '40px';
  31. style.height = '40px';
  32. style.borderRadius = '40px';
  33. style.cursor = 'pointer';
  34. var icon = document.createElement('i');
  35. icon.classList.add('iconfont');
  36. icon.innerHTML = '😀';
  37. btn.appendChild(icon);
  38. document.body.appendChild(btn);
  39. var options = {
  40. actived: false
  41. };
  42. btn.addEventListener('click', function () {
  43. function resetFontStyle(e) {
  44. e.removeAttribute('style');
  45. }
  46. function setFontStyle(e) {
  47. var style = e.style;
  48. style.fontSize = fontSize + 'px';
  49. style.lineHeight = fontSize + 'px';
  50. style.bottom = '100px';
  51. }
  52. var captionChildren = document.querySelector('.gkplayer').childNodes;
  53. var container = captionChildren[6];
  54. var backdrop = captionChildren[5];
  55. if (options.actived) {
  56. resetFontStyle(container);
  57. resetFontStyle(backdrop);
  58. options.actived = false;
  59. } else {
  60. setFontStyle(container);
  61. setFontStyle(backdrop);
  62. options.actived = true;
  63. }
  64. });
  65. }, false);
  66. })();