# Execute a script inside a core application added by a plugin

**URL:** <https://discuss.elastic.co/t/execute-a-script-inside-a-core-application-added-by-a-plugin/330755>\
**Category:** Kibana\
**Tags:** kibana-plugin-development, dashboard\
**Created:** [April 25, 2023, 3:03pm UTC](https://discuss.elastic.co/t/execute-a-script-inside-a-core-application-added-by-a-plugin/330755 "2023-04-25T15:03:50Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![LucasE](https://avatars.discourse-cdn.com/v4/letter/l/51bf81/32.png) [@LucasE](https://discuss.elastic.co/u/LucasE)\
**Post date:** [April 25, 2023, 3:03pm UTC](https://discuss.elastic.co/t/execute-a-script-inside-a-core-application-added-by-a-plugin/330755/1 "2023-04-25T15:03:51Z")

</div>

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.

```auto
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](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](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.

---

<div class="post-metadata">

**Author:** ![LucasE](https://avatars.discourse-cdn.com/v4/letter/l/51bf81/32.png) [@LucasE](https://discuss.elastic.co/u/LucasE)\
**Post date:** [April 27, 2023, 9:58am UTC](https://discuss.elastic.co/t/execute-a-script-inside-a-core-application-added-by-a-plugin/330755/2 "2023-04-27T09:58:29Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/elastic/original/3X/1/a/1ac57faf039f6b580b3f104ef42a2a89e41014de.png) [@system](https://discuss.elastic.co/u/system)\
**Post date:** [May 25, 2023, 9:58am UTC](https://discuss.elastic.co/t/execute-a-script-inside-a-core-application-added-by-a-plugin/330755/3 "2023-05-25T09:58:42Z")

</div>

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