extend-text

README.adoc

Extend text content with one click

Instead of using devtools to change text content of a specific element, just press alt and click on that element, its text content will be repeated 5 times. Press shift alt and click it again to reset its text content to original value.

extend-text.user.js

// ==UserScript==
// @name          	extend-text
// @description     extend text content with one click
//
// @author			    zeeko <contact@zeeko.dev>
// @namespace       http://github.com/ZeekoZhu
// @downloadURL	    https://gist.github.com/ZeekoZhu/662a7ea844c2478924127a3e3bc84a57/raw/extend-text.user.js
//
// @license         GPLv3 - http://www.gnu.org/licenses/gpl-3.0.txt
//
// @include         http://*
// @include         https://*
//
// @require         https://gist.github.com/ZeekoZhu/662a7ea844c2478924127a3e3bc84a57/raw/main.js
//
// @version         1.0
// @updateURL       https://gist.github.com/ZeekoZhu/662a7ea844c2478924127a3e3bc84a57/raw/extend-text.user.js
//
// @run-at			document-start
// @unwrap
// ==/UserScript==

/**
 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation, either version 3 of the License, or
 * (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
 * GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License
 * along with this program. If not, see <http://www.gnu.org/licenses/>.
 */

(function() {	
	
})();

main.js

// use tree walker to find all text node

const isInButton = (node) => {
  while (node) {
    if (node.tagName === "BUTTON") {
      return true;
    }
    node = node.parentNode;
  }
  return false;
};

const isInScriptOrStyle = (node) => {
  return node.parentNode.tagName === "SCRIPT" || node.parentNode.tagName === "STYLE";
};

const getAllTextNodes = (root) => {
  const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT, {
    acceptNode(node) {
      // the node is not inside a button
      // and the node is not inside a script tag or style tag
      return !isInButton(node) && !isInScriptOrStyle(node);
    }
  });

  const textNodes = [];
  while (walker.nextNode()) {
    textNodes.push(walker.currentNode);
  }
  return textNodes;
};

const extendText = (node) => {
  const textNodes = getAllTextNodes(node);
  textNodes.forEach(n => {
    if (!n.originalText) {
      n.originalText = n.nodeValue;
    }
    n.nodeValue = n.originalText.repeat(5);
  });
};

const resetText = node => {
  const textNodes = getAllTextNodes(node);
  textNodes.forEach(n => {
    if (n.originalText) {
      n.nodeValue = n.originalText;
    }
  });
};

const init = () => {
  // add a click event listener to the current document
  // when the user clicks on an element with `alt` pressed,
  // extends the text in the element
  document.addEventListener("click", (e) => {
    if (e.altKey) {
      if (e.shiftKey) {
        resetText(e.target);

      } else {
        extendText(e.target);
      }
      e.preventDefault();
      e.stopPropagation();
    }
  });
};

init();