寻求两款Bookmarklet：清空网页全部内容、弹窗输入文本并展示

Got it, let's break down these two bookmarklets step by step—they're simple to implement with basic JavaScript, and I'll explain both the how and the code so you understand what's going on.

1. Bookmarklet to Clear Entire Webpage Content #

Implementation Idea #

Bookmarklets run JavaScript directly in the context of the current page. To wipe all content completely, we can target the root HTML element (document.documentElement) and erase its inner HTML—this removes every visible element, including headers, scripts, styles, and footers. Targeting the full HTML element is more thorough than just wiping the <body> tag alone.

Readable Code (For Understanding) #

javascript:(function() {
  // Wipe every element inside the root HTML tag
  document.documentElement.innerHTML = '';
  // Optional: Reset body styles to eliminate leftover spacing
  document.body.style.margin = '0';
  document.body.style.padding = '0';
})();

Compressed Version (For Your Bookmark Bar) #

Create a new bookmark, paste this as the URL, or drag it directly to your bookmarks bar:

javascript:(function(){document.documentElement.innerHTML='';document.body.style.margin='0';document.body.style.padding='0';})();

2. Bookmarklet to Prompt for Text & Display It on the Page #

Implementation Idea #

We'll use the browser's built-in prompt() function to collect user input. Then, we'll create a styled HTML element (a prominent, centered <div>) to show the input, add styles to make it stand out, and append it to the page. We'll also add a check to skip execution if the user clicks "Cancel" (so we don't add an empty element).

Readable Code (For Understanding) #

javascript:(function() {
  // Ask the user for input
  const userText = prompt('Enter the text you want to display:');
  
  // Only proceed if the user entered text (didn't cancel)
  if (userText) {
    // Create a new div to hold the text
    const displayBox = document.createElement('div');
    
    // Style the box to be eye-catching and centered
    displayBox.style.cssText = `
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 2.5rem;
      padding: 2.5rem;
      background: #fff;
      border: 3px solid #222;
      border-radius: 10px;
      z-index: 99999;
      box-shadow: 0 0 25px rgba(0,0,0,0.3);
      max-width: 80%;
      text-align: center;
    `;
    
    // Insert the user's text into the box
    displayBox.textContent = userText;
    
    // Add the box to the page
    document.body.appendChild(displayBox);
  }
})();

Compressed Version (For Your Bookmark Bar) #

Create a new bookmark and paste this as the URL:

javascript:(function(){const e=prompt('Enter the text you want to display:');if(e){const t=document.createElement('div');t.style.cssText='position: fixed;top: 50%;left: 50%;transform: translate(-50%, -50%);font-size: 2.5rem;padding: 2.5rem;background: #fff;border: 3px solid #222;border-radius: 10px;z-index: 99999;box-shadow: 0 0 25px rgba(0,0,0,0.3);max-width: 80%;text-align: center;',t.textContent=e,document.body.appendChild(t)}})();

Quick Tips #

• All modern browsers support bookmarklets by default—just ensure JavaScript isn't blocked for bookmarks in your settings.
• For the second bookmarklet, feel free to tweak the CSS in the readable code (change font size, colors, etc.) before compressing it to match your preferences.

内容的提问来源于stack exchange，提问作者Gamma