Ados

a fullstack game worker

0%

每天进步一点点022 - Electron包装网站的问题

发表于
将web工具通过electron打包成本地应用

Preface

最近尝试了很多不错的在线工具，只是每次都要进入网站，有点麻烦，于是想到之前了解过的electron，尝试一下打包成本地应用。

Contents

1.下载所有源文件

通过开发者工具，’copy all as Node.js fetch’，然后配合 node-fetch 库，将需要用到的资源下载到本地：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
const fs = require('fs')
const fetch = require('node-fetch');

function checkAndWrite(filepath,res) {
    console.log("ok , here it is:",filepath);
    //todo create directory loop  
    const dirpath = filepath.substr(0,filepath.lastIndexOf("/"));
    console.log(dirpath);
    if(!fs.existsSync(dirpath)){
        fs.mkdir(dirpath,{recursive:true},(err)=>{
            if(err != null) {
                console.log("mkdir err:",err);
                return;
            }
            const dest = fs.createWriteStream(filepath);
            res.body.pipe(dest);
        })
        return;
    }

    const dest = fs.createWriteStream(filepath);
    res.body.pipe(dest);
}
// 这个是主页
fetch("https://material.io/resources/color/", {
  "headers": {
    "accept": "text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9",
    "accept-language": "zh-CN,zh;q=0.9,en;q=0.8",
    "cache-control": "no-cache",
    "pragma": "no-cache",
    "sec-ch-ua": "\"Chromium\";v=\"92\", \" Not A;Brand\";v=\"99\", \"Google Chrome\";v=\"92\"",
    "sec-ch-ua-mobile": "?0",
    "sec-fetch-dest": "document",
    "sec-fetch-mode": "navigate",
    "sec-fetch-site": "none",
    "sec-fetch-user": "?1",
    "upgrade-insecure-requests": "1",
    "cookie": "_ga=GA1.2.682063148.1629876102; _gid=GA1.2.1595024389.1629876102"
  },
  "referrerPolicy": "strict-origin-when-cross-origin",
  "body": null,
  "method": "GET",
  "mode": "cors"
}).then(res=>{
    checkAndWrite('./html/main.html',res)
})

// 这个是其中的一个资源
fetch("https://material.io/resources/color/styles/vendor-bab328c105.css", {
  "headers": {
    "accept": "text/css,*/*;q=0.1",
    "accept-language": "zh-CN,zh;q=0.9,en;q=0.8",
    "cache-control": "no-cache",
    "pragma": "no-cache",
    "sec-ch-ua": "\"Chromium\";v=\"92\", \" Not A;Brand\";v=\"99\", \"Google Chrome\";v=\"92\"",
    "sec-ch-ua-mobile": "?0",
    "sec-fetch-dest": "style",
    "sec-fetch-mode": "no-cors",
    "sec-fetch-site": "same-origin",
    "cookie": "_ga=GA1.2.682063148.1629876102; _gid=GA1.2.1595024389.1629876102; _gat=1"
  },
  "referrer": "https://material.io/resources/color/",
  "referrerPolicy": "strict-origin-when-cross-origin",
  "body": null,
  "method": "GET",
  "mode": "cors"
}).then(res=>{
    checkAndWrite('./html/styles/vendor-bab328c105.css',res)
})

2.在electron中加载

1
2
3
4
5
6
7
mainWindow = new BrowserWindow({width: 1000, height: 800, webPreferences:{webSecurity:false}})

mainWindow.loadURL(url.format({
    pathname:path.join(__dirname,"/html/main.html"),
    protocol: "file",
    slashes: true
}))

3. 注意的点

效果图

screenshot

源代码