Remover en la web de Twitter el login pop up con las devtools de Chrome
Así nos quitamos el irritante pop-up de login, que nos impide seguir leyendo la web de Twitter, si no tenemos cuenta o si no estamos logueados:
De paso prácticamos programar en Javascript.
cuentas de Twitter: https://twitter.com/chemaalonso , https://twitter.com/tomnomnom
Firefox:
1- Ctrl + Shift + K // Entramos en la consola de herramientas para desarrolladores.
2- Copiar & pegar:
document.getElementsByClassName("css-1dbjc4n r-14lw9ot r-1867qdf r-1jgb5lz r-pm9dpa r-1ye8kvj r-1rnoaur r-13qz1uu")[0].style.display = "none";
document.getElementsByTagName('html')[0].style.overflow = 'scroll';
document.getElementsByClassName("r-1ffj0ar")[0].style.backgroundColor="rgba(0, 0, 0, 0)";
3-¡Darle al enter!
4-Cerrar consola y seguir navegando.
5-"El script" Se puede guardar y recargar desde el Sistema para reutilizar:
Ctrl+S/Ctrl+O, o Cmd+S/Cmd+O en OSX.
En Chrome parecido, pero tienen algo mejor, Snippets, una manera rápida de almacenar los scripts:
https://developer.chrome.com/docs/devtools/javascript/snippets/
También alguien se tomo el trabajo de hacer un Add-on:
https://github.com/MaySoMusician/breakthrough-twitter-login-wall
Leer el código, utiliza la detección de eventos para prevenir el ¡pop!
A partir del código de MaysoMusician, he armado un snippet que se puede correr desde el principio, este espera que se cargue la ventana para enseguida ocultarla.
En Firefox pegar en la consola, antes del ¡pop!
Snippet:
function _getLayersDiv() {
return new Promise((resolve, _reject) => {
const timer = () => {
const layers = document.querySelector('#layers')
if (layers) return resolve(layers)
setTimeout(timer, 500)
}
setTimeout(timer, 500)
})
}
function _hideLoginDialog(
/** @type ElementCSSInlineStyle */
element
) {
if (element.style.display === 'none') return false
element.style.display = "none";
document.getElementsByTagName('html')[0].style.overflow = 'scroll';
document.getElementsByClassName("r-1ffj0ar") [0].style.backgroundColor="rgba(0, 0, 0, 0)";
return true
}
const layersDiv = await _getLayersDiv()
const observer = new MutationObserver((mutationRecords) => {
/** @type {HTMLDivElement[]} */
const dialogElements = mutationRecords
.flatMap((record) => Array.from(record.addedNodes))
// Only select div elements (other than any element, text, etc.)
.filter((addedNode) => addedNode.nodeName.toLowerCase() === 'div')
.flatMap((addedDiv) =>
Array.from(
addedDiv.querySelectorAll(':scope > div > div > div[role="dialog"]')
)
)
if (dialogElements.length < 1) return
const hideTarget = dialogElements[0].parentNode.parentNode.parentNode
const hidden = _hideLoginDialog(hideTarget)
if (hidden) {
console.log ("Twitter anoying login Wall 'd been removed") }
alert("Twitter Login Wall removed!")
})
observer.observe(layersDiv, { childList: true, subtree: false })
Actualización 21/10/22:
Colección de snippets en Javascript.
https://codepo8.github.io/dearconsole/
