Browser extension to watch YouTube videos without the distracting cruft around it, in the full window.

youtubecinema/ background.js
80 lines
2.6 KiB

  1. // Be compatible with Chrome|ium. We do not need the full webextension-polyfill.
  2. if (typeof browser === 'undefined') {
  3. this.browser = chrome
  4. };
  5. var cinemaModeEnabled = true;
  6. var cruftedUrlPattern = /^(https?):\/\/(?:.+\.)youtube\.com\/watch\?.*v=([^&#]+)/;
  7. var embeddableUrlPattern = /^(https?):\/\/(?:.+\.)youtube\.com\/embed\/([^&?#]+)/;
  8. // Turn a video url into its embeddable (full-window) version (and vice versa, if bothDirections==true).
  9. function makeNewUrl(url, bothDirections) {
  10. if (cinemaModeEnabled) {
  11. var match = url.match(cruftedUrlPattern);
  12. if (!match)
  13. return;
  14. var scheme = match[1];
  15. var videoId = match[2];
  16. return scheme + '://www.youtube.com/embed/' + videoId + '?rel=0&autoplay=1';
  17. }
  18. else if (bothDirections) {
  19. var match = url.match(embeddableUrlPattern);
  20. if (!match)
  21. return;
  22. var scheme = match[1];
  23. var videoId = match[2];
  24. return scheme + '://www.youtube.com/watch?v=' + videoId;
  25. }
  26. }
  27. // Redirect crufted videos to their full-window version.
  28. function onBeforeRequestListener(details) {
  29. var newUrl = makeNewUrl(details.url, false)
  30. // From the embed, enable one to follow the "watch on YouTube" link (on browsers that pass originUrl)
  31. if (newUrl === details.originUrl)
  32. return
  33. return {redirectUrl: newUrl};
  34. }
  35. browser.webRequest.onBeforeRequest.addListener(
  36. onBeforeRequestListener,
  37. {urls: ["*://*.youtube.com/watch*"]},
  38. ['blocking']
  39. );
  40. // Show the pageAction button if looking at a video (either with or without cruft).
  41. browser.webNavigation.onCommitted.addListener(function (details) {maybeShowPageAction(details.tabId, details.url);});
  42. browser.webNavigation.onHistoryStateUpdated.addListener(function (details) {maybeShowPageAction(details.tabId, details.url);});
  43. function maybeShowPageAction(tabId, url) {
  44. var matchEmbeddable = url.match(embeddableUrlPattern);
  45. var matchCruft = url.match(cruftedUrlPattern);
  46. if (matchEmbeddable || matchCruft) {
  47. browser.pageAction.show(tabId);
  48. // In Chrome|ium, listeners stay across page changes, in Firefox they don't. So check first.
  49. if (!browser.pageAction.onClicked.hasListener(handlePageAction))
  50. browser.pageAction.onClicked.addListener(handlePageAction);
  51. }
  52. }
  53. // Enable/Disable cinema mode when the pageAction button is clicked.
  54. function handlePageAction(tab) {
  55. var matchEmbeddable = tab.url.match(embeddableUrlPattern);
  56. if (matchEmbeddable)
  57. cinemaModeEnabled = false;
  58. else
  59. cinemaModeEnabled = true;
  60. // Relocate this page to reflect the new mode.
  61. var newUrl = makeNewUrl(tab.url, true)
  62. if (newUrl)
  63. browser.tabs.update(tab.id, {url: newUrl});
  64. }