Add ability to inject script to run on page load

[gernberg]

Is your feature request related to a problem? Please describe.

I need the ability to inject scripts early on a page's lifecycle.

This means the evaluate_script tool is not useful for me as it executes too late.

Describe the solution you'd like

Puppeteer has a method page.evaluateOnNewDocument that seems to do exactly what I want.

I did a small POC adding it as a param to navigate_page:

...
    initScript: zod.string().optional().describe(
      `(optional) A JavaScript function declaration to be executed by the tool on new document for every page load.
      `),
...

...
    if(request.params.initScript){
      page.evaluateOnNewDocument(request.params.initScript);
    }
...

Describe alternatives you've considered

One approach would be to have a new "tool" but I think having it as an option on navigate makes more sense here as it's just enhancing that workflow.

Additional context

No response

[OrKoN]

I need the ability to inject scripts early on a page's lifecycle.

Could you please provide more details about the use case? How do you prompt your MCP client to use this feature?

[gernberg]

Hey @OrKoN,
Yeah - I understand it might not be a super standard thing I'm doing :)

My use case is based on that I'm often debugging pages where I don't have code access to the page itself.
In a manual workflow I would use the "override sources" feature in devtools, breakpoints and/or rely on some home built extensions that enhance DevTools + console.

Prompt wise what I'm looking for is to be able to prompt "Before other scripts on the page execute, evaluate the following script(s) ..."

One concrete example (simplified for readability):
Let's say I want to figure out which CSS rule is causing issues with ads visibilty status at the time when the ad request happens.

In order to capture this I need to somehow have a breakpoint / something that captures state at a specific time during the page load. In a manual workflow I would typically use a breakpoint or have some additional logging added.

For chrome mcp / gemini based workflow breakpoints seems a bit complicated (at the moment at least).
So I added a feature that injects logging via an event listener, which give me something that works for most of my partners and gives additional context for gemini cli to work with.

Example script I might want to inject:

  window.googletag = window.googletag || {cmd: []};
  window.googletag.pubads().addEventListener('slotRequested', e => {
    const slotId = e.slot.getSlotElementId();
    console.log("Ad slot requested: ", slotId, `checkVisibility=${document.getElementById(slotId).checkVisibility()}`);
  })

Injecting the above would output information about all ads loaded on the page when I’m on a site with Google Publisher Tags together with their respective visibility on the page at time of request.
I could then let Chrome MCP + Gemini do some of the detective work / create some hypotheses on what CSS rules could be causing this behaviour.

Once it has a few hypothesises, it can then work through the hypotheses it finds by again using the “evaluateOnNewDocument” method - adding style-overrides to the site.
In this example, for instance to inject additional CSS into the document, and rerun the page to see if the behaviour at request time changed or not.

Eg. of a style override template I would tell gemini to use:

    const style = document.createElement("style");
    style.innerHTML = "CSS_TO_INJECT";
    document.head.appendChild(style);

Hope it helps a bit to bring clarity on what I'm doing here and why.

[natorion]

I think it makes sense to have something like this. Its like a multitool.

I think its related to having log points, which would be like a specific screw driver, which is superior to a multitool, if you have to work with screws.

[OrKoN]

Completed by #568