290 lines
6.2 KiB
HTML
290 lines
6.2 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<style>
|
||
|
|
html {
|
||
|
|
height: 100%;
|
||
|
|
width: 100%;
|
||
|
|
margin: 0px;
|
||
|
|
}
|
||
|
|
|
||
|
|
::-webkit-scrollbar { display: none; }
|
||
|
|
|
||
|
|
body {
|
||
|
|
margin: 0px;
|
||
|
|
padding: 0px;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
font-family: sans-serif;
|
||
|
|
font-size: 22pt;
|
||
|
|
-webkit-tap-highlight-color: #ccc;
|
||
|
|
background-color: #DDD;
|
||
|
|
-webkit-user-select: none;
|
||
|
|
-khtml-user-select: none;
|
||
|
|
-moz-user-select: none;
|
||
|
|
-ms-user-select: none;
|
||
|
|
user-select: none;
|
||
|
|
-webkit-hyphens: auto;
|
||
|
|
hyphens: auto;
|
||
|
|
/* https://davidwalsh.name/font-smoothing */
|
||
|
|
-webkit-font-smoothing: antialiased;
|
||
|
|
-moz-osx-font-smoothing: grayscale;
|
||
|
|
-webkit-app-region: drag;
|
||
|
|
}
|
||
|
|
|
||
|
|
header {
|
||
|
|
position: absolute;
|
||
|
|
width: 100%;
|
||
|
|
height: 24px;
|
||
|
|
}
|
||
|
|
|
||
|
|
#progressBar {
|
||
|
|
position: absolute;
|
||
|
|
background-color: rgb(165, 165, 196);
|
||
|
|
width: 0%;
|
||
|
|
height: 24px;
|
||
|
|
}
|
||
|
|
|
||
|
|
#info {
|
||
|
|
width: 100%;
|
||
|
|
margin: 3px;
|
||
|
|
font-size: 16px;
|
||
|
|
position: absolute;
|
||
|
|
text-align:center;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
<title>
|
||
|
|
Browser
|
||
|
|
</title>
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body style="width: 100%; height: 100%; -webkit-app-region: no-drag">
|
||
|
|
<header id="header" style="-webkit-app-region: drag">
|
||
|
|
<div id="progressBar"></div>
|
||
|
|
<span id="info">Minimal Header</span>
|
||
|
|
</header>
|
||
|
|
<main></main>
|
||
|
|
</body>
|
||
|
|
<script>
|
||
|
|
const { ipcRenderer } = require("electron")
|
||
|
|
|
||
|
|
let urls = new Set()
|
||
|
|
let favicons = new Set()
|
||
|
|
let progress = 0
|
||
|
|
|
||
|
|
info.innerHTML = window.location.href
|
||
|
|
|
||
|
|
function notify(url) {
|
||
|
|
if (urls.has(url)) return
|
||
|
|
console.log(url)
|
||
|
|
//header.innerHTML += `<p>${url}</p>`
|
||
|
|
urls.add(url)
|
||
|
|
}
|
||
|
|
|
||
|
|
let colorExtractorCanvas = document.createElement('canvas')
|
||
|
|
let colorExtractorContext = colorExtractorCanvas.getContext('2d')
|
||
|
|
let colorExtractorImage = document.createElement('img')
|
||
|
|
|
||
|
|
function getColor(url, callback) {
|
||
|
|
colorExtractorImage.onload = function (e) {
|
||
|
|
let w = colorExtractorImage.width
|
||
|
|
let h = colorExtractorImage.height
|
||
|
|
colorExtractorCanvas.width = w
|
||
|
|
colorExtractorCanvas.height = h
|
||
|
|
let offset = Math.max(1, Math.round(0.00032 * w * h))
|
||
|
|
colorExtractorContext.drawImage(colorExtractorImage, 0, 0, w, h)
|
||
|
|
let data = colorExtractorContext.getImageData(0, 0, w, h).data
|
||
|
|
let pixels = {}
|
||
|
|
let d, add, sum
|
||
|
|
for (let i = 0; i < data.length; i += 4 * offset) {
|
||
|
|
d = Math.round(data[i] / 5) * 5 + ',' + Math.round(data[i + 1] / 5) * 5 + ',' + Math.round(data[i + 2] / 5) * 5
|
||
|
|
add = 1
|
||
|
|
sum = data[i] + data[i + 1] + data[i + 2]
|
||
|
|
// very dark or light pixels shouldn't be counted as heavily
|
||
|
|
if (sum < 310) {
|
||
|
|
add = 0.35
|
||
|
|
}
|
||
|
|
if (sum < 50) {
|
||
|
|
add = 0.01
|
||
|
|
}
|
||
|
|
if (data[i] > 210 || data[i + 1] > 210 || data[i + 2] > 210) {
|
||
|
|
add = 0.5 - (0.0001 * sum)
|
||
|
|
}
|
||
|
|
if (pixels[d]) {
|
||
|
|
pixels[d] = pixels[d] + add
|
||
|
|
} else {
|
||
|
|
pixels[d] = add
|
||
|
|
}
|
||
|
|
}
|
||
|
|
// find the largest pixel set
|
||
|
|
let largestPixelSet = null
|
||
|
|
let ct = 0
|
||
|
|
for (let k in pixels) {
|
||
|
|
if (k === '255,255,255' || k === '0,0,0') {
|
||
|
|
pixels[k] *= 0.05
|
||
|
|
}
|
||
|
|
if (pixels[k] > ct) {
|
||
|
|
largestPixelSet = k
|
||
|
|
ct = pixels[k]
|
||
|
|
}
|
||
|
|
}
|
||
|
|
let res = largestPixelSet.split(',')
|
||
|
|
|
||
|
|
for (let i = 0; i < res.length; i++) {
|
||
|
|
res[i] = parseInt(res[i])
|
||
|
|
}
|
||
|
|
callback(res)
|
||
|
|
}
|
||
|
|
colorExtractorImage.src = url
|
||
|
|
}
|
||
|
|
|
||
|
|
function getTextColor(bgColor) {
|
||
|
|
let output = runNetwork(bgColor)
|
||
|
|
if (output.black > 0.5) {
|
||
|
|
return 'black'
|
||
|
|
}
|
||
|
|
return 'white'
|
||
|
|
}
|
||
|
|
|
||
|
|
var runNetwork = function anonymous(input) {
|
||
|
|
var net = {
|
||
|
|
'layers': [{
|
||
|
|
'r': {},
|
||
|
|
'g': {},
|
||
|
|
'b': {}
|
||
|
|
}, {
|
||
|
|
'0': {
|
||
|
|
'bias': 14.176907520571566,
|
||
|
|
'weights': {
|
||
|
|
'r': -3.2764240497480652,
|
||
|
|
'g': -16.90247884718719,
|
||
|
|
'b': -2.9976364179397814
|
||
|
|
}
|
||
|
|
},
|
||
|
|
'1': {
|
||
|
|
'bias': 9.086071102351246,
|
||
|
|
'weights': {
|
||
|
|
'r': -4.327474143397604,
|
||
|
|
'g': -15.780660155750773,
|
||
|
|
'b': 2.879230202567851
|
||
|
|
}
|
||
|
|
},
|
||
|
|
'2': {
|
||
|
|
'bias': 22.274487339773476,
|
||
|
|
'weights': {
|
||
|
|
'r': -3.5830205067960965,
|
||
|
|
'g': -25.498384261673618,
|
||
|
|
'b': -6.998329189107962
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}, {
|
||
|
|
'black': {
|
||
|
|
'bias': 17.873962570788997,
|
||
|
|
'weights': {
|
||
|
|
'0': -15.542217788633987,
|
||
|
|
'1': -13.377152708685674,
|
||
|
|
'2': -24.52215186113144
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}],
|
||
|
|
'outputLookup': true,
|
||
|
|
'inputLookup': true
|
||
|
|
}
|
||
|
|
|
||
|
|
for (var i = 1; i < net.layers.length; i++) {
|
||
|
|
var layer = net.layers[i]
|
||
|
|
var output = {}
|
||
|
|
|
||
|
|
for (var id in layer) {
|
||
|
|
var node = layer[id]
|
||
|
|
var sum = node.bias
|
||
|
|
|
||
|
|
for (var iid in node.weights) {
|
||
|
|
sum += node.weights[iid] * input[iid]
|
||
|
|
}
|
||
|
|
output[id] = (1 / (1 + Math.exp(-sum)))
|
||
|
|
}
|
||
|
|
input = output
|
||
|
|
}
|
||
|
|
return output
|
||
|
|
}
|
||
|
|
|
||
|
|
function applyColors(backgroundColor, foregroundColor) {
|
||
|
|
console.log("applyColors", backgroundColor, foregroundColor)
|
||
|
|
progressBar.style.backgroundColor = backgroundColor
|
||
|
|
info.style.color = foregroundColor
|
||
|
|
}
|
||
|
|
|
||
|
|
ipcRenderer.on('title', (sender, title) => {
|
||
|
|
info.innerHTML = title
|
||
|
|
})
|
||
|
|
|
||
|
|
ipcRenderer.on('favicons', (sender, urls) => {
|
||
|
|
console.log("favicons event", urls)
|
||
|
|
for (let url of urls) {
|
||
|
|
if (!favicons.has(url)) {
|
||
|
|
getColor(url, c => {
|
||
|
|
let cr = 'rgb(' + c[0] + ',' + c[1] + ',' + c[2] + ')'
|
||
|
|
let obj = {
|
||
|
|
r: c[0] / 255,
|
||
|
|
g: c[1] / 255,
|
||
|
|
b: c[2] / 255
|
||
|
|
}
|
||
|
|
let textclr = getTextColor(obj)
|
||
|
|
applyColors(cr, textclr)
|
||
|
|
})
|
||
|
|
}
|
||
|
|
favicons.add(url)
|
||
|
|
}
|
||
|
|
})
|
||
|
|
|
||
|
|
ipcRenderer.on('progress', (sender, amount) => {
|
||
|
|
console.log("progress event", amount)
|
||
|
|
if (amount > progress) {
|
||
|
|
progress = Math.min(amount, 1)
|
||
|
|
}
|
||
|
|
progressBar.style.width = Math.round(progress * 100) + '%'
|
||
|
|
})
|
||
|
|
|
||
|
|
ipcRenderer.on('did-start-loading', (sender, url) => {
|
||
|
|
console.log('did-start-loading', url)
|
||
|
|
})
|
||
|
|
|
||
|
|
ipcRenderer.on('did-get-response-details', (sender, info) => {
|
||
|
|
let {
|
||
|
|
status, newURL, originalURL,
|
||
|
|
httpResponseCode,
|
||
|
|
requestMethod,
|
||
|
|
referrer,
|
||
|
|
headers,
|
||
|
|
resourceType
|
||
|
|
} = info
|
||
|
|
notify(newURL)
|
||
|
|
notify(originalURL)
|
||
|
|
//console.log('did-get-response-details', info)
|
||
|
|
})
|
||
|
|
ipcRenderer.on('did-get-redirect-request', (sender, info) => {
|
||
|
|
let { oldURL,
|
||
|
|
newURL,
|
||
|
|
isMainFrame,
|
||
|
|
httpResponseCode,
|
||
|
|
requestMethod,
|
||
|
|
referrer,
|
||
|
|
headers
|
||
|
|
} = info
|
||
|
|
notify(newURL)
|
||
|
|
notify(oldURL)
|
||
|
|
//console.log('did-get-response-details', info)
|
||
|
|
})
|
||
|
|
ipcRenderer.on('did-stop-loading', (sender, info) => {
|
||
|
|
//console.log('did-stop-loading', info)
|
||
|
|
})
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
</script>
|
||
|
|
|
||
|
|
</html>
|