Electron为网页注入js预加载_electron 脚本注入-CSDN博客

本文链接：https://blog.csdn.net/fukami666/article/details/115160790

本文介绍如何利用Electron框架为网页注入JavaScript实现预加载功能。通过修改main.js的preload属性，结合preload.js添加自定义按钮。在实践过程中遇到Content Security Policy阻止eval使用、打包提交dist文件夹的屏蔽方法以及input type="file"替代方案等问题，计划未来引入Vue框架并尝试render+preload方式。

摘要由CSDN通过智能技术生成

Electron为网页注入js预加载

准备工作

准备工作

首先我下载了一个 electron-quick-start 并安装 node.js
找到一个网页，我选择的是一个快速制作插画的网站 Picrew

main.js

在main.js里可以修改弹窗的各种属性，我们需要的是

function createWindow () {
   
const mainWindow = new BrowserWindow({
   
    webPreferences: {
   
      preload: path.join(__dirname, 'preload.js'),
    }
  })

webPreferences里的preload属性，path引入的__dirname就是根目录，preload.js就是文件名，改别的名字这里也得对应着改。

下面就加载我需要的网页

mainWindow.loadURL('https://picrew.me/image_maker/37328')
}

preload.js

加入自己想要的功能，我这里添了几个按钮

window.onload = function () {
   
  let image_maker = document.querySelector('#image-maker');
  let clearcanvas = document.createElement("div");
  clearcanvas.innerText = "清空画板";
  clearcanvas.style = "box-sizing:border-box;line-height:40px;position:absolute;top:60px;left:10px;width:100px;height:40px;border-radius:20px;background-color:#abf;text-align:center;cursor: pointer;font-weight: 700;-webkit-user-select: none;";
  image_maker.appendChild(clearcanvas