☰

NotebookLM Fullscreen

Make NotebookLM dialog fullscreen with proper content scaling

  1. // ==UserScript==
  2. // @name         NotebookLM Fullscreen
  3. // @namespace    http://tampermonkey.net/
  4. // @version      0.9
  5. // @description  Make NotebookLM dialog fullscreen with proper content scaling
  6. // @author       hulu
  7. // @match        https://notebooklm.google.com/*
  8. // @grant        GM_addStyle
  9. // @run-at       document-start
  10. // @license      MIT
  11. // ==/UserScript==
  12.  
  13. (function() {
  14.     'use strict';
  15.  
  16.     const debug = {
  17.         log: (...args) => console.log('[NotebookLM Debug]', ...args)
  18.     };
  19.  
  20.     // 使用 MutationObserver 替代 DOMNodeInserted
  21.     const observer = new MutationObserver((mutations) => {
  22.         const dialog = document.querySelector('.mat-mdc-dialog-container');
  23.         const container = document.querySelector('.cdk-overlay-container');
  24.  
  25.         if(container) {
  26.             if(dialog && dialog.querySelector('.note-editor')) {
  27.                 container.style.backgroundColor = 'rgba(0, 0, 0, 0.8)';
  28.             } else {
  29.                 container.style.backgroundColor = 'transparent';
  30.             }
  31.         }
  32.     });
  33.  
  34.     // 启动观察器
  35.     const observerConfig = {
  36.         childList: true,
  37.         subtree: true,
  38.         attributes: true,
  39.         characterData: true
  40.     };
  41.  
  42.     if (document.body) {
  43.         observer.observe(document.body, observerConfig);
  44.     } else {
  45.         window.addEventListener('DOMContentLoaded', () => {
  46.             observer.observe(document.body, observerConfig);
  47.         }, { passive: true });
  48.     }
  49.  
  50.     // 注入样式
  51.     GM_addStyle(`
  52.         /* 弹出框容器 */
  53.         .cdk-overlay-container {
  54.             width: 100vw !important;
  55.             height: 100vh !important;
  56.             position: fixed !important;
  57.             top: 0 !important;
  58.             left: 0 !important;
  59.             z-index: 9999 !important;
  60.             display: flex !important;
  61.             justify-content: center !important;
  62.             align-items: center !important;
  63.         }
  64.  
  65.         /* 弹出框包装器 */
  66.         .cdk-global-overlay-wrapper {
  67.             width: 100vw !important;
  68.             height: 100vh !important;
  69.             position: fixed !important;
  70.             top: 0 !important;
  71.             left: 0 !important;
  72.             margin: 0 !important;
  73.             padding: 0 !important;
  74.         }
  75.  
  76.         /* 笔记编辑器对话框样式 */
  77.         .note-editor .mat-mdc-dialog-container,
  78.         .note-editor .mat-mdc-dialog-content,
  79.         .note-editor {
  80.             width: 100vw !important;
  81.             height: 100vh !important;
  82.             max-width: none !important;
  83.             max-height: none !important;
  84.             margin: 0 !important;
  85.             padding: 0 !important;
  86.             position: fixed !important;
  87.             top: 0 !important;
  88.             left: 0 !important;
  89.             transform: none !important;
  90.             box-sizing: border-box !important;
  91.         }
  92.  
  93.         /* 编辑器内容 */
  94.         .ql-editor,
  95.         .prosemirror-editor,
  96.         .markdown-editor-legacy {
  97.             height: calc(100vh - 64px) !important;
  98.             width: 100% !important;
  99.             padding: 20px 40px !important;
  100.             box-sizing: border-box !important;
  101.             overflow-y: auto !important;
  102.             background-color: var(--v2-surface) !important;
  103.         }
  104.  
  105.         /* 移除所有遮罩 */
  106.         .cdk-overlay-backdrop,
  107.         .cdk-overlay-dark-backdrop,
  108.         .cdk-overlay-backdrop-showing,
  109.         .cdk-overlay-connected-position-bounding-box {
  110.             display: none !important;
  111.             opacity: 0 !important;
  112.             visibility: hidden !important;
  113.             pointer-events: none !important;
  114.         }
  115.  
  116.         /* 修复主内容区域 */
  117.         .main-contents {
  118.             pointer-events: auto !important;
  119.             background: transparent !important;
  120.         }
  121.  
  122.         /* 修复按钮样式 */
  123.         .note-header__controls {
  124.             position: fixed !important;
  125.             top: 12px !important;
  126.             right: 12px !important;
  127.             z-index: 2 !important;
  128.             display: flex !important;
  129.             gap: 8px !important;
  130.         }
  131.  
  132.         /* 修复按钮点击事件 */
  133.         .note-editor-close-button,
  134.         .mat-mdc-button,
  135.         .mat-icon,
  136.         .mat-mdc-button-touch-target,
  137.         .mat-mdc-menu-content,
  138.         .mat-mdc-menu-panel {
  139.             pointer-events: auto !important;
  140.             cursor: pointer !important;
  141.             position: relative !important;
  142.             z-index: 1 !important;
  143.         }
  144.  
  145.         /* 优化按钮焦点指示器 */
  146.         .mat-focus-indicator {
  147.             position: relative !important;
  148.             display: inline-flex !important;
  149.             align-items: center !important;
  150.             justify-content: center !important;
  151.             min-width: fit-content !important;
  152.             max-width: 100% !important;
  153.             box-sizing: border-box !important;
  154.             padding: 0 8px !important;
  155.             height: 36px !important;
  156.         }
  157.  
  158.         /* 按钮内部文字自适应 */
  159.         .mat-focus-indicator .mdc-button__label {
  160.             display: inline-flex !important;
  161.             align-items: center !important;
  162.             white-space: nowrap !important;
  163.             overflow: hidden !important;
  164.             text-overflow: ellipsis !important;
  165.             flex: 0 1 auto !important;
  166.             min-width: 0 !important;
  167.             height: 100% !important;
  168.         }
  169.  
  170.         /* 保持按钮图标大小固定 */
  171.         .mat-focus-indicator .mat-icon {
  172.             flex: 0 0 auto !important;
  173.             width: 24px !important;
  174.             height: 24px !important;
  175.             font-size: 24px !important;
  176.             line-height: 24px !important;
  177.             margin: 0 4px !important;
  178.             display: flex !important;
  179.             align-items: center !important;
  180.             justify-content: center !important;
  181.         }
  182.  
  183.         /* 确保按钮边界不被内容撑开 */
  184.         .mat-focus-indicator.mat-mdc-button {
  185.             max-width: 300px !important;
  186.             height: 36px !important;
  187.             display: inline-flex !important;
  188.             align-items: center !important;
  189.             justify-content: center !important;
  190.             border-radius: 18px !important;
  191.             overflow: hidden !important;
  192.         }
  193.  
  194.         .note-editor-close-button {
  195.             <!-- display: flex !important; -->
  196.             align-items: center !important;
  197.             justify-content: center !important;
  198.             width: 40px !important;
  199.             height: 40px !important;
  200.             border-radius: 50% !important;
  201.             background: rgba(255, 255, 255, 0.1) !important;
  202.             border: none !important;
  203.             color: var(--v2-on-surface-emphasis) !important;
  204.         }
  205.  
  206.         .note-editor-close-button:hover {
  207.             background: rgba(255, 255, 255, 0.2) !important;
  208.         }
  209.  
  210.         /* 移除所有过渡动画 */
  211.         .cdk-overlay-container *,
  212.         .mat-mdc-dialog-container *,
  213.         .cdk-global-overlay-wrapper *,
  214.         .cdk-overlay-pane * {
  215.             transition: none !important;
  216.             animation: none !important;
  217.         }
  218.  
  219.         /* 修复分享对话框样式 */
  220.         .sharing-dialog {
  221.             position: relative !important;
  222.             width: 500px !important;
  223.             max-width: 90vw !important;
  224.             height: auto !important;
  225.             background: var(--v2-surface) !important;
  226.             border-radius: 28px !important;
  227.             box-shadow: 0 8px 16px rgba(0, 0, 0, 0.14) !important;
  228.             z-index: 10000 !important;
  229.         }
  230.  
  231.         .sharing-dialog .mat-mdc-dialog-container {
  232.             position: static !important;
  233.             width: 100% !important;
  234.             height: auto !important;
  235.             max-height: 90vh !important;
  236.             transform: none !important;
  237.             margin: 0 !important;
  238.             padding: 24px !important;
  239.             background: transparent !important;
  240.         }
  241.  
  242.         /* 分享对话框的遮罩 */
  243.         .sharing-dialog ~ .cdk-overlay-backdrop {
  244.             display: block !important;
  245.             opacity: 1 !important;
  246.             visibility: visible !important;
  247.             pointer-events: auto !important;
  248.             background: rgba(0, 0, 0, 0.32) !important;
  249.             position: fixed !important;
  250.             top: 0 !important;
  251.             left: 0 !important;
  252.             right: 0 !important;
  253.             bottom: 0 !important;
  254.             z-index: 9999 !important;
  255.         }
  256.  
  257.         /* 修复分享对话框内部布局 */
  258.         .sharing-dialog .mat-mdc-dialog-surface {
  259.             display: block !important;
  260.             position: relative !important;
  261.             box-sizing: border-box !important;
  262.         }
  263.  
  264.         /* 确保分享对话框在正确的位置 */
  265.         .sharing-dialog .cdk-overlay-pane {
  266.             position: fixed !important;
  267.             top: 50% !important;
  268.             left: 50% !important;
  269.             transform: translate(-50%, -50%) !important;
  270.         }
  271.  
  272.         /* 修复标题层级 */
  273.         .mat-card-title,
  274.         [class*="note-title"],
  275.         [class*="ngcontent"] {
  276.             position: relative !important;
  277.             z-index: 1 !important;
  278.         }
  279.  
  280.         /* 修复编辑器背景 */
  281.         .note-editor {
  282.             background-color: var(--v2-surface) !important;
  283.         }
  284.  
  285.         /* 确保菜单显示在按钮上层 */
  286.         .cdk-overlay-container {
  287.             position: fixed !important;
  288.             z-index: 1000 !important;
  289.             pointer-events: none !important;
  290.         }
  291.  
  292.         .cdk-overlay-pane {
  293.             pointer-events: auto !important;
  294.             position: absolute !important;
  295.         }
  296.  
  297.         /* 修复菜单项点击事件 */
  298.         .mat-mdc-menu-item {
  299.             pointer-events: auto !important;
  300.             cursor: pointer !important;
  301.             position: relative !important;
  302.             z-index: 2 !important;
  303.         }
  304.  
  305.         /* 修复设置图标显示 */
  306.         .settings-icon.mat-icon {
  307.             position: relative !important;
  308.             z-index: 100 !important;
  309.             display: inline-flex !important;
  310.             align-items: center !important;
  311.             justify-content: center !important;
  312.         }
  313.  
  314.         /* 修复分享标签自适应 */
  315.         .share-label.ng-star-inserted {
  316.             max-width: 200px !important;
  317.             white-space: nowrap !important;
  318.             overflow: hidden !important;
  319.             text-overflow: ellipsis !important;
  320.             display: inline-block !important;
  321.         }
  322.  
  323.         /* 确保分享按钮容器正确显示 */
  324.         .settings-button {
  325.             display: flex !important;
  326.             align-items: center !important;
  327.             gap: 8px !important;
  328.             padding: 0 16px !important;
  329.             height: 36px !important;
  330.             border-radius: 18px !important;
  331.             background: var(--v2-settings-button-background) !important;
  332.         }
  333.  
  334.         /* 确保图标和文字垂直居中 */
  335.         .settings-button .mat-icon,
  336.         .settings-button .settings-label {
  337.             display: inline-flex !important;
  338.             align-items: center !important;
  339.             vertical-align: middle !important;
  340.         }
  341.  
  342.         .mat-icon {
  343.             -webkit-user-select: none;
  344.             user-select: none;
  345.             background-repeat: no-repeat;
  346.             display: inline-block;
  347.             fill: currentColor;
  348.             height: 24px;
  349.             width: 24px;
  350.             overflow: visible !important;
  351.             position: relative !important;
  352.             z-index: auto !important;
  353.         }
  354.         :where(:root) .gmat-mdc-button.mat-mdc-extended-fab {
  355.             padding-left: 24px;
  356.             padding-right: 24px;
  357.             line-height: 36px !important;
  358.             height: 36px !important;
  359.             display: inline-flex !important;
  360.             align-items: center !important;
  361.             justify-content: center !important;
  362.         }
  363.  
  364.         /* 确保 extended-fab 按钮内容对齐 */
  365.         :where(:root) .gmat-mdc-button.mat-mdc-extended-fab .mdc-button__label {
  366.             display: inline-flex !important;
  367.             align-items: center !important;
  368.             height: 100% !important;
  369.             line-height: normal !important;
  370.         }
  371.     `);
  372.  
  373.     debug.log('脚本加载完成');
  374. })();