title: How can I dynamically apply scripts and stylesheets to the outer URLs in Electron.js?
body: <p>I'm trying to make a small electron app that loads some random website via 'loadURL' and then dynamically applies scripts and stylesheets to it.</p>
  <p>I've made a simple example-app, that loads <a href="https://stackoverflow.com/">https://stackoverflow.com/</a>, and in 'preload.js' adds 'renderer.js' and 'styles.css' to the website's DOM.
  Here is the code:</p>
  <p><strong>main.js</strong></p>
  <pre><code>const {app, BrowserWindow} = require('electron')
  const path = require('path')
  
  function createWindow () {
    const mainWindow = new BrowserWindow({
      width: 800,
      height: 600,
      webPreferences: {
        preload: path.join(__dirname, 'preload.js')
      }
    })
  
    mainWindow.loadURL('https://stackoverflow.com/')
  }
  
  
  app.whenReady().then(() =&gt; {
    createWindow()
  
    app.on('activate', function () {
      if (BrowserWindow.getAllWindows().length === 0) createWindow()
    })
  })
  app.on('window-all-closed', function () {
    if (process.platform !== 'darwin') app.quit()
  })
  </code></pre>
  <p><strong>preload.js</strong></p>
  <pre><code>window.addEventListener('DOMContentLoaded', () =&gt; {
      //Dynamic style linking to the document
      var fileref = document.createElement(&quot;link&quot;)
      fileref.setAttribute(&quot;rel&quot;, &quot;stylesheet&quot;)
      fileref.setAttribute(&quot;href&quot;, &quot;E:/SomeCodingStuff/testElectron/test/styles.css&quot;)
      document.getElementsByTagName(&quot;head&quot;)[0].appendChild(fileref)
    
      //Dynamic script linking to the document
      var fileref2 = document.createElement(&quot;script&quot;)
      fileref2.setAttribute(&quot;src&quot;, &quot;E:/SomeCodingStuff/testElectron/test/renderer.js&quot;)
      document.getElementsByTagName(&quot;body&quot;)[0].appendChild(fileref2)
    })
  </code></pre>
  <p><strong>renderer.js</strong></p>
  <p><code>document.body.classList.add('blue_background');</code></p>
  <p><strong>styles.css</strong></p>
  <pre><code>.blue_background{
      background-color: cornflowerblue;
  }
  </code></pre>
  <p>As you can see, this app should open a website and change it's body's color to blue - and it works perfectly fine with a local 'index.html' file and 'loadFile', yet with 'loadURL' it refuses to load local resources:
  <a href="https://i.stack.imgur.com/E6fCm.png" rel="nofollow noreferrer">screenshot of a console</a></p>
  <p>I found a post about it:
  <a href="https://stackoverflow.com/questions/39007243/cannot-open-local-file-chrome-not-allowed-to-load-local-resource">Cannot open local file - Chrome: Not allowed to load local resource</a>
  so I understand that Chrome intentionally refuses to load local files. The solution provided in that post (loading these files using a local server) works fine for me, but it is too bulky and inconvenient for an app I want to make.</p>
  <p>It seems like there is no other workaround in classic web-coding, but is there any electron solution to this problem?</p>
  <p>Would be grateful for any suggestions!</p>