[英]How to Inject CSS changes into my Electron js app?
I use loadURL to load the web, I want to make some changes.我使用loadURL加载 web,我想做一些更改。 Is there a way to inject a css snippet once the page is rendered?有没有办法在页面呈现后注入 css 片段?
There are extensions for chrome that do what I want (like UserCSS), but I understand that they can't be used inside an Electron App. chrome 有一些扩展可以满足我的需求(比如 UserCSS),但我知道它们不能在 Electron 应用程序中使用。
After your page has completed loading...在您的页面完成加载后...
Here is an example of adding CSS:这是添加 CSS 的示例:
// When document has loaded, initialize
document.onreadystatechange = (event) => {
if (document.readyState == "complete") {
// Document has finished loading here
var styles = `img#license {
animation: none;
animation-iteration-count: 1;
animation-fill-mode: forwards;
position: absolute;
z-index: 3;
width: 375px;
top: 204px;
left: 112px;
visibility: hidden;
}`
var styleSheet = document.createElement("style");
styleSheet.innerText = styles;
document.head.appendChild(styleSheet);
}
};
I use the above to display a unlicensed image over my Electron app from the preload.js script, as it has access to the document element.我使用上面的代码从 preload.js 脚本在我的 Electron 应用程序上显示未经许可的图像,因为它可以访问文档元素。
Edit the CSS to your needs.根据您的需要编辑 CSS。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.