☰

Edit Text on Webpage

Enable or disable the ability to edit any text on a given webpage by clicking a button in the top right corner of the screen.

  1. // ==UserScript==
  2. // @name         Edit Text on Webpage
  3. // @namespace    http://tampermonkey.net/
  4. // @version      1.0
  5. // @description  Enable or disable the ability to edit any text on a given webpage by clicking a button in the top right corner of the screen.
  6. // @author       You
  7. // @match        *://*/*
  8. // @grant        none
  9. // @require      http://code.jquery.com/jquery-latest.js
  10. // @license MIT
  11. // ==/UserScript==
  12.  
  13. (function() {
  14.     'use strict';
  15.  
  16.     let isEditingEnabled = false;
  17.  
  18.     const enableEditing = () => {
  19.         $('*').attr('contenteditable', 'true');
  20.         isEditingEnabled = true;
  21.     };
  22.  
  23.     const disableEditing = () => {
  24.         $('*').attr('contenteditable', 'false');
  25.         isEditingEnabled = false;
  26.     };
  27.  
  28.     const toggleEditing = () => {
  29.         if (isEditingEnabled) {
  30.             disableEditing();
  31.         } else {
  32.             enableEditing();
  33.         }
  34.     };
  35.  
  36.     const createEditButton = () => {
  37.         const editButton = $('<button>', {
  38.             text: 'Edit Text',
  39.             id: 'edit-text-button',
  40.             click: toggleEditing
  41.         });
  42.  
  43.         const buttonStyles = {
  44.             'position': 'fixed',
  45.             'top': '5px',
  46.             'right': '5px',
  47.             'z-index': '9999',
  48.             'background-color': '#1e90ff',
  49.             'color': 'white',
  50.             'border': 'none',
  51.             'padding': '5px 10px',
  52.             'border-radius': '5px',
  53.             'font-size': '14px',
  54.             'cursor': 'pointer'
  55.         };
  56.  
  57.         editButton.css(buttonStyles);
  58.  
  59.         $('body').append(editButton);
  60.     };
  61.  
  62.     createEditButton();
  63. })();