React + iframe content script #579

kaulsh · 2022-11-12T15:17:02Z

kaulsh
Nov 12, 2022

Hello 👋

I have a particular use-case that I'm having trouble understanding how I can setup correctly. What I have right now does not seem to work.

Here's the requirement

I want to load my primary extension as a sidepanel which loads on all sites in an iframe (for the security benefits). This is a react application.

To load the iframe, I went with the suggestion over here but it does not seem to work. It seems I cannot make the index.html file for the iframe load the react application.

Here's what I have so far (I've left comments)

// vite.config.js
import { crx, defineManifest } from '@crxjs/vite-plugin';
import react from '@vitejs/plugin-react';
import { defineConfig } from 'vite';

const manifest = defineManifest({
	name: 'Extension',
	version: '0.0.1',
	manifest_version: 3,
	background: {
		service_worker: 'src/background/main.ts', // worker which will keep track of network requests
		type: 'module',
	},
	host_permissions: ['https://meet.google.com/*'],
	permissions: ['tabs', 'webRequest'],
	content_scripts: [
		{
			js: ['src/iframe/main.ts'], // This is the content script which will inject the <iframe> into every page (shared below)
			matches: ['https://*/*'],
		},
                // more content scripts will come here with the same `matches` as above
	],
	web_accessible_resources: [
		{
			resources: ['index.html'],
			matches: ['https://*/*'],
		},
	],
	action: {},
});

export default defineConfig({
	plugins: [react(), crx({ manifest })],
	envDir: './',
	envPrefix: 'CHROME_XTN_',
	build: {
		rollupOptions: {
			input: {
				app: 'index.html', // This is the react application which I would like to load inside my iframe
			},
		},
	},
});

// src/iframe/main.ts
(async function main() {
        // this will mostly come from env, I've just done this temporarily
	const src = chrome.runtime.getURL('index.html');

	const iframe = document.createElement('iframe');

	iframe.src = src;

	document.documentElement.appendChild(iframe);
})();

export {};

// index.html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite</title>
</head>

<body>
    <div id="root"></div>
    <script type="module" src="/src/content/main.tsx"></script>
</body>

</html>

The iframe is injected correctly into every page and the contents of the iframe also show index.html above. However the script tag loading src/content/main.tsx fails with this error

GET chrome-extension://jabdolhecchhdkjfbjpjdmadaekdnelb/src/content/main.tsx net::ERR_FILE_NOT_FOUND

It seems the react app intented to load in the iframe is not being built.

Any suggestions on how I can achieve this?

Answered by kaulsh

Nov 12, 2022

Changing the iframe.src to http://localhost:5173/app seems to get it working in development environment, not yet tested for production.

-- edit

Works well with vite build. I'm taking the iframe src from env.

View full answer

kaulsh · 2022-11-12T18:18:27Z

kaulsh
Nov 12, 2022
Author

Changing the iframe.src to http://localhost:5173/app seems to get it working in development environment, not yet tested for production.

-- edit

Works well with vite build. I'm taking the iframe src from env.

3 replies

lequocbinh04 Apr 23, 2023

Not work for me :(

kaulsh Apr 25, 2023
Author

Can you share more information? I can try to help you out. The vite config and directory layout in your repository would be useful.

AndyInnovo Nov 9, 2024

For others landing here and since OP's code doesn't list it explicitly. I solved this in a manner similar to what the OP described and my code to get the iframe src looks like this:

    const src = import.meta.env.MODE === 'development' ?
      "http://localhost:5173/app.html" :
      chrome.runtime.getURL('app.html')

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

React + iframe content script #579

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 1 comment 3 replies

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

Select a reply

React + iframe content script #579

kaulsh Nov 12, 2022

Replies: 1 comment · 3 replies

kaulsh Nov 12, 2022 Author

lequocbinh04 Apr 23, 2023

kaulsh Apr 25, 2023 Author

AndyInnovo Nov 9, 2024

kaulsh
Nov 12, 2022

Replies: 1 comment 3 replies

kaulsh
Nov 12, 2022
Author

kaulsh Apr 25, 2023
Author