inject custom content script from Popup.tsx #329

lealahm · 2023-12-11T11:34:32Z

In the above code, I try adding a custom content script folder apart from the default content folder, which would be the code that can be injected on the page when the user clicks on a button inside popup.tsx or using background script.

github-actions

Thank you for your contribution. We will check and reply to you as soon as possible.

PatrykKuniczak

I don't think this is good idea to create duplicated content script.

I mean create step by step instruction, where you describe how to use this, dev which want to implement this, can copy content script, describe only how to attach this to project, like you create in this PR, and describe how to use this excecuteScript :)

src/pages/popup/Popup.tsx

vite.config.ts

src/pages/injectedContent/ui/index.tsx

romaindequidt · 2023-12-27T15:09:56Z

src/pages/injectedContent/ui/index.tsx

+refreshOnUpdate('pages/content');
+
+const root = document.createElement('div');
+root.id = 'chrome-extension-boilerplate-react-vite-content-view-root';


Suggested change

root.id = 'chrome-extension-boilerplate-react-vite-content-view-root';

root.id = 'chrome-extension-boilerplate-react-vite-injected-content-view-root';

@lealahm Why did you don't commit this suggestion?

src/pages/injectedContent/index.ts

src/pages/injectedContent/ui/app.test.tsx

src/pages/injectedContent/ui/app.tsx

src/pages/popup/Popup.tsx

romaindequidt · 2023-12-29T11:07:03Z

I try to use your branch and had to following erreur as soon as content script is run at the document start :

Have you managed to make it work on your side?

romaindequidt · 2023-12-29T15:28:42Z

May you relate this pull request to its issue #306 , please ? Thanks,

Co-authored-by: Romain Dequidt <[email protected]>

lealahm · 2023-12-30T04:46:59Z

@romaindequidt, Hello, I was also facing the same problem once I tested this out and still trying to solve this problem

Co-authored-by: Romain Dequidt <[email protected]>

PatrykKuniczak · 2024-01-10T10:30:10Z

@lealahm any moves forward?

tngflx · 2024-01-24T19:51:20Z

@lealahm @romaindequidt the latest vite preload plugin already solved this problem, 685da06

aspiers · 2024-01-28T23:45:06Z

I don't think these changes are enough; I was doing something very similar but I also needed to change this line:

chrome-extension-boilerplate-react-vite/utils/plugins/inline-vite-preload-script.ts

Line 10 in 685da06

if (!/content/.test(chunk.fileName)) {

In the case of this PR, it would need to be:

 if (!/content|injectedContent/.test(chunk.fileName)) {

aspiers · 2024-01-29T00:03:23Z

src/pages/popup/Popup.tsx

+  const injectContentScript = async () => {
+    const [tab] = await chrome.tabs.query({ currentWindow: true, active: true });
+    console.log(tab.id)
+    chrome.scripting.executeScript({


This results in

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'executeScript')

I think you need to have the scripting permission in the manifest. You also need to have the activeTab permission, or have the content script allowed as described here:

https://developer.chrome.com/docs/extensions/reference/api/scripting

enmanuelmag · 2024-01-29T14:40:16Z

I try to use your branch and had to following erreur as soon as content script is run at the document start : Have you managed to make it work on your side?

I'm facing the same problem, it's explained in this issue, this PR will solve the problem? I want to preserve the behaviour of inject content automatically without open Popup manually. All code works fine when build in devleopment mode, but in production mode I got the mentioned error.

aspiers · 2024-01-29T23:16:56Z

@lealahm @romaindequidt the latest vite preload plugin already solved this problem, 685da06

@tngflx It didn't solve it for me; please can you share a working example?

tngflx · 2024-01-30T02:05:01Z

@aspiers Hi man, can I know what's your error? By running the inline script by default in vite.config.ts that should do it, that plugin is just a hook event inside vite upon bundling.

Edit : ok I take back my word, the inline script on latest commit is rather buggy, the first line

if (!/content/.test(chunk.fileName)) {
              return null;
     }

already f us over...

aspiers · 2024-01-30T11:27:02Z

Edit : ok I take back my word, the inline script on latest commit is rather buggy, the first line
if (!/content/.test(chunk.fileName)) {
              return null;
     }
already f us over...

I already provided this solution in this comment.

tngflx · 2024-01-30T13:05:10Z

try my solution... #357

    const filter = createFilter(options.include, options.exclude);
    
async writeBundle(outputOptions, bundle) {
    const outputDir = outputOptions.dir || (outputOptions.file && path.dirname(outputOptions.file));
    let fileToDelete: string | null = null;

    if (!outputDir) {
        console.error('Unable to determine the output directory.');
        return;
    }

    for (const [fileName, outputChunk ] of Object.entries(bundle) as [string, OutputChunk][]) {
        if (!filter(fileName)) {
            continue; // Skip files that don't match the filter
        }

        let modifiedCode = outputChunk.code;

        // Check if the filename contains "index.js"
        if (fileName.includes('index.js')) {
            // Replace import statements with the actual code
            const importStatementRegex = /import\s*\{[^\}]*__vitePreload[^\}]*\}\s*from\s*['"]([^'"]+)['"];/g;
            const exportStatementRegex = /export\s*\{\s*__vitePreload\s*as\s*_\s*\};/g;

            modifiedCode = modifiedCode.replace(importStatementRegex, (_, relativePath) => {
                const absolutePath = path.resolve(outputDir, path.dirname(fileName), relativePath);

                try {
                    let fileContent = fs.readFileSync(absolutePath, 'utf-8');
                    fileContent = fileContent.replace(exportStatementRegex, '');
                    return fileContent;

                } catch (error) {
                    console.error(`Error reading file: ${absolutePath}`, error);
                    return _; // Return the original import statement if there is an error
                }finally {
                    // Store the file path for deletion outside the loop
                    fileToDelete = absolutePath;
                }
            })
        }
        
        try {
            fs.writeFileSync(path.resolve(outputDir, fileName), modifiedCode, 'utf-8');
        } catch (error) {
            console.error(`Error writing file: ${path.resolve(outputDir, fileName)}`, error);
        }

    }

    if (fileToDelete) {
        try {
            fs.unlinkSync(fileToDelete);
        } catch (error) {
            console.error(`Error removing file: ${fileToDelete}`, error);
        }
    }
},

I made this solution before i found the latest commit solution, mine works a bit better and skipped the filename check and only focus on index.js. Its a bit bloated maybe you can rewrite it with renderchunk hook

Jonghakseo · 2024-02-18T05:26:08Z

To be honest, I simply started this boilerplate without full knowledge of Vite and the bundling process of Rollup that it uses internally, and I think this is the time to confront that limitation to some extent.

I'm using a lot of vitePlugins to get things to do what I want, or to fix bugs, and I'm increasingly convinced that a fundamental solution is needed.

And that is to completely tear down this boilerplate and fix it at a lower layer based on rollup.

In the process, I think we can also implement a true HMR (not the inconvenient way we have now, where we throw in a refresh method and a path).

The only limitation is my physical time...

aspiers · 2024-02-18T11:25:11Z

@Jonghakseo Makes sense, and I totally understand about the lack of time! So grateful for what you already built here so far though; it enabled me to build my extension which probably would have taken too long for me to do by myself!

PatrykKuniczak · 2024-05-13T16:04:02Z

@Jonghakseo Are you want to implement this PR?

PatrykKuniczak · 2024-05-16T09:49:10Z

@Jonghakseo One more ping :)

Jonghakseo · 2024-05-20T04:53:03Z

@Jonghakseo One more ping :)

Thanks~! I'll check it soon ^^

PatrykKuniczak · 2024-05-20T18:52:40Z

@Jonghakseo One more ping :)

Thanks~! I'll check it soon ^^

If you decide to move forward with that, maybe i can help with that, it have some months, i need to read it 1 more time :)

PatrykKuniczak · 2024-06-16T07:06:06Z

@Jonghakseo Let's do something with this thread cause maybe somebody waiting for this feature :)

aspiers · 2024-06-16T13:51:04Z

I need this feature 😜 Would be fantastic if a solution was found 🙏

Jonghakseo · 2024-06-16T13:57:26Z

@PatrykKuniczak @aspiers

If I understand correctly, this should be worked on top of the legacy branch, is that correct?

Jonghakseo · 2024-06-16T14:15:26Z

Maybe.... this is solution...?

Fix PR #329 #494

PatrykKuniczak · 2024-06-16T14:36:49Z

Maybe.... this is solution...?

Fix PR #329 #494

I think so

Co-authored-by: Darwin Swartz <[email protected]> Co-authored-by: Leal <[email protected]> Co-authored-by: Romain Dequidt <[email protected]> Co-authored-by: Jonghakseo <[email protected]> Co-authored-by: PatrykKuniczak <[email protected]>

Jonghakseo · 2024-07-06T07:35:58Z

Fix PR #329 #494

inject custom content script from Popup.tsx

f7a6b19

lealahm requested a review from Jonghakseo as a code owner December 11, 2023 11:34

github-actions bot reviewed Dec 11, 2023

View reviewed changes

PatrykKuniczak requested changes Dec 11, 2023

View reviewed changes

src/pages/popup/Popup.tsx Show resolved Hide resolved

vite.config.ts Outdated Show resolved Hide resolved

romaindequidt reviewed Dec 29, 2023

View reviewed changes

Update src/pages/injectedContent/ui/index.tsx

615dc90

Co-authored-by: Romain Dequidt <[email protected]>

lealahm and others added 5 commits December 30, 2023 10:17

Update src/pages/popup/Popup.tsx

c13ed0d

Co-authored-by: Romain Dequidt <[email protected]>

Update src/pages/injectedContent/ui/app.tsx

5129c12

Co-authored-by: Romain Dequidt <[email protected]>

Update src/pages/injectedContent/ui/app.tsx

4b32455

Co-authored-by: Romain Dequidt <[email protected]>

Update src/pages/injectedContent/ui/app.test.tsx

959ed03

Co-authored-by: Romain Dequidt <[email protected]>

Update src/pages/injectedContent/index.ts

c814ec8

Co-authored-by: Romain Dequidt <[email protected]>

PatrykKuniczak linked an issue Jan 10, 2024 that may be closed by this pull request

Can't add a custom Content Script folder #306

Closed

aspiers reviewed Jan 29, 2024

View reviewed changes

Jonghakseo changed the base branch from main to legacy June 16, 2024 13:51

Merge branch 'legacy' into inject-content-script

3a7aa4f

PatrykKuniczak mentioned this pull request Jun 16, 2024

Fix PR #329 #494

Merged

aspiers mentioned this pull request Jun 16, 2024

figure out how to have imports in secondary content scripts rolod0x/rolod0x#328

Open

Jonghakseo closed this Jul 6, 2024

PatrykKuniczak mentioned this pull request Jul 14, 2024

Injecting scripts from popup for latest version #516

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

inject custom content script from Popup.tsx #329

inject custom content script from Popup.tsx #329

lealahm commented Dec 11, 2023

github-actions bot left a comment

PatrykKuniczak left a comment

romaindequidt Dec 27, 2023

PatrykKuniczak Jan 10, 2024

romaindequidt commented Dec 29, 2023

romaindequidt commented Dec 29, 2023

lealahm commented Dec 30, 2023

PatrykKuniczak commented Jan 10, 2024

tngflx commented Jan 24, 2024

aspiers commented Jan 28, 2024

aspiers Jan 29, 2024

enmanuelmag commented Jan 29, 2024 •

edited

Loading

aspiers commented Jan 29, 2024

tngflx commented Jan 30, 2024 •

edited

Loading

aspiers commented Jan 30, 2024

tngflx commented Jan 30, 2024 •

edited

Loading

Jonghakseo commented Feb 18, 2024

aspiers commented Feb 18, 2024

PatrykKuniczak commented May 13, 2024

PatrykKuniczak commented May 16, 2024

Jonghakseo commented May 20, 2024

PatrykKuniczak commented May 20, 2024

PatrykKuniczak commented Jun 16, 2024

aspiers commented Jun 16, 2024

Jonghakseo commented Jun 16, 2024

Jonghakseo commented Jun 16, 2024

PatrykKuniczak commented Jun 16, 2024

Jonghakseo commented Jul 6, 2024

	root.id = 'chrome-extension-boilerplate-react-vite-content-view-root';
	root.id = 'chrome-extension-boilerplate-react-vite-injected-content-view-root';

inject custom content script from Popup.tsx #329

inject custom content script from Popup.tsx #329

Conversation

lealahm commented Dec 11, 2023

github-actions bot left a comment

Choose a reason for hiding this comment

PatrykKuniczak left a comment

Choose a reason for hiding this comment

romaindequidt Dec 27, 2023

Choose a reason for hiding this comment

PatrykKuniczak Jan 10, 2024

Choose a reason for hiding this comment

romaindequidt commented Dec 29, 2023

romaindequidt commented Dec 29, 2023

lealahm commented Dec 30, 2023

PatrykKuniczak commented Jan 10, 2024

tngflx commented Jan 24, 2024

aspiers commented Jan 28, 2024

aspiers Jan 29, 2024

Choose a reason for hiding this comment

enmanuelmag commented Jan 29, 2024 • edited Loading

aspiers commented Jan 29, 2024

tngflx commented Jan 30, 2024 • edited Loading

aspiers commented Jan 30, 2024

tngflx commented Jan 30, 2024 • edited Loading

Jonghakseo commented Feb 18, 2024

aspiers commented Feb 18, 2024

PatrykKuniczak commented May 13, 2024

PatrykKuniczak commented May 16, 2024

Jonghakseo commented May 20, 2024

PatrykKuniczak commented May 20, 2024

PatrykKuniczak commented Jun 16, 2024

aspiers commented Jun 16, 2024

Jonghakseo commented Jun 16, 2024

Jonghakseo commented Jun 16, 2024

PatrykKuniczak commented Jun 16, 2024

Jonghakseo commented Jul 6, 2024

enmanuelmag commented Jan 29, 2024 •

edited

Loading

tngflx commented Jan 30, 2024 •

edited

Loading

tngflx commented Jan 30, 2024 •

edited

Loading