We Keep Coding

How to make a custom url for a file in electron

I am trying to build a mini browser using Electron.js. Is it possible to make urls like chrome://settings or about:config, so that when the user goes to that link I can show an html file? I basically want to associate a url with a file in electron.

You could use Data URIs, and base64-encode the contents of your data as a link. You can use Javascript to encode and decode binary data, then you just specify the MIME type at the start.
If you go to the following URL in a browser for example you'll see a png decoded and rendered:
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==
The MDN Web doc in the first link mentions the process of base64 encoding an HTML file.
Alternatively, if you just want to force the download of a link you could add the download attribute to your anchor.

You can use did-start-navigation to detect when they go to chrome://settings/ then intercept that and tell it to go to https://stackoverflow.com/ instead.
Here's the code:
mainWin.webContents.on('did-start-navigation', function (evt, navigateUrl) {
if (navigateUrl == 'chrome://settings/') {
evt.preventDefault();
setTimeout(function () { // Without this it just crashes, no idea why.
mainWin.loadURL('https://stackoverflow.com/');
}, 0);
}
});
I tried the `will-navigate` event, but it didn't work.
Docs for: did-start-navigation

After a little searching at npm, I found a package that does exactly what I want, it's electron protocols. It's a simple way to add custom protolcs in Electron, Here's an example"
const protocols = require('electron-protocols');
const path = require('path');
protocols.register('browser', uri => {
let base = app.getAppPath();
if(uri.hostname == "newtab"){
return path.join(base,"newtab.html")
}
});
In this example, if you go to the link browser://newtab, it opens newtab.html. And if you type location.href the DevTools it shows browser://newtab there too

Replace all Imgur URL with JavaScript

My blog stores images at Imgur, but it loads too slowly. Using JavaScript I want to replace all URLs of the form
https://i.imgur.com/xxxxxx.png
to
https://example.net/imgur/xxxxxx.png

You don't need any Javascript to do this, just create a folder in your directory where your blog site's files are and download the images and put them in that folder and it should work.

You could use a regex replacement:
var url = "https://i.imgur.com/image.png";
var output = url.replace(/https:\/\/i.imgur.com\/(\S+)\.png/g, "https://example.net/imgur/$1.png");
console.log(url);
console.log(output);

How to get absolute path of a javascript?

I'm trying to find the absolute path of my javascript file (not the URL). Instead of hardcoding absolutely paths, I'd prefer using relative paths. For example:
/static/js/index.js
/static/config/1.json
/static/config/2.json
If I can get the absolute path of index.js, then I'm only ../config/ away from accessing either of the two json files.
Searching SO and the internet I either get suggestions for finding the URL, which work but won't solve my problem. Or for file paths, using windows.location.pathname but any permutation of it that I try either returns an empty string, or /.
var currentDirectory = window.location.pathname.split('/').slice(0, -1).join('/');
console.log("Curr dir: " + currentDirectory);
(Returns empty string)
var location = window.location.pathname;
var directoryPath = location.substring(0, location.lastIndexOf("/")+1);
console.log(" dirPath: " + directoryPath);
(Returns a /)
What I'm hoping for is something like:
var absolute_path = window.function.absolute.path()
Which would return say: /u/user/develop/project/server/static/js/index.js
From which I could: (pseudo code again)
var locations = absolute_path.split("js");
# location[0] = "/u/user/develop/project/server/static"
# location[1] = "js/index.js"
var config_file_locations = locations[0] + "config/";
var absolute_path_json1 = config_file_locations + "1.json"
-- EDIT --
Ok, looking at window.location it returns the URL so clearly that's not an answer here.

/static/js/index.js is an absolute path. You can tell because it starts with a /, which takes it back to the root of the web site.
There is no automatic way for a browser to tell anything about how a web server determined how it generated the content for a given URL.
All a browser knows is that it asked the server for /static/js/index.js and the server responded with some JavaScript.
The server might have read a static file, and that file might be in a directory called js and that directory might be a subdirectory of one called static … but then the server might have taken the whole URL, used it in a database query, and pulled the results from a database … or it might have proxied the request to another HTTP server on another computer on another continent.
If you want your client-side JS to know anything about the structure of the filesystem on the HTTP server, then you need to give it that information somehow. It can't get it from the browser.

Get the Image URLs from Top.Images object

I'm working with a website that generates lots of images that I want to save to disk. To do so I need to get a list of URLs containing all the images.
The above picture was taking from the Application tab of Google Chrome's debugging tools. Each of the 'green' files is a 'stored image' or rather, a referenced image URL.
How can I access this list from JavaScript console?
If it is not possible to access this folder/object from javascript, would it be possible to:
Query some database on disk that might contain the files.
Access the files via the Internet Explorer ActiveX Object?

var resources = window.performance.getEntriesByType("resource");
resources.forEach(function (resource) {
console.log(resource.name);
});
The above will list all of the files specified.

var resources = window.performance.getEntriesByType("resource");
resources.forEach(function (resource) {
if (resource.name.indexOf(".png") > -1 || resource.name.indexOf(".jpg")> -1)
console.log(resource.name);
});
As #Sancarn said with my extras line this function will writes all the images that have .png or .jpg as an extension. try it and let me know.

How would I find a html files parent directory name?

I need to know a html files parent directory so I can access a file in it named the same as the directory. I just need the directory name as a string.

You can try something like
window.location.pathname
But again depends on what you are trying to achieve, show some code.

Background
As #NewUser says, use window.location.pathname if you want only the path. Example: on this page, that gives:
/questions/25717173/how-would-i-find-a-html-files-parent-directory-name
You indicated that you are dealing with an HTML file, though, which implies a file name and file ending (.htm, .html, etc.). So, to get the full URL, minus the file name, you can try using .replace(/[^\/]+$/, ''), like this:
var url = 'http://www.example.com/foo/bar/baz.htm';
alert(url.replace(/[^\/]+$/, ''));
// gives http://www.example.com/foo/bar/
Putting It All Together
To do it without hard-coding the URL:
var path = window.location.toString().replace(/[^\/]+$/, '');
alert(path);