Question

[curved-gulden]

Hello,

Sorry, but I am very new to browser extension and svelte development. I had a question regarding your content_scripts branch.

You have several components, InjectProgrammatically.svelte, InjectWithDynamicDeclartions.svelte, InjectWithStaticDeclarations.svelte.

In the content folder, there are only the inject-programmaticall.ts and inject-with-dynamic-declarations.ts, why is the injectiwhtstaticdeclarations not there?

Then in the index.ts, it uses new InjectWithStaticDeclarations?

But if I press the button, somehow shows "inject programmatically" text, but the background index.ts uses injectWithDynamicDeclartions?

Could you perchance explain to me why I need all 3, what they do and how this works? Thank you so much in advance!

[NekitCorp]

Hello! This branch was created only as an example of all types of script injecting on a page https://github.com/NekitCorp/chrome-extension-svelte-typescript-boilerplate/discussions/24 which you can read more about here – https://developer.chrome.com/docs/extensions/develop/concepts/content-scripts#functionality

In the content folder, there are only the inject-programmaticall.ts and inject-with-dynamic-declarations.ts, why is the injectiwhtstaticdeclarations not there?

This is just an example, you can place them however you like.

Then in the index.ts, it uses new InjectWithStaticDeclarations?

Yes, because other types of script injection work through service-worker.js. Again, described in more detail here:

1. https://developer.chrome.com/docs/extensions/develop/concepts/content-scripts#dynamic-declarative
2. https://developer.chrome.com/docs/extensions/develop/concepts/content-scripts#programmatic

But if I press the button, somehow shows "inject programmatically" text, but the background index.ts uses injectWithDynamicDeclartions?

When you click on the extension icon, it calls up "Inject programmatically":

chrome.action.onClicked.addListener((tab) => {
    if (tab.id) {
        chrome.scripting.executeScript({
            target: { tabId: tab.id },
            files: [injectProgrammatically],
        });
    }
});

All 3 methods of injecting a script on a page do the same thing - adding some new content to a specific page. Only the adding method differs, the content may be the same.

Could you perchance explain to me why I need all 3, what they do and how this works?

No, no, you misunderstood. You don't need all 3 methods at once. Use the one that suits you for your task. The branch just shows examples. For most tasks, the standard script injection method will be enough for you - Inject with static declarations. This method is also used in the main branch of the repository.

[curved-gulden]

Thanks! Makes a lot of sense!