☰

Add Extra Tabs to Google Docs/Slides

Add extra tabs for Drawing and Erase by Lines to Google Docs and Slides

  1. // ==UserScript==
  2. // @name         Add Extra Tabs to Google Docs/Slides
  3. // @namespace    http://tampermonkey.net/
  4. // @version      0.1
  5. // @description  Add extra tabs for Drawing and Erase by Lines to Google Docs and Slides
  6. // @match        https://docs.google.com/document/d/*
  7. // @match        https://docs.google.com/presentation/d/*
  8. // @grant        none
  9. // @run-at       document-end
  10. // ==/UserScript==
  11.  
  12. (function() {
  13.     'use strict';
  14.  
  15.     function addCustomTabs() {
  16.         // Wait for the Google Docs/Slides page to fully load
  17.         const interval = setInterval(() => {
  18.             // Select the toolbar or relevant section where you want to add the tabs
  19.             const toolbar = document.querySelector('.kix-appview-editor');
  20.  
  21.             if (toolbar) {
  22.                 // Clear the interval once the toolbar is found
  23.                 clearInterval(interval);
  24.  
  25.                 // Create a container for the new tabs
  26.                 const customTabsContainer = document.createElement('div');
  27.                 customTabsContainer.className = 'custom-tabs-container';
  28.  
  29.                 // Create the "Drawing" tab
  30.                 const drawingTab = document.createElement('div');
  31.                 drawingTab.className = 'custom-tab';
  32.                 drawingTab.textContent = 'Drawing';
  33.                 drawingTab.style.cursor = 'pointer';
  34.                 drawingTab.onclick = function() {
  35.                     alert('Drawing tab clicked! Implement drawing functionality here.');
  36.                 };
  37.  
  38.                 // Create the "Erase by Lines" tab
  39.                 const eraseTab = document.createElement('div');
  40.                 eraseTab.className = 'custom-tab';
  41.                 eraseTab.textContent = 'Erase by Lines';
  42.                 eraseTab.style.cursor = 'pointer';
  43.                 eraseTab.onclick = function() {
  44.                     alert('Erase by Lines tab clicked! Implement erasing functionality here.');
  45.                 };
  46.  
  47.                 // Append the new tabs to the container
  48.                 customTabsContainer.appendChild(drawingTab);
  49.                 customTabsContainer.appendChild(eraseTab);
  50.  
  51.                 // Append the container to the toolbar
  52.                 toolbar.appendChild(customTabsContainer);
  53.  
  54.                 // Add basic styling for the custom tabs
  55.                 const style = document.createElement('style');
  56.                 style.textContent = `
  57.                     .custom-tabs-container {
  58.                         display: flex;
  59.                         gap: 10px;
  60.                         padding: 10px;
  61.                         background-color: #f1f1f1;
  62.                     }
  63.                     .custom-tab {
  64.                         padding: 5px 10px;
  65.                         background-color: #ddd;
  66.                         border: 1px solid #ccc;
  67.                         border-radius: 4px;
  68.                     }
  69.                     .custom-tab:hover {
  70.                         background-color: #bbb;
  71.                     }
  72.                 `;
  73.                 document.head.appendChild(style);
  74.             }
  75.         }, 1000); // Check every second
  76.     }
  77.  
  78.     // Add custom tabs when the page loads
  79.     window.addEventListener('load', addCustomTabs);
  80. })();