Develop Reference

How can I use multiple preload scripts for different Electron windows when using electron forge with the webpack template?

I use the typescript+webpack template from electron forge.
For loading a single preload script with webpack, there is a constant called MAIN_WINDOW_PRELOAD_WEBPACK_ENTRY that can be set from the package.json, for example like so: "preload": { "js": "myPreload.ts" }. This constant is then somehow resolved from within the Electron Forge - Webpack Plugin depending on whether the application is run in debug or release mode.
I have this set up, and it works fine if you have single or multiple windows that share the same preload.ts script. However, I can not figure out how I could specify multiple different preload scripts for other windows.
How can I use multiple different preload.ts scripts (for different windows) with the electron forge webpack plugin?

Actually it is pretty simple to add multiple scripts, but as I have not seen this documented anywhere I will answer my own question here. The name field of the config is important, because the name in uppercase will be the prefix of the webpack constant, (e.g. "name": "my_name" will lead to the constant beeing called MY_NAME_PRELOAD_WEBPACK_ENTRY.
If you now want to add multiple preload scripts you will have to add multiple entry points to which you can then refer by their names. Unfortunately each entry point also requires the html and js fields, but if you do not need those you can create empty files with the correct extension and point to these).
Here is an example to better illustrate these points:
"config": {
"forge": {
"plugins": [
{
"name": "#electron-forge/plugin-webpack",
"config": {
"mainConfig": "./webpack.main.config.js",
"renderer": {
"config": "./webpack.renderer.config.js",
"entryPoints": [
{
"name": "main_window",
"html": "./src/main_window/index.html",
"js": "./src/main_window/index.js",
"preload": {
"js": "./src/main_window/preload.js"
}
},
{
"name": "extra_preload_main_window",
"html": "./src/empty.html",
"js": "./src/empty.js",
"preload": {
"js": "./src/main_window/preload2.js"
}
},
{
"name": "second_window",
"html": "./src/second_window/index.html",
"js": "./src/second_window/index.js",
"preload": {
"js": "./src/second_window/preload.js"
}
}
]
}
}
}
]
}
}
Which will then give you these (relevant) constants:
// Path to renderer of main window.
declare MAIN_WINDOW_WEBPACK_ENTRY;
// Path to first preload script (of main window).
declare MAIN_WINDOW_PRELOAD_WEBPACK_ENTRY;
// Path to the second preload script (of the main window).
declare EXTRA_PRELOAD_MAIN_WINDOW_PRELOAD_WEBPACK_ENTRY;
// Preload and renderer scripts for other window.
declare SECOND_WINDOW_WEBPACK_ENTRY;
declare SECOND_WINDOW_PRELOAD_WEBPACK_ENTRY;
Technically you will of course also get
declare EXTRA_PRELOAD_MAIN_WINDOW_WEBPACK_ENTRY;
but it points to an empty file / webpack output.

Cant figure out user snippets

I am trying to make another user snippet in VSCode to automate the document.querySelector but whenever I try to it gives me a weird error shown below. I have another snippet that works just fine but that was shown to me by an online class I am taking. I don't have any experience with json so I may just be getting the syntax wrong but it is the exact same as my previous snippet.
VSCode screenshot
In case that link doesn't work I'll include the code written below. The error I am getting is on the very first curly brace and it says "end of file expected .json"
All help is appreciated :)
{ // start of file and json object
// other snippets here
"query selector": {
"scope": "javascript",
"prefix": "dq",
"body": ["document.querySelector('$0')"],
"description": "Select element from document"
},
// other snippets here
} // end of json object

Your json file is incorrect.
You should place the object starting with the key “query selector” inside the json object above.
Add a comma after the curly brace in line 14 and add your snippet in there. Remove your outer curly braces from lines 17 and 24.
Json files are only one single object.
So your snippets file would look something like this:
{
"Print to console": {
"prefix": "log",
"body": [
"console.log('$1');",
"$2"
],
"description": "Log output to console"
},
"query selector": {
"scope": "javascript",
"prefix": "dq",
"body": [
"document.querySelector('$0')"
],
"description": "Select element from document"
}
}
By the way, I don't think you need the "scope" key.

Use a square bracket to start a json file, and end with a square bracket [ ].
[
{
"query selector": {
"scope": "javascript",
"prefix": "dq",
"body":
["document.querySelector('$0')"],
"description": "Select element from document"
}
}
]

Issue with Manifest V3 URL matches that contain a path

I get the Invalid value for 'web_accessible_resources[0]'. Invalid match pattern. error when trying to load my extension. I've made sure to read the match pattern documentation, and to my understanding, "https://www.example.com/example" should be a valid match pattern.
I've made an example of a manifest that will trigger the error:
{
"manifest_version": 3,
"name": "Test",
"description": "Test",
"version": "0.0.1",
"web_accessible_resources": [
{
"resources": [
"/js/script.js"
],
"matches":[
"https://www.example.com/example"
],
"use_dynamic_url": true
}
]
}
Does anyone know why it wouldn't work, is it a bug in Chrome?

Visual Studio Code extension development problem with typescript

as you see above, the building process never finishes and no extension host window appears.
the problem also exists when all extensions all disabled
but this problem doesn't exist when creating project with javascript (the problem is only with typescript)
the steps that I follow is from this tutorial
and I also tried the hello world sample from github.
but none of them worked.
EDIT:
I tried to open extension development host window manually by code --extensionDevelopmentPath="path/to/my/project" and it worked.
I think the issue is with some of vscode's configurations
possible fix: I should check the configurations such as npm: watch. but I don't know where are they and what should I do with them??
so any idea?
EDIT 2:
task.json
// See https://go.microsoft.com/fwlink/?LinkId=733558
// for the documentation about the tasks.json format
{
"version": "2.0.0",
"tasks": [
{
"type": "npm",
"script": "watch",
"problemMatcher": "$tsc-watch",
"isBackground": true,
"presentation": {
"reveal": "never"
},
"group": {
"kind": "build",
"isDefault": true
}
}
]
}
launch.json
// A launch configuration that compiles the extension and then opens it inside a new window
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
{
"version": "0.2.0",
"configurations": [
{
"name": "Run Extension",
"type": "extensionHost",
"request": "launch",
"args": [
"--extensionDevelopmentPath=${workspaceFolder}"
],
"outFiles": [
"${workspaceFolder}/out/**/*.js"
],
"preLaunchTask": "${defaultBuildTask}"
},
{
"name": "Extension Tests",
"type": "extensionHost",
"request": "launch",
"args": [
"--extensionDevelopmentPath=${workspaceFolder}",
"--extensionTestsPath=${workspaceFolder}/out/test/suite/index"
],
"outFiles": [
"${workspaceFolder}/out/test/**/*.js"
],
"preLaunchTask": "${defaultBuildTask}"
}
]
}
then I noticed that if I comment out "preLaunchTask": "${defaultBuildTask}" in launch.json file, the problem solves.

Finally I caught the issue. that was because of the locale of my system that was set to Persian which typescript problem matcher couldn't recognize(Persian digits).
By setting system locale to English the problem solved and everything now works fine as expected.
please see the issue on github

IE11 rendering /loading icons late as compared to other browser

I am using Angular 5 application and using SVG icons throughout site. In normal browsers like Chrome, Mozilla and Safari, icons are loading properly but in IE11 icons don't.
For that i added svgxuse in my pollyfill.ts file. https://github.com/Keyamoon/svgxuse
After this change, all icons are now loading in IE11 browser but they load quite late. I mean it takes around 1-2 seconds after all content has been loaded on screen.
It is not good from user perspective. Does anyone has idea how to preload / fast load these icon in IE browsers.
Thanks in advance.

I think you can't do so much .. maybe give a try to service worker (I don't know if they work in IE11) .. with Service worker you can load and cache images and assets ...
something like: (in your ngsw-config.js file)
{
"index": "/index.html",
"assetGroups": [{
"name": "app",
"installMode": "prefetch",
"resources": {
"files": [
"/favicon.ico",
"/index.html"
],
"versionedFiles": [
"/*.bundle.css",
"/*.bundle.js",
"/*.chunk.js"
]
}
}, {
"name": "assets",
"installMode": "lazy",
"updateMode": "prefetch",
"resources": {
"files": [
"/assets/**"
]
}
}]
}
then in your angular.cli.json file set:
"serviceWorker": true
hope it helps you!