Why there's different scope in this javascript script file (window) ?

[bukowa]

I have no idea why that's a different window in the script scope?

// ContentScript.razor.js
async function awaitInjector() {
    return new Promise((resolve, reject) => {
        const checkInjector = () => {
            if (typeof window.injector === 'undefined') {
                console.log("Looking for injector...");
                setTimeout(checkInjector, 250);
            } else {
                console.log("Found injector!");
                resolve();
            }
        };
        checkInjector();
    });
}

// ContentScript.razor
@code {
    protected override async Task<Task> OnAfterRenderAsync(bool firstRender) {
        await JS.InvokeAsync<object>("awaitInjector");
    }
}

Browser Scope

Script Scope

[mingyaulee]

Do you mean there's different variables in the window when you check it in developer tools vs when the breakpoint hits the content script?

If that's the case it is because they are running in different contexts. If you want to see what's in the content script context, you can switch from the DevTools console. Refer to this page for more information.

[bukowa]

Do you mean there's different variables in the window when you check it in developer tools vs when the breakpoint hits the content script?

If that's the case it is because they are running in different contexts. If you want to see what's in the content script context, you can switch from the DevTools console. Refer to this page for more information.

Hey and thanks for reply. What I really mean is there's not much samples about including custom javascript via content script and playing with the browser window. I tried as seen above but turns out the script is working in different context and has no access to the "real" window .

[mingyaulee]

It highly depends on what do you intend to achieve. There's plenty of samples of chrome extensions that you can refer to. The window object serves to provide the APIs from the browser, not for you to be able to interact with other scripts loaded in the page because that would make the site vulnerable to XSS. The "real" window you mention is just another isolated context created by the browser apart from the context created for content scripts.

[bukowa]

I just want for this to work... and not touch JavaShit and it's API's again until it's required...

// ContentScript.razor.js
async function awaitInjector() {
    return new Promise((resolve, reject) => {
        const checkInjector = () => {
            if (typeof window.injector === 'undefined') {
                console.log("Looking for injector...");
                setTimeout(checkInjector, 250);
            } else {
                console.log("Found injector!");
                resolve();
            }
        };
        checkInjector();
    });
}

// ContentScript.razor
@code {
    protected override async Task<Task> OnAfterRenderAsync(bool firstRender) {
        await JS.InvokeAsync<object>("awaitInjector");
    }
}

[mingyaulee]

So far Blazor has been mature enough for you to not have to code in JS for web development, but this is definitely not the case for browser extensions because a lot of decisions around the design and architecture of extensions revolve around the fact that JS was the only language that runs in the browser.

This article might be a good read to understand how to interact with the scripts in a web page from an extension.