Inject CSS in <webview> Chrome/Elektron/HTML/CSS/JS

Question

Kann mir jemand sagen, warum das unten nicht funktioniert? Bitte verzeiht keine Fehler, die ich bin hier, um alle diese

HTML

<webview id="wv1" src="https://www.github.com/" style="display:inline-flex; width:100%; height:140px" nodeintegration></webview> 



    <script> 
    var webview = document.getElementById('wv1'); 
    webview.addEventListener('dom-ready', function() { 
    webview.insertCSS('html,body{ background-color: #FF0000 !important;}') 
    }); 

    </script> 

Ich versuche, es zu bekommen, so dass, sobald der Inhalt innerhalb der Webansicht hat der Hintergrund geladen wird über CSS zu rot geändert. Offen für irgendwelche Alternativen oder helfen Sie mit, warum das oben genannte nicht funktioniert.

dank

Answer 1

Es funktioniert für mich das folgende Setup verwenden, im Grunde nur das Elektron quick start

Run as electron index.js

index.js

const { app, BrowserWindow } = require('electron') 
const path = require('path') 
const url = require('url') 

let win 

function createWindow() { 
    win = new BrowserWindow({ width: 800, height: 600 }) 

    win.loadURL(url.format({ 
     pathname: path.join(__dirname, 'index.html'), 
     protocol: 'file:', 
     slashes: true 
    })) 

    win.webContents.openDevTools() 

    win.on('closed',() => { 
     win = null 
    }) 
} 

app.on('ready', createWindow) 

app.on('window-all-closed',() => { 
    if (process.platform !== 'darwin') { 
     app.quit() 
    } 
}) 

app.on('activate',() => { 
    if (win === null) { 
     createWindow() 
    } 
}) 

index.html

<webview id="wv1" src="https://www.github.com/" style="display:inline-flex; width:100%; height:140px" nodeintegration></webview> 

<script> 
    var webview = document.getElementById('wv1'); 
    webview.addEventListener('dom-ready', function() { 
     webview.insertCSS('html,body{ background-color: #FF0000 !important;}') 
    }); 

</script> 

Answer 2

Nur um sicher zu sein, Sie instaed von dom-ready dem DOMContentLoaded und statt insertCss, insertRule verwenden möchten.

var webview = document.getElementById('wv1'); 

webview.addEventListener('DOMContentLoaded', function() { 
    webview.insertRule('html,body{ background-color: #FF0000 !important;}',1) 
}); 

Wenn es jedoch nicht funktionieren Sie

webview.querySelector(body) !== null 

Innerhalb der Funktion, um versuchen möchten.

hoffe, es funktioniert.