The Official Power User Tips, Tricks & Productivity Thread

[bnew]

been using this Powershell command and variations of it months ago to end PID processes in chrome, firefox & etc. don't remember which LLM i got to generate the command.

I just had an issue with a firefox sesson wit ha bunch of tabs open that suddenly had no network connectivity even though I had internet, si I just ended the last 15 or so most recent firefox PID's and voila my browser started working again without me having to restart it.

run in powershell:

Get-Process -Name firefox* | Sort-Object -Property StartTime -Descending | Select-Object -First 30 | ForEach-Object { $_.Id }

This command finds all processes related to Firefox, sorts them by the time they started in descending order (newest first), and then selects the IDs of the 30 most recently started processes. To find another process, such as Chrome, you can reuse the command by replacing "firefox*" with "chrome*". Here's how you can do it:

Get-Process -Name chrome* | Sort-Object -Property StartTime -Descending | Select-Object -First 30 | ForEach-Object { $_.Id }

 

[bnew]

Yandex

Finds everything

translate.yandex.com

this site is great for OCR(Optical Character Recognition) aka. image to text conversion and other translating operations.

If I want to search text or save text from a screenshot, I don't retype just copy the image and paste into the website.

 

[bnew]

started looking into this when I realized that direct imgur urls were redirecting to a html page unless the imgur url sent a imgur referrer.



i might have posted this already.

Image Max URL – Get this Extension for 🦊 Firefox (en-US)

Download Image Max URL for Firefox. Finds larger/original versions of images (supporting 9400+ websites), including a powerful image popup feature

addons.mozilla.org

Image Max URL​

Finds larger/original versions of images (supporting 9400+ websites), including a powerful image popup feature

---

GitHub - Owyn/HandyImage: browser userscript (extension) which Shows just fullsize Image with hotkeys & without pop-ups on many image-hosting sites

browser userscript (extension) which Shows just fullsize Image with hotkeys & without pop-ups on many image-hosting sites - Owyn/HandyImage

github.com

About​

browser userscript (extension) which Shows just fullsize Image with hotkeys & without pop-ups on many image-hosting sites

Features​

This script leaves just the image (largest available version) on pages of many image hosting sites skipping all the annoying stuff like ads, "continue to image" etc and disabling any kind of pop-ups. (script for images opened directly in browser can be found here - if you like centering of image, autoresize and hotkeys)

• Hotkeys - very handy ones
• fullsizing image to its largest available version when opened, nothing else than image
• autofit to screen big images by default (larger than screen both vertically and horizontally)
• address of page doesn't change so you still can copy\share it
• image centering (like in firefox) - pretty usefull on wide monitors
• configurable - choose background color and what images to fit to screen when opened, or run your js
• fast - does its job before page loads its resources (or run JavaScripts in FireFox)
• fail-safe - if it didn't find image to fullsize - it won't do anything to mess the page up and will try again in few sec.

---

Referer Modifier – Get this Extension for 🦊 Firefox (en-US)

Download Referer Modifier for Firefox. Modify the Referer header of HTTP requests: Remove, shorten, replace with custom data, or keep the Referer depending on the target domain.

addons.mozilla.org

Referer Modifierby Airtower​

Modify the Referer header of HTTP requests: Remove, shorten, replace with custom data, or keep the Referer depending on the target domain.

---

Imgur direct image/media page without HTML

Prevents Imgur from redirecting direct media URLs to their HTML page, keeping the correct file extension for images, GIFs and videos. Thanks to /u/american_spacey (https://www.reddit.com/r/firefox/comments/1exswyv/comment/lja7yc7/) for improvements.

greasyfork.org

Imgur direct image/media page without HTML​

Prevents Imgur from redirecting direct media URLs to their HTML page, keeping the correct file extension for images, GIFs and videos. Thanks to /u/american_spacey () for improvements.

---

GitHub - nopperl/load-reddit-images-directly: Firefox web extension that loads reddit images directly instead of referring to the HTML page containing the image.

Firefox web extension that loads reddit images directly instead of referring to the HTML page containing the image. - nopperl/load-reddit-images-directly

github.com

About​

Firefox web extension that loads reddit images directly instead of referring to the HTML page containing the image.

Load Reddit Images Directly​

Firefox web extension that loads reddit images directly instead of redirecting to the HTML page containing the image. This works for i.redd.it, preview.redd.it and external-preview.redd.it urls. Additionally, requests to www.reddit.com/media?url=$IMAGE_URL (i.e., the before-mentioned HTML page) are automatically redirected to $IMAGE_URL (i.e., the direct image url).

Note: a redirect to the original (high-res) image URL (the i.redd.it URL) can be preferred over the preview URL by changing the extension setting.

 

[bnew]

took less than 5 mins create and refine using llama 3.1 sonar-large129k

What the Code Does:

• Floating Window: Creates a floating window on the right side of the page.
• Buttons: Includes buttons to copy all URLs, close the window, and modify links.
• Modify Links Pane: Opens a sliding pane where you can enter text to prepend or replace in URLs.
• Sanitize URLs: Allows you to remove common trailing parameters like "?" and "&" from URLs.
• Undo/Redo: Lets you undo or redo changes made to the URLs.
• Remove Duplicates: Removes duplicate lines from the list of URLs.

In Simple Terms:This code helps you manage a list of URLs by:

• Displaying them in a floating window.
• Allowing you to copy all URLs at once.
• Providing an option to modify these URLs by adding or replacing text.
• Giving you checkboxes to clean up URLs by removing unnecessary parts like "?" and "&".
• Letting you undo or redo any changes made.
• Removing any duplicate entries from your list.

This makes it easier for users to work with lists of URLs efficiently.

Spoiler: old

This bookmarklet does the following:

1. Asks for Input: Prompts you to enter a pattern (like a search term or regex) to find specific URLs on the page.
2. Finds Matching URLs: Looks through all links, images, and scripts on the page and finds those that match your input pattern.
3. Displays Results: Creates a small floating window at the top-right corner of your screen showing all matching URLs.
4. Provides Buttons: Includes buttons to close the window and copy all found URLs to your clipboard.
5. Handles Esc Key: Allows you to close the window by pressing the Esc key.
6. Shows Notifications: Displays a brief message when you copy URLs to let you know it was successful or not.

In simple terms, this tool helps you quickly find and collect specific URLs from a webpage based on your search criteria, making it easier to manage and copy them.

not the same as above but a update/fork of a earlier version.
modified with Qwen2.5 72B





this update basically prepends the domain to any relative url so you don't get an output that starts with "/".

Changelog​

• Initial Version: Added basic functionality to extract and display URLs based on a user-provided regex pattern.
• Version 1.1: Improved the handling of relative URLs by converting them to full URLs using the current page's domain.
• Version 1.2: Removed comments to make the code more concise and streamlined.

Summary​

This bookmarklet is a small piece of JavaScript code that you can add to your browser's bookmarks. When you click on this bookmarklet, it will:

1. Ask for a Pattern: It will prompt you to enter a pattern (a specific string or a regular expression) to filter URLs on the current webpage.
2. Find Matching URLs: It will search through all links (a, img, and script; elements) on the page and collect URLs that match the pattern you provided.
3. Convert Relative URLs: It will convert any relative URLs (those starting with /) to full URLs by prepending the current page's domain.
4. Display the Results: It will display a floating window with a list of all the matching URLs.
5. Copy URLs: You can click the "Copy All" button to copy the entire list of URLs to your clipboard.
6. Close the Window: You can close the floating window by clicking the "Close" button or pressing the Esc key.

Conclusion​

Are you tired of manually copying URLs from webpages? Do you need to extract specific links quickly and efficiently? Try our "Extract URLs Bookmarklet"!

• Easy to Use: Just click the bookmarklet, enter your pattern, and let it do the work.
• Accurate Filtering: Use regular expressions to filter exactly the URLs you need.
• Full URLs: No more worrying about relative URLs. They are automatically converted to full URLs.
• Copy and Paste: With one click, you can copy all the extracted URLs to your clipboard.
• Efficient: Perfect for web developers, marketers, and anyone who needs to manage or extract links from webpages.

Add this bookmarklet to your browser today and streamline your workflow!

 

[Heimdall]

Reddit Archive​

I just found out about this Reddit archive, which actually seems to work for banned subs

Reddit Archive

There may be hope for my r/CTH bookmarks

 

[bnew]

Reddit Archive​

I just found out about this Reddit archive, which actually seems to work for banned subs

Reddit Archive

There may be hope for my r/CTH bookmarks

the website uses reddit.com/ for shorturls when that doesn't work so used an LLM to create a bookmarklet to use redd.it instead

Reddit Archive

javascript:(function(){var link=document.getElementById('reddit_link').querySelector('a');if(link){var href=link.href;if(href.startsWith('https://reddit.com/')||href.startsWith('http://reddit.com/')||href.startsWith('https://www.reddit.com/')||href.startsWith('http://www.reddit.com/')){link.href=href.replace('https://reddit.com/','https://redd.it/').replace('http://reddit.com/','https://redd.it/').replace('https://www.reddit.com/','https://redd.it/').replace('http://www.reddit.com/','https://redd.it/');}}})();

Now, when you click on this bookmark while on a page with an element matching #reddit_link, it will replace any links starting with:

• https://reddit.com/
• http://reddit.com/
• https://www.reddit.com/
• http://www.reddit.com/

with https://redd.it/.

// ==UserScript==
// @name         Reddit Link Modifier
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Modify Reddit links to use redd.it
// @author       You
// @match        https://ihsoyct.github.io/index.html?comments*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';
    var link = document.getElementById('reddit_link').querySelector('a');
    if (link) {
        var href = link.href;
        if (href.startsWith('https://reddit.com/') || href.startsWith('http://reddit.com/') || href.startsWith('https://www.reddit.com/') || href.startsWith('http://www.reddit.com/')) {
            link.href = href.replace('https://reddit.com/', 'https://redd.it/').replace('http://reddit.com/', 'https://redd.it/').replace('https://www.reddit.com/', 'https://redd.it/').replace('http://www.reddit.com/', 'https://redd.it/');
        }
    }
})();

Steps to Install​

1. Install a Script Manager:
   • If you haven't already, install Tampermonkey (for Chrome, Firefox, Safari) or Greasemonkey (for Firefox).
2. Create a New Script:
   • Open Tampermonkey or Greasemonkey and click on the "Create a new script" button.
3. Paste the Script:
   • Copy and paste the above userscript code into the editor.
4. Save the Script:
   • Save the script by clicking on the "Save" button.

Explanation​

• @match: This directive specifies that this script should only run on pages matching Reddit Archive.
• 'use strict';: This ensures that the script runs in strict mode.
• The rest of the code is similar to what was used in the bookmarklet, but it's now wrapped in a userscript format.

When you visit Reddit Archive, this userscript will automatically modify any links within an element with ID reddit_link to use https://redd.it/.

Example Usage​

After installing and saving this userscript:

• Visit Reddit Archive.
• The script will automatically modify any relevant Reddit links to use https://redd.it/.

 

[bnew]

created a bookmarklet and userscript to insert a reload button under the nitter rate limited error message. theres also a userscript version to auto reload if the error message is there,


Before:

after:

Bookmarklet


userscript that auto inserts the button if the error is present.


userscript that auto reloads the webpage if the error is present.

Explanation​

• Metadata: The script starts with metadata comments (// ==UserScript==) that specify the script's name, namespace, version, description, author, and match patterns.
• Match Patterns: The @match directives specify that this script should run on pages from nitter.poast.org and xcancel.com.
• Functionality:
  • The checkForErrorPanel function checks if an .error-panel element exists.
  • If it finds one, it logs a message and reloads the page using window.location.reload().
  • If not found, it logs a message indicating no error panel was detected.
• DOM Ready: The script waits for the DOM to be fully loaded before checking for the error panel.
• Periodic Check: Optionally, you can use setInterval to periodically check for the presence of an .error-panel in case it appears later (e.g., after some asynchronous operation).

Installation​

1. Install Tampermonkey or Greasemonkey:
   • For Chrome: Install Tampermonkey from here.
   • For Firefox: Install Greasemonkey from here.
2. Create a New Script:
   • Click on the Tampermonkey/Greasemonkey icon in your browser toolbar.
   • Select "Create a new script" or "New Script".
   • Replace any existing code with the provided userscript code.
3. Save and Enable:
   • Save the script by clicking on "Save" or pressing Ctrl+S (or Cmd+S on Mac).
   • Ensure that the script is enabled in your user script manager.

Now, when you visit pages on nitter.poast.org or xcancel.com, this userscript will automatically reload the page if it detects an .error-panel. If you've enabled periodic checking, it will continue to check every 5 seconds.

 

[bnew]

GitHub - chr15m/twiiit.com: A redirecting proxy for Nitter

A redirecting proxy for Nitter. Contribute to chr15m/twiiit.com development by creating an account on GitHub.

github.com

Redirecting proxy for Nitter instances​

There are currently instances online.

Nitter is an alternative frontend for Twitter. There are many public nitter instances which have varying levels of uptime. Some instances are rate limited, presumably due to high demand.

The purpose of this site is to redirect you to a public instance that is known to be running and not rate limited. This should help distribute the load more evenly across instances so they do not get rate limited as often.

This site pings each public instance listed in the wiki every five minutes to check if they are rate limited.

You can append any valid Twitter/Nitter URL to this page to be redirected. For example:

• /mccrmx will redirect you to my profile.
  
• /mccrmx/rss will redirect you to the RSS feed for my profile.
  
• /mccrmx/status/1363062307505405958 will redirect you to a specific tweet.
  

 

[bnew]

bookmarklet and userscript to add modifid comments links reddit posts,



Step-by-Step Explanation

• 
  * Select Comment Links: The code uses document.querySelectorAll('.comments') to find all HTML elements with the class .comments, which are typically the comment links on Reddit.
  * Extract Comment Count: For each selected comment link, it extracts the number of comments from the text content using parseInt(link.textContent.replace(/[^0-9]/g, '')).
  * Create Archive Links: It creates an archive link ("A1") that prepends https://archive.is/?run=1&url= to the original comment link.
  * If the comment count is greater than 200, it also creates a "500+" link by appending ?limit=500 to the original comment link and another archive link ("A2") for this new URL.
  * Add Event Listeners for Background Tabs: The code defines a function openInBackground that simulates pressing Ctrl+Click on a link, opening it in a new background tab.
  * It adds event listeners to each of these new links so that when clicked, they open in new background tabs.
  * Create List Items and Insert Them: The code creates separate <li> elements for each of these links ("A1", optionally "500+" and "A2").
  * If the comment count is less than 200, it only inserts the "A1" link after the original comment link.
  * If the comment count is greater than 200, it inserts all three links ("500+", "A1", and "A2") after the original comment link.

​

What the Code Does​

What the Code Does

• 
  * Find Comment Links: The code looks for all "comments" links on a Reddit page.
  * Check Comment Count: It checks how many comments are indicated in each link's text.
  * Conditional Logic Based on Comment Count:
  * If there are fewer than 200 comments, it adds only one new link:
  * An "A1" link that archives the original comment link.
  * If there are more than 200 comments, it adds three new links:
  * A "500+" link that shows more comments.
  * An "A1" link that archives the original comment link.
  * An "A2" link that archives the new "500+" comment link.
  * Open Links in Background Tabs: When you click on any of these new links ("500+", "A1", or "A2"), they open in new tabs without closing your current tab.

Example Outcome

If you have an HTML structure like this:

<ul class="flat-list buttons">
    <li class="first">
        <a href="[url=https://old.reddit.com/r/singularity/comments/1gco3xe/nobel_laureate_geoffrey_hinton_says_the/]https://old.reddit.com/r/singularity/comments/1gco3xe/nobel_laureate_geoffrey_hinton_says_the/[/url]" data-event-action="comments" class="bylink comments may-blank" rel="nofollow">150 comments</a>
    </li>
    <li class="first">
        <a href="[url=https://old.reddit.com/r/singularity/comments/1gco3xe/nobel_laureate_geoffrey_hinton_says_the/]https://old.reddit.com/r/singularity/comments/1gco3xe/nobel_laureate_geoffrey_hinton_says_the/[/url]" data-event-action="comments" class="bylink comments may-blank" rel="nofollow">250 comments</a>
    </li>
    <!-- Other list items -->
</ul>

After running this code, it will look like this:

For fewer than 200 comments:

<ul class="flat-list buttons">
    <li class="first">
        <a href="[url=https://old.reddit.com/r/singularity/comments/1gco3xe/nobel_laureate_geoffrey_hinton_says_the/]https://old.reddit.com/r/singularity/comments/1gco3xe/nobel_laureate_geoffrey_hinton_says_the/[/url]" data-event-action="comments" class="bylink comments may-blank" rel="nofollow">150 comments</a>
    </li>
    <li>
        <a href="[url=https://archive.is/?run=1&url=https://old.reddit.com/r/singularity/comments/1gco3xe/nobel_laureate_geoffrey_hinton_says_the/]https://archive.is/?run=1&url=https://old.reddit.com/r/singularity/comments/1gco3xe/nobel_laureate_geoffrey_hinton_says_the/[/url]" data-event-action="comments" class="bylink comments may-blank" rel="nofollow">A1</a>
    </li>
    <!-- Other list items -->
</ul>

For more than 200 comments:

Spoiler: more

<ul class="flat-list buttons">
    <li class="first">
        <a href="[url=https://old.reddit.com/r/singularity/comments/1gco3xe/nobel_laureate_geoffrey_hinton_says_the/]https://old.reddit.com/r/singularity/comments/1gco3xe/nobel_laureate_geoffrey_hinton_says_the/[/url]" data-event-action="comments" class="bylink comments may-blank" rel="nofollow">250 comments</a>
    </li>
    <li>
        <a href="[url=https://old.reddit.com/r/singularity/comments/1gco3xe/nobel_laureate_geoffrey_hinton_says_the/?limit=500]https://old.reddit.com/r/singularity/comments/1gco3xe/nobel_laureate_geoffrey_hinton_says_the/?limit=500[/url]" data-event-action="comments" class="bylink comments may-blank" rel="nofollow">500+</a>
    </li>
    <li>
        <a href="[url=https://archive.is/?run=1&url=https://old.reddit.com/r/singularity/comments/1gco3xe/nobel_laureate_geoffrey_hinton_says_the/]https://archive.is/?run=1&url=https://old.reddit.com/r/singularity/comments/1gco3xe/nobel_laureate_geoffrey_hinton_says_the/[/url]" data-event-action="comments" class="bylink comments may-blank" rel="nofollow">A1</a>
    </li>
    <li>
        <a href="[url=https://archive.is/?run=1&url=https://old.reddit.com/r/singularity/comments/1gco3xe/nobel_laureate_geoffrey_hinton_says_the/?limit=500]https://archive.is/?run=1&url=https://old.reddit.com/r/singularity/comments/1gco3xe/nobel_laureate_geoffrey_hinton_says_the/?limit=500[/url]" data-event-action="comments" class="bylink comments may-blank" rel="nofollow">A2</a>
    </li>
    <!-- Other list items -->
</ul>

Spoiler: old

userscript:

Spoiler: old

 

[bnew]

generated by chatgpt 4o-mini.

How to Back Up and Restore a Firefox Browser Extension: A Step-by-Step Guide

Backing up your browser extensions can be helpful if you want to move them to another computer, restore them after a reset, or just keep a copy for safekeeping. If you're using Mozilla Firefox (or a similar browser), here’s a simple, step-by-step guide to back up and restore your extensions.

What You’ll Need

• A computer with Mozilla Firefox installed.
• Basic understanding of using browser menus.
• A way to store the backup (e.g., an external hard drive or cloud storage).

Step 1: Access the Add-ons Page
To start, you’ll need to access the page where you can manage your extensions.

• Open Firefox on your computer.
• Press Ctrl + Shift + A on Windows or Cmd + Shift + A on macOS. This shortcut will open the Add-ons page, where you can see all the extensions installed in your browser.
• Alternatively, you can click the three horizontal lines (menu icon) in the upper-right corner, then select Add-ons and Themes from the drop-down menu.

Step 2: Open the "Debug Add-ons" Menu
Now that you're on the Add-ons page, we need to access some deeper settings to find the backup files for your extensions.

• In the upper-right corner of the Add-ons page, you'll see a gear icon ().
• Click on the gear icon and select "Debug Add-ons" from the dropdown menu.

Step 3: Find the Extension's ID
Each extension in Firefox has a unique ID that helps identify it. You’ll need to find this ID to locate the extension's files on your computer.

• In the Debug Add-ons menu, you'll see a list of all your installed extensions.
• Find the extension you want to back up and look for its ID. The ID will typically be a string of random letters and numbers (e.g., abcd1234@extensions.mozilla.org).
• Copy or note down this ID.

Step 4: Locate the Extension File (XPI File)
The XPI file is the actual file containing the extension, and it’s stored in a specific folder on your computer. Here’s how to find it:

• Open your Firefox Profile Folder:
  • Type about:support in the Firefox address bar and press Enter.
  • Under the "Application Basics" section, look for Profile Folder.
  • Click Open Folder (or Show in Finder on macOS) next to Profile Folder. This will open your Firefox profile directory.
• Find the "Extensions" Folder:
  • Inside your profile folder, you’ll see a folder named "extensions".
  • Open the "extensions" folder.
• Locate the XPI File:
  • Inside the "extensions" folder, you should see several folders and files. Look for the folder that matches the ID of the extension you want to back up (it will be named with the ID you copied earlier).
  • Inside this folder, you should find an XPI file (it will have a .xpi extension, like example-extension@mozilla.org.xpi).
  • Copy this XPI file and save it somewhere safe, like an external drive or cloud storage.

Step 5: Restore the Extension on a New Computer
Once you've backed up the XPI file, you can restore or install it on a new computer by following these steps:

• Open Firefox on the new computer.
• Click on the gear icon in the upper-right corner of the Add-ons page (same as before).
• Choose "Install Add-on From File" from the dropdown menu.
• Navigate to where you saved the XPI file (your backup), select it, and click Open.
• The extension will be installed and should appear in your list of add-ons!

Summary
By following these steps, you can back up and restore your Firefox extensions with ease:

• Access the Add-ons page (Ctrl + Shift + A).
• Open Debug Add-ons through the gear icon.
• Copy the Extension ID to find the right folder.
• Locate the XPI file in your profile folder under the "extensions" directory.
• Backup the XPI file to a safe location.
• To restore, use the "Install Add-on From File" option and select your backup file.

This method is straightforward and doesn’t require any special tools. It ensures that your favorite extensions are always available, even if you need to move them to a new computer or reinstall them later!

 

[bnew]

Detailed Summary​

This userscript is a small piece of code that runs automatically when you visit search results pages on Google or DuckDuckGo. Here’s what it does:

Purpose​

• The primary purpose of this userscript is to enhance your search experience by adding mirror links to each search result. These mirror links allow you to access the same content through different websites, which can be useful for various reasons such as bypassing restrictions or accessing content more quickly.

How It Works​

1. Selecting Search Results:
   • The script looks for individual search result elements on the page using specific selectors. These selectors are designed to work with both Google and DuckDuckGo search results.
2. Extracting Original URLs:
   • For each search result, it finds and extracts the original URL from the page. This is done by identifying specific HTML elements that contain the URL.
3. Fixing URLs:
   • If the extracted URL has any errors (like double "https://"), the script fixes them to ensure they are valid.
4. Removing Query Parameters:
   • It removes any query parameters (the part of the URL after a question mark) from the original URL. This helps in creating cleaner mirror links.
5. Generating Mirror Links:
   • The script creates new URLs by replacing the domain part of the original URL with several predefined mirror domains (e.g., twiiit.com, nitter.poast.org, xcancel.com, twstalker.com).
   • For example, if an original link is x.com, it will generate mirror links like https://twiiit.com/example, https://nitter.poast.org/example, etc.
6. Creating HTML Elements:
   • For each mirror domain, it creates an HTML anchor (<a>) element with the generated mirror URL.
   • These links are styled for better readability and separated by | characters for easy identification.
7. Appending Mirror Links:
   • The script appends these mirror links to each search result item. If a specific footer element is found within the result item, it appends the links there; otherwise, it appends them directly to the result item itself.
8. Waiting for Page Load:
   • To ensure that all elements are fully loaded before running the script, it uses a timeout of 2 seconds. This makes sure that all necessary parts of the page are available when the script runs.

User Experience​

• When you visit a search results page on Google or DuckDuckGo, this userscript will automatically add mirror links below each result.
• These mirror links will be displayed in a format like: twiiit.com | nitter.poast.org | xcancel.com | twstalker.com.
• Clicking on any of these links will take you to a mirrored version of the original website using the selected mirror domain.

bookmarklet:




userscript:

 

[bnew]

copy element content as it's rendered instead of less drag-highlight copy with the mouse.

What Does This Bookmarklet Do?​

This bookmarklet is a small piece of JavaScript code that you can save as a bookmark in your web browser. Here’s what it does in detail:

1. Highlighting and Copying Content​

• When you click on any element on a webpage (like text, images, or buttons), it highlights that element with a red border and copies its content (both the HTML code and plain text) to your clipboard.
• This makes it easy to copy parts of a webpage without having to manually select and copy the content.

2. Hover Pre-Highlight​

• When you hover your mouse over an element on the webpage, it temporarily adds a purple border around that element. This gives you a visual indication of which element will be copied if you click on it.
• This pre-highlight feature helps you see what you're about to copy before actually clicking.

3. Notifications​

• After copying content, the bookmarklet shows a small notification at the bottom left corner of your screen. The notification tells you that the content has been copied to your clipboard.
• If there are multiple notifications (up to 3), they stack up vertically at the bottom left corner of your screen.

4. Exiting the Bookmarklet​

• You can exit this mode by pressing either the 'Q' key or the 'Escape' key on your keyboard.
• When you exit, all highlights and pre-highlights are removed, and any remaining notifications disappear after a short delay.

Detailed Summary​

Step-by-Step Breakdown:

1. Initialization:
   • The bookmarklet sets up event listeners for mouse clicks, key presses, mouseovers, and mouseouts.
   • It also initializes variables to keep track of the currently highlighted element and any notifications.
2. Clicking an Element:
   • When you click on an element:
     • It removes any existing highlights.
     • It adds a red border around the clicked element (highlighting it).
     • It copies both the HTML code and plain text of the highlighted element to your clipboard.
     • It shows a notification indicating that the content has been copied.
3. Hovering Over an Element:
   • When you hover over an element:
     • It removes any existing pre-highlights.
     • It adds a purple border around the hovered element (pre-highlighting it).
4. Notifications:
   • Notifications are displayed at the bottom left corner of your screen.
   • If there are more than three notifications, the oldest one is removed to keep only three visible.
   • The positions of notifications are dynamically adjusted so they stack up correctly.
5. Exiting:
   • Pressing 'Q' or 'Escape' removes all event listeners, highlights, pre-highlights, and notifications.
   • A final notification is shown indicating that the bookmarklet has been exited.

In Simple Terms:​

• This bookmarklet helps you easily copy parts of webpages by highlighting them when clicked and providing visual cues when hovering over elements.
• It keeps you informed with notifications about what's happening.
• You can exit this mode easily using keyboard shortcuts.

This tool is particularly useful for web developers, content creators, or anyone who frequently needs to copy specific parts of web pages.

 

[bnew]

needed to make a tool that could remove element from the DOM permanently without having to open dev tools. it comes in handy when i need to remove unnecessary code on a webpage and later easily copy elements to chatgpt etc and not use a bunch of irrelevant tokens/characters. it's also great for getting rid of stuff you don't need before saving the webpage for offline viewing.

Semi-permanent Content element remover bookmarklet

Here’s a detailed summary of what this code does:

Element Selection and Removal​

• Click to Remove: When you activate the bookmarklet, you can click on any element on the webpage to remove it. This could be an ad, a distracting image, or any other element you want to hide.
• Temporary Removal: The selected element is removed from the webpage, but this removal is only temporary and does not persist across page reloads or browser sessions.

Highlighting and Pre-Highlighting​

• Visual Feedback: Before clicking, the element under your cursor is highlighted in purple (pre-highlight class), making it easier to identify which element you are about to remove.
• Selected Element Highlight: Once you click on an element, it is highlighted in red (highlight class) before being removed.

Undo and Redo Functionality​

• Undo: Pressing Ctrl+Z will restore the last removed element to its original position on the webpage. The element is moved from the removedElements array to the undoneElements array.
  
  
  
• Redo: Pressing Ctrl+Shift+Z will remove the last restored element again, effectively redoing the previous action. The element is moved back from the undoneElements array to the removedElements array.
  

Storage​

• Memory and Local Storage: The removed elements are stored both in memory (removedElements and undoneElements arrays) and in local storage, allowing for seamless undo and redo operations.

Notifications​

• Removal Notification: When an element is removed, a notification appears at the bottom left of the screen, informing you that the element has been removed and providing instructions on how to undo or redo the action.
• Undo/Redo Notifications: When you undo or redo an action, notifications are displayed to confirm the restoration or removal of the element.

Styling​

• Highlight Styles: The bookmarklet adds CSS styles to highlight the selected elements in red and pre-highlighted elements in purple.
• Notification Styles: Notifications are styled with a white background, gray border, and a box shadow, making them visually distinct.

Event Listeners and Handlers​

• Click Event: The handleClick function handles the click event, removing the selected element and storing its details for undo purposes.
  
  
• Key Press Event: The handleKeyPress function handles key press events, specifically Ctrl+Z for undo and Ctrl+Shift+Z for redo.
  
  
• Mouse Over and Out Events: The handleMouseOver and handleMouseOut functions handle mouse events, adding and removing the pre-highlight class to provide visual feedback.

Cleanup and Exit​

• Exit Functionality: Pressing Q or Escape will exit the bookmarklet, removing all event listeners, cleaning up temporary styles and notifications, and clearing the stored removed elements from local storage.
  

Summary​

This updated bookmarklet provides a user-friendly way to temporarily remove unwanted elements from webpages, with robust undo and redo functionality. Here are the key points:

• Element Removal: Click on any element to remove it temporarily.
• Undo and Redo: Use Ctrl+Z to undo and Ctrl+Shift+Z to redo the removals.
• Visual Feedback: Elements are highlighted in red before removal and pre-highlighted in purple on hover.
• Notifications: Informative notifications are displayed for removal, undo, and redo actions.
• Storage: Removed elements are stored in memory and local storage for seamless undo and redo operations.
• Styling: Custom CSS styles are applied for highlighting and notifications.
• Event Handling: Click, key press, mouse over, and mouse out events are handled to provide a smooth user experience.
• Cleanup: The bookmarklet can be exited by pressing Q or Escape, cleaning up all temporary changes.

This tool is particularly useful for quickly removing annoying elements like ads, pop-ups, or distracting images without the need for more complex browser extensions or developer tools.

edit:
had to update it because it didn't work to remove elements on another site i tested, this removes them but not always able to undo removals.

Spoiler: old

The Semi-Permanent Content Element Remover is like a temporary editing tool for webpages. It lets you remove, highlight, and experiment with different content on a webpage without permanently altering it. You can undo changes, redo them, and easily exit when you’re done. It’s useful for things like testing page layouts, cleaning up distractions, or customizing a webpage for a more comfortable experience, all without making permanent changes to the website itself.