Execute a script inside a core application added by a plugin

[LucasE]

Hello everyone,

I'm using Kibana v8.3.3 and i'm trying to modify the DOM of my dashboard.

For this I tried to use a chrome extension and it worked but I want to explore another option.
I tried creating a SPA and embedded the iframe of my dashboard but the cross origin issue makes it impossible. And I couldn't wrap my head on how to use the Kibana API to get the HTML of the dashboard and not just the json file ; nor how to allow CORS ( I modified kibana yml and I even tried a chrome extension to make CORS work but it doesn't work )

So my solution was to create a plugin to add a core application ( adds a folder in the left panel ) that is just the iframe of my dashboard ( no more CORS problem ). In my plugin.ts I register a simple application and mount a really simple reactElement that just holds the iframe of my dashboard.

It works fine and my iframe is working inside my kibana application.

Now I would like to execute code to modify the DOM of the iframe.
For now I tried to just log "test" but it does not work.

Here is my code that export renderApp called for the mount argument in the setup.

const App =
  () => {

    React.useEffect(() => {
      const head = document.querySelector("head");
      const script = document.createElement("script");
  
      script.setAttribute("src","./scriptspa.js");
      script.setAttribute("type","text/javascript");
      script.setAttribute("charset","utf-8");
      head?.appendChild(script);
  
      return () => {
        head?.removeChild(script);
      }
    })

    const reactElement = (
      <EuiPage>
        <EuiPageBody>
          <EuiPageHeader>SPA PLUGIN INSIDE KIBANA</EuiPageHeader>
          <EuiPageContent>
            <EuiPageContentBody style={{height: '100%', width: '100%'}}>
              <div id="root" style={{height: '100%', width: '100%'}}>
                <iframe src="http://localhost:5601/app/dashboards#/view/722b74f0-b882-11e8-a6d9-e546fe2bba5f?embed=true&_g=(filters%3A!()%2CrefreshInterval%3A(pause%3A!t%2Cvalue%3A0)%2Ctime%3A(from%3Anow-7d%2Cto%3Anow))" style={{height: '100%', width: '100%'}} />
              </div>x
            </EuiPageContentBody>
          </EuiPageContent>
        </EuiPageBody>
      </EuiPage>      
    );

    return reactElement;
  };

export const renderApp = ({ element }: AppMountParameters) => {
  render(<App />, element);

  return () => unmountComponentAtNode(element);
};

The useEffect doesn't work and tries to read from an html file ?
I get this error : "refused to execute script from 'http://localhost:5601/app/scriptspa.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled."

And when I click on the 'http://localhost:5601/app/scriptspa.js' it redirects me to an actual HTML file that is not in my plugin folder ??? ( Titled Elastic )

Anyway, if anybody knows how to fix the useEffect or another way to execute code I'm down to learn !!
Thanks in advance.

[LucasE]

SO, infact, useEffect is already working inside the page therefore we can directly access from here the DOM using document. No need to add a script or anything, the code can be here directly.