Execute a script inside a core application added by a plugin

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.

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.

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.