Así que obtengo el clásico "Los recursos deben estar enumerados en la clave de manifiesto web_accessible_resources para que las páginas fuera de la extensión los carguen". error en la consola. El problema es que creo que está en la lista correctamente, ya que funciona en todas partes, excepto en este sitio por alguna razón: https://raw.githubusercontent.com/InventivetalentDev/minecraft-assets/1.18.2/assets/minecraft/textures/ bloque/suciedad.png
Aquí están las partes relacionadas de mis archivos (estoy usando el manifiesto v3):
manifiesto.json
"web_accessible_resources": [ { "resources": ["content.css", "sprite.svg"], "matches": ["<all_urls>"] } ], "content_scripts": [{ "matches": ["<all_urls>"], "js": ["content-script.js"], "run_at": "document_start" }]contenido-script.js
function injectCSS() { const link = newElement('link'); const head = $('head'); link.rel = 'stylesheet'; link.type = "text/css" link.href = chrome.runtime.getURL('content.css'); head.appendChild(link); }Entonces, para cualquiera que encuentre esta pregunta mientras busca una solución para este problema en el futuro:
La razón por la que esto sucede es que este sitio tiene una política de contenido estricta, que no permite que todos los recursos (por ejemplo, imágenes u hojas de estilo) provengan de él. Hay 2 formas de resolver este problema:
1. Solución fácil y rápida
manifiesto.json
"content_scripts":[ { "js": ["content-script.js"], "css": ["style.css"], "matches": ["https://stackoverflow.com/*"] } ]
2. Una solución alternativa que aprendí de los scripts
contenido-script.js
window.addEventListener('load', function() { injectCSS(); }) function injectCSS() { const style = document.createElement('style'); const head = document.querySelector('head'); style.rel = 'stylesheet'; style.type = "text/css" style.textContent = css; head.appendChild(style); } const css = ` ::-webkit-scrollbar { display: none; } `