Last active
December 28, 2023 05:33
-
-
Save skymen/6204aada1ad29a78e1295c1e8fcfb465 to your computer and use it in GitHub Desktop.
Blur Twitter Timeline
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // ==UserScript== | |
| // @name Blur Twitter Timeline | |
| // @namespace http://tampermonkey.net/ | |
| // @version 2023-12-14 | |
| // @description try to take over the world! | |
| // @author You | |
| // @match https://twitter.com/* | |
| // @icon https://www.google.com/s2/favicons?sz=64&domain=twitter.com | |
| // @grant none | |
| // ==/UserScript== | |
| (function() { | |
| 'use strict'; | |
| let blurState = true; | |
| let existsState = false; | |
| // Your code here... | |
| function createBlurOverlay(targetDiv, navDiv) { | |
| const oldOverlay = document.getElementById("skymen_tpmnky_overlay") | |
| const oldBtn = document.getElementById("skymen_tpmnky_btn") | |
| if (oldOverlay) oldOverlay.remove() | |
| if (oldBtn) oldBtn.remove() | |
| // Ensure the targetDiv has a position set to relative or absolute | |
| if (window.getComputedStyle(targetDiv).position === 'static') { | |
| targetDiv.style.position = 'relative'; | |
| } | |
| // Create the overlay div | |
| const overlay = document.createElement('div'); | |
| overlay.id="skymen_tpmnky_overlay" | |
| Object.assign(overlay.style, { | |
| position: 'absolute', | |
| display: blurState?'block':'none', | |
| top: '0', | |
| left: '0', | |
| width: '100%', | |
| height: '100%', | |
| backdropFilter: 'blur(30px)', | |
| }); | |
| // Create the overlay div | |
| const screenOverlay = document.createElement('div'); | |
| Object.assign(screenOverlay.style, { | |
| position: 'sticky', | |
| top: '0', | |
| left: '0', | |
| width: '100%', | |
| height: '100vh', | |
| display: 'flex', | |
| justifyContent: 'center', | |
| alignItems: 'center' | |
| }); | |
| // Create the button | |
| const button2 = document.createElement('button'); | |
| button2.id="skymen_tpmnky_btn" | |
| button2.textContent = 'Blur'; | |
| button2.onclick = function() { | |
| overlay.style.display = 'block'; | |
| button2.style.display = 'none'; | |
| blurState = true; | |
| }; | |
| Object.assign(button2.style, { | |
| position: 'absolute', | |
| right: '0', | |
| display: blurState?'none':'block', | |
| height: '2.5rem', | |
| width: '2.5rem', | |
| marginTop: 'auto', | |
| backgroundColor: 'rgba(255,255,255,0.8)', | |
| color: 'black', | |
| fontWeight: 'bold', | |
| border: 'none', | |
| borderRadius: '34px', | |
| }); | |
| navDiv.appendChild(button2) | |
| // Create the button | |
| const button = document.createElement('button'); | |
| button.textContent = 'Disable Blur'; | |
| button.onclick = function() { | |
| overlay.style.display = 'none'; | |
| button2.style.display = 'block'; | |
| blurState = false; | |
| }; | |
| Object.assign(button.style, { | |
| width: '90%', | |
| height: '3rem', | |
| backgroundColor: 'rgba(255,255,255,0.8)', | |
| color: 'black', | |
| fontWeight: 'bold', | |
| border: 'none', | |
| borderRadius: '34px', | |
| }); | |
| // Append the button to the overlay and the overlay to the target div | |
| screenOverlay.appendChild(button); | |
| overlay.appendChild(screenOverlay); | |
| targetDiv.appendChild(overlay); | |
| } | |
| function waitForElements(selectors, callback) { | |
| const observer = new MutationObserver(mutations => { | |
| const allElementsExist = selectors.every(selector => | |
| document.querySelector(selector) | |
| ); | |
| if (allElementsExist && !existsState) { | |
| callback(); | |
| existsState = true; | |
| //observer.disconnect(); // Stop observing once the elements are found | |
| } else if (!allElementsExist && existsState) { | |
| existsState = false; | |
| } | |
| }); | |
| observer.observe(document.body, { | |
| childList: true, // observe direct children | |
| subtree: true, // and lower descendants too | |
| attributes: false, | |
| characterData: false | |
| }); | |
| } | |
| // Usage example | |
| waitForElements(["div[data-testid=primaryColumn]", "div[data-testid=primaryColumn] > div > div > div > div > div > nav"], () => { | |
| createBlurOverlay(document.querySelector("div[data-testid=primaryColumn]"), document.querySelector("div[data-testid=primaryColumn] > div > div > div > div > div > nav")); | |
| }); | |
| })(); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment