-
Notifications
You must be signed in to change notification settings - Fork 0
Understanding how it works for contributors
A brief introduction to the 3 most important files
It runs using Electron. It first sets up a BrowserWindow
and all necessary components:
function createWindow () {
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true,
contextIsolation: false,
enableRemoteModule: true,
webviewTag: true
}
})
// menus and error handling
...
app.whenReady().then(() => {
createWindow()
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow()
}
})
})
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit()
}
})
It creates a menu bar and context menu. Errors and problems are caught and if there are any, the err.html
file is called. Otherwise, it calls the index.html
file to open in the window.
It also gets the URL that is default loaded and gives it to the renderer.js
ipcMain.handle('url', async function (event, path) {
http_check()
return url
})
Simple, right?
The HTML loads the libraries Bootstrap, Bootstrap icons, and jQuery:
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-icons/1.8.1/font/bootstrap-icons.min.css" integrity="sha512-Oy+sz5W86PK0ZIkawrG0iv7XwWhYecM3exvUtMKNJMekGFJtVAhibhRPTpmyTj8+lJCkmWfnpxKgT2OopquBHA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script
src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous"></script>
Then creates a menu of buttons and info using Bootstrap icons:
<i class="bi bi-arrow-left" style="cursor: pointer;" title="Back" onclick="goBack()"></i> <i class="bi bi-arrow-right" style="cursor: pointer;" title="Forward" onclick="goForward()"> <i class="bi bi-arrow-clockwise" style="cursor: pointer;" title="Reload" onclick="reload()"></i></i> <i class="bi bi-shield-check" id='secure' title="Secure"></i>
An address bar is then created that calls a JavaScript function in another file, renderer.js
<form action="javascript:search()">
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="URL" aria-label="URL" aria-describedby="button-addon2" id="url">
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button" id="button-addon2" type="submit"><i class="bi bi-search"></i></button>
</div>
</div>
</form>
Then, a webview
is created
<webview style="width:100%; height: calc(100% - 75px)" id="browser" onload="restart()" allowpopups ></webview>
Finally, it calls renderer.js
the load the website into the webview
<script src="renderer.js"></script>
A very simple but powerful UI.
First, it gets the webview and opens the URL that is given in the main
process:
var webview = document.getElementById('browser')
const webview1 = document.querySelector('webview')
var url_find = ipcRenderer.invoke('url').then((result) => {
if (result == "") {
result = "https://google.com"
}
webview.src = result;
})
Next, it gives the buttons in the html
functionality:
function goBack() {
webview1.goBack()
}
function goForward() {
webview1.goForward()
}
function reload() {
webview.reload()
}
Then it does the search feature:
function search() {
...
}
Inside the search
function, if it has HTTPS
or HTTP
defined, it will open the website and change the security sign.
if (result.includes("https://") == true || result.includes("http://") == true) {
url = result
// open url:
console.log('Navigating to ' + url)
document.getElementById('browser').src = url;
// change security:
if (url.includes('https://') == true) {
document.getElementById('secure').className = 'bi bi-shield-check';
} else {
document.getElementById('secure').className = 'bi bi-shield-exclamation';
}
}
Otherwise, it will check if it is a file
and open and change the security:
else {
if (result.includes("file:///") == true) { url = result
// open url:
console.log('Navigating to ' + url)
document.getElementById('browser').src = url;
// change security:
document.getElementById('secure').className = '';
document.getElementById('secure').innerHTML = '<code>file</code>';
document.getElementById('secure').title = 'File: If you downloaded it from somewhere, be carful';
}
If it is not any of these, it will define an ajax XMLHttpRequest
call:
function ajax(a, b, c){ // URL, callback, just a placeholder
c = new XMLHttpRequest;
c.open('GET', a);
c.onload = b;
c.addEventListener('error', http_url);
c.send()
}
Then it will create a request using the ajax
function assuming it is a HTTPS
page:
ajax('https://' + result, callback);
If there is an error, we assume it is an HTTP
page and load it in the webview
:
function http_url(e) {
url = 'http://' + result
// open url:
console.log('Navigating to ' + url)
document.getElementById('browser').src = url;
// change security:
if (url.includes('https://') == true) {
document.getElementById('secure').className = 'bi bi-shield-check';
} else {
document.getElementById('secure').className = 'bi bi-shield-exclamation';
}
}
Then if it succeeds and we receive a callback, we load the HTTPS
page:
function callback(e){
url = 'https://' + result
// open url:
console.log('Navigating to ' + url)
document.getElementById('browser').src = url;
// change security:
if (url.includes('https://') == true) {
document.getElementById('secure').className = 'bi bi-shield-check';
document.getElementById('secure').title = 'Secure';
} else {
document.getElementById('secure').className = 'bi bi-shield-exclamation';
document.getElementById('secure').title = 'Unsecure';
}
}
After all these crazy if
statements are done, we can change the address bar to update the URL:
// change url in bar
webview.addEventListener('dom-ready', () => {
document.getElementById('url').value = document.getElementById('browser').src;
}
Then that's it! The page has loaded!
So now you understand the basic logic and algorithms in DinoBrowse!
This wiki only focuses on DinoBrowse Pro