When you configure the preload
property in plugin.json
, the corresponding preload script will be loaded.
In traditional web development, all javascript scripts are run in the browser sandbox, permissions are strictly limited, and the functions that can be implemented are very limited.
Preload.js can help you break through the sandbox restrictions and enter a new JavaScript world.
preload.js is a special and separate file that does not need to be compiled with other business codes. In this file, you can access the API provided by nodejs
, electron
, Wise Tools
, and mount it to the window object.
Your other ordinary javascript code can access these APIs.
{
// Developers can publicly customization and API for later-loaded scripts to use.
// Use nodejs in preload.js
const { readFileSync } = require('fs')
window.readConfig = function (){
return readFileSync('./plugin.json')
}
// The later-loaded in index.html can use window.readConfig(), but the feature of nodejs cannot be used.
console.log(window.readConfig()) // correct
console.log(readConfig('./plugin.json')) // incorrect
Through this mechanism, powerful underlying capabilities can be obtained, and with the rich expressiveness of HTML and CSS, you can design the program exactly as you wish.
However, more powerful capabilities will be accompanied by greater risks if they are not restricted. When using pre-loaded scripts, you should always pay attention to providing only the necessary and minimal-privileged APIs for use by post-loading scripts.