Estoy tratando de escribir una extensión de Chrome y quiero tomar una captura de pantalla de cierto elemento html de la página de Facebook. Pensé en escribir lienzo html 2 yo mismo, pero ya hay una biblioteca html2canvas. Decidí usarlo en mi content script en la página de Facebook, me está dando un error diciendo
Refused to load the script '<URL>' because it violates the following Content Security Policy directive: "script-src 'self'". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.Aquí está mi archivo manifest.json:
{ ... "manifest_version": 3, "content_scripts": [ { "matches": [ "https://*.facebook.com/*" ], "js": [ "html2canvas.js", "constants.js", "common/jquery.js", "content/index.js" ] } ] }Mi content_script tiene la siguiente línea. Intenté iniciar sesión en la consola y funciona bien. Pero,
$(window).on('load', function () { $('body').on('click', "div", async function (e) { const ariaLabel = $(this).attr("aria-label"); if (ariaLabel?.startsWith(COMMENT_DIV_ARIA_LABEL)) { const canvas = await html2canvas($(this)?.[0]); } if (ariaLabel?.startsWith(REPLY_DIV_ARIA_LABEL)) { const replyLink = $(this).find("a").attr("href"); } })});
Estoy recuperando el lienzo (intenté iniciar sesión en la consola, pero no verifiqué su salida), pero aparece el error mencionado anteriormente. ¿Alguien puede decirme una forma correcta de inyectar el script? ¿O tal vez incluso decirme qué estoy haciendo mal? Además, intenté agregar CSP en el archivo manifest.json.