#30 Ostras pues ni idea de lo que lo estará rompiendo. Un 404 puede darlo al cargar el contenido del tweet sobre la instancia de nitter o el tema de las imágenes. Comenta o borra de la línea 48 a la 55 a ver, no te cargará imágenes pero por ver si es esta la que da problemas. No uso multi containers así que no tengo un entorno para probar.
#31 Era por el tweet id. Por alguna razón terminaba con sufijo _dark
, no se si tiene que ver con el tema de mediavida que tengo puesto. Asi que lo he arreglado quitandole el sufijo antes de hacer la llamada a nitter.
Y también el css, que era transparente y se ve mal con fondo negro. Ahora el color del tweet es blanco opaco.
// ==UserScript==
// @name MV Twitter Fix
// @namespace http://tampermonkey.net/
// @version 1.0
// @description Probando fix para tweets embedidos con anti tracking
// @author neZbo
// @match https://www.mediavida.com/foro/*
// @icon https://www.google.com/s2/favicons?sz=64&domain=mediavida.com
// @grant GM_xmlhttpRequest
// @connect nitter.lucabased.xyz
// ==/UserScript==
(async function() {
'use strict'
const nitterInstance = 'https://nitter.lucabased.xyz' // Nitter instances: https://github.com/zedeus/nitter/wiki/Instances
const makeCorsRequest = async (url, blob = false) => {
return new Promise((resolve, reject) => {
GM_xmlhttpRequest({
method: 'GET',
url: url,
responseType: blob ? 'blob' : 'text',
onload: function(response) {
if (response.status >= 200 && response.status < 300) {
if (blob) resolve(response.response)
else resolve(response.responseText)
} else {
reject('Request failed with status: ' + response.status)
}
},
onerror: function(error) {
reject('Request failed: ' + error)
}
})
})
}
const fetchTweetContent = async (tweetId) => {
const text = await makeCorsRequest(nitterInstance + '/user/status/' + tweetId)
const parser = new DOMParser()
const doc = parser.parseFromString(text, 'text/html')
const tweetContent = doc.querySelector('div.main-thread')
const tweetText = tweetContent.querySelector('div.tweet-content.media-body')
const tweetHeader = tweetContent.querySelector('div.fullname-and-username a.username')
const tweetImage = tweetContent.querySelector('div.attachments img')
let allContent = tweetHeader.outerHTML + '<hr style="margin:5px"/>' + tweetText.innerHTML
if (tweetImage) {
tweetImage.src = tweetImage.src.replace("https://www.mediavida.com", nitterInstance)
const localImage = await makeCorsRequest(tweetImage.src, true)
const localUrl = URL.createObjectURL(localImage);
tweetImage.src = localUrl
tweetImage.style = 'width:450px;height:auto;margin:auto;display:block;border-radius:10px;'
allContent += '<hr style="margin:5px"/>' + tweetImage.outerHTML
}
return allContent ? allContent : 'Tweet content not found'
}
const twitterFix = async () => {
const tweets = document.querySelectorAll('div[data-s9e-mediaembed="twitter"]')
tweets.forEach(async tweet => {
const iframe = tweet.querySelector('iframe')
if (iframe) {
let tweetId = iframe.src.split('#')[1]
// Remove unintented suffixes, like '_dark'
tweetId = tweetId.split('_')[0];
tweet.innerHTML = ''
const tweetText = await fetchTweetContent(tweetId)
const tweetLink = 'https://x.com/user/status/' + tweetId
tweet.innerHTML = `
<blockquote class="twitter-tweet" onclick="window.open('${tweetLink}', '_blank');return false;" style="background-color: #ffffff; border: 1px solid #e1e8ed; border-radius: 10px; padding: 10px;">
<img src="https://cdn-icons-png.freepik.com/256/13480/13480324.png" style="display:inline; width:30px; margin-right: 10px"/>
<p style="display:inline; color: #111; font: normal 13px Verdana, Geneva, sans-serif; text-decoration: none;">
${tweetText}
</p>
</blockquote>
`;
}
})
}
await twitterFix()
const twitter_observer = new MutationObserver(async mutationRecords => {
await twitterFix()
})
if (document.querySelector("#foros")) twitter_observer.observe(document.querySelector("#foros"), { subtree: true, childList: true })
})()
#32 Ahh claro, yo lo voy haciendo para el tema normal de MV, si los selectores cambian al cambiar el tema (por ejemplo clases css) es normal que se rompa xD