Canvas interferes with layout when CSP specified

[karlhorky]

Hi @neaumusic, thanks again for this extension! 🙌

Just wanted to quickly report a problem that I have seen with certain websites which specify a CSP (Content Security Policy), such as GitHub avatar URLs. The inline styles for the canvas element are prevented to load because of the CSP directives. The inline styles are being added in addStyleElement():

selection-highlighter/src/chrome_extension/content_script/utils.ts

Lines 7 to 31 in d742eab

	export async function addStyleElement() {
	const style = document.createElement("style");
	style.textContent = `
	::highlight(${highlightName()}) {
	${Object.entries(highlightStyles())
	.map(([styleName, styleValue]) => `${styleName}: ${styleValue};`)
	.join("\n ")}
	}
	.${scrollMarkersCanvasClassName()} {
	pointer-events: none;
	position: fixed;
	z-index: 2147483647;
	top: 0;
	right: 0;
	width: 16px;
	height: 100vh;
	}
	`;
	return new Promise<void>((resolve) => {
	requestAnimationFrame(() => {
	document.body.appendChild(style);
	resolve();
	});
	});
	}

The height="868" and width="32" attributes on the canvas, when not applied with the styles cause a large empty space at the top, which pushes other content down - in the GitHub avatar example, it appears as if the image is having trouble loading (really, it's just further down on the page, if the user scrolls):

Demo URL: https://avatars.githubusercontent.com/u/3423750?v=4

Kapture.2023-08-20.at.11.04.03.mp4

Maybe the canvas can be hidden in other ways for websites specifying a CSP (or if there are other problems with the CSP, maybe the CSP could be overridden with a nonce from the extension, randomly generated on each page load)

[neaumusic]

hmmm, so that error looks unrelated the extension (you can follow the link / reveal source / in sidebar), but I think you might be on to something about the canvas styling