Content UI script import to background workers for use with chrome.scripting.executeScript

[ghost]

Hi I was wondering if this was possible?

I would like to use the contents scripts when a button is pressed within the popup. So on click event send a message to the background worker to execute the content ui script.

All permissions are enabled for scripting.

I get the "could not load file" error. This could be due to it not being added to the web_accessible_resources part of the manifest? Which seemingly is only possible with files imported into content scripts?. Or is this not meant to work and I'm going about it wrong?

Thanks

[ColdSauce]

This is something we'd love to have in the framework but we haven't gotten to building it out just yet.

The way to get something similar is to hide your CSUI and then send a message to it from the background service worker when you want it to "appear" (aka become visible)

But we'll eventually support exactly what you want to do here.

[ghost]

Yeah I see it's a planned feature! Thanks for the quick reply. I will look out for it. I've just ended sticking with what you mentioned.

//popup.tsx
function IndexPopup() {
	const handleClick = () => {
		chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
			chrome.tabs.sendMessage(tabs[0].id, "msg from popup");
		});
	};

	return (
		<div
			<div className="text-xl">
				<button onClick={handleClick}>colour select</button>
			</div>
		</div>
	);
}

export default IndexPopup;

//finder.tsx content script
const Finder = () => {
	const [active, setActive] = useState(false);

	const el = useRef(null);

	const handleMessage = (msg, sender, response) => {
		console.log("message test from popup");
		console.log(msg, sender);
		setActive(!active);
	};

	useEffect(() => {
		chrome.runtime.onMessage.addListener(handleMessage);
		return () => chrome.runtime.onMessage.removeListener(handleMessage);
	}, []);
	return (
		<>
			{active ? (
				<>
					<button
						onClick={() => setActive(false)}
						className="text-white font-semibold fixed top-8 right-8 font-sans
             p-2 bg-black bg-opacity-50 backdrop-blur-lg rounded-xl">
						Exit finder
					</button>
				</>
			) : null}
		</>
	);
};