☰

Modify More Fonts in Google Docs/Slides

Adds Select All button and makes the More Fonts tab modern and rounded in Google Docs/Slides

  1. // ==UserScript==
  2. // @name         Modify More Fonts in Google Docs/Slides
  3. // @namespace    http://tampermonkey.net/
  4. // @version      1.0
  5. // @description  Adds Select All button and makes the More Fonts tab modern and rounded in Google Docs/Slides
  6. // @author       YourName
  7. // @match        https://docs.google.com/document/d/*
  8. // @match        https://docs.google.com/presentation/d/*
  9. // @grant        none
  10. // ==/UserScript==
  11.  
  12. (function() {
  13.     'use strict';
  14.  
  15.     // Function to add a "Select All" button in the More Fonts tab
  16.     function addSelectAllButton() {
  17.         let observer = new MutationObserver(function(mutations) {
  18.             mutations.forEach(function(mutation) {
  19.                 // Check if the More Fonts dialog exists
  20.                 let moreFontsDialog = document.querySelector('.docs-fontmenu ul');
  21.  
  22.                 // Check if the Select All button is already added
  23.                 if (moreFontsDialog && !document.querySelector('.select-all-button')) {
  24.                     // Create the "Select All" button
  25.                     let selectAllButton = document.createElement('button');
  26.                     selectAllButton.classList.add('select-all-button');
  27.                     selectAllButton.textContent = 'Select All';
  28.                     selectAllButton.style.cssText = `
  29.                         display: block;
  30.                         margin: 10px auto;
  31.                         padding: 10px 20px;
  32.                         background-color: #4CAF50;
  33.                         color: white;
  34.                         border: none;
  35.                         border-radius: 5px;
  36.                         cursor: pointer;
  37.                     `;
  38.  
  39.                     // Event listener to select all fonts (or whatever action you want)
  40.                     selectAllButton.addEventListener('click', function() {
  41.                         let fontOptions = moreFontsDialog.querySelectorAll('.goog-menuitem');
  42.                         fontOptions.forEach(font => {
  43.                             // Trigger selection of each font (or simulate action here)
  44.                             console.log('Selected font:', font.textContent);
  45.                             // You can add more functionality to actually apply the font here
  46.                         });
  47.                     });
  48.  
  49.                     // Insert the Select All button at the top of the More Fonts dialog
  50.                     moreFontsDialog.parentElement.insertBefore(selectAllButton, moreFontsDialog);
  51.                 }
  52.             });
  53.         });
  54.  
  55.         observer.observe(document.body, { childList: true, subtree: true });
  56.     }
  57.  
  58.     // Function to make the More Fonts dialog modern and rounded
  59.     function modernizeMoreFonts() {
  60.         let observer = new MutationObserver(function(mutations) {
  61.             mutations.forEach(function(mutation) {
  62.                 // Check if the More Fonts dialog exists
  63.                 let moreFontsDialog = document.querySelector('.docs-fontmenu');
  64.  
  65.                 if (moreFontsDialog && !document.querySelector('.modernized-font-menu')) {
  66.                     // Apply modern rounded styles to the More Fonts dialog
  67.                     moreFontsDialog.classList.add('modernized-font-menu');
  68.                     moreFontsDialog.style.cssText = `
  69.                         border-radius: 15px;
  70.                         padding: 15px;
  71.                         box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  72.                         background-color: white;
  73.                     `;
  74.  
  75.                     // Style individual font options
  76.                     let fontOptions = moreFontsDialog.querySelectorAll('.goog-menuitem');
  77.                     fontOptions.forEach(fontOption => {
  78.                         fontOption.style.cssText = `
  79.                             padding: 10px 20px;
  80.                             border-radius: 10px;
  81.                             transition: background-color 0.2s ease;
  82.                         `;
  83.                         // Add hover effect
  84.                         fontOption.addEventListener('mouseenter', function() {
  85.                             fontOption.style.backgroundColor = '#f0f0f0';
  86.                         });
  87.                         fontOption.addEventListener('mouseleave', function() {
  88.                             fontOption.style.backgroundColor = 'transparent';
  89.                         });
  90.                     });
  91.                 }
  92.             });
  93.         });
  94.  
  95.         observer.observe(document.body, { childList: true, subtree: true });
  96.     }
  97.  
  98.     // Run the functions after a delay to ensure the page has loaded
  99.     window.setTimeout(addSelectAllButton, 2000);
  100.     window.setTimeout(modernizeMoreFonts, 2000);
  101.  
  102. })();