I am adding contextIsolation since I am loading remote content in my webview.
Using webFrame.executeJavascript(...) from inside a preload script, how do I pass down an un-serializable object to the inner webpage's context?
More concretely, here is my example:
preload.js:
// In the preload.js context
const { ipcRenderer, webFrame } = require('electron')
const ipc = {
send (data) {
ipcRenderer.sendToHost(...)
}
}
// Now I want to pass down ipc to the webpage's context
// This webpage is expecting window.myApp.ipc, so that it could use it like window.myApp.ipc.send(...)
webFrame.executeJavaScript(`window.myApp.ipc = ${ipc}`); // Doesn't work.
There's no way to send nonserializable object via executejavascript. If your preload script is for webview's, you can attach some object into window for global access.
Related
I use electronjs for building a cross platform desktop application. I would like to send a custom header with a value for every request from electron. Initially in loadURL(), i could use extraHeaders to set the custom header. How to send it in all subsequent requests?
As recommended by the documentation, you should use session object and the method onBeforeSendHeaders:
const { session } = require('electron')
// Modify the user agent for all requests to the following urls.
const filter = {
urls: ['https://*.github.com/*', '*://electron.github.io']
}
session.defaultSession.webRequest.onBeforeSendHeaders(filter, (details, callback) => {
details.requestHeaders['User-Agent'] = 'MyAgent'
callback({ requestHeaders: details.requestHeaders })
})
I'm trying to find a simple and easy way to cancel all running sagas within a "page" when the user decides to navigate to another "page" within the app... We are not using routing, but instead each "page" is its own widget within a larger host application that is responsible for creating and loading each page when the user navigates...
Currently, we are using redux-saga and have setup logic like so (simplified for brevity) when a page widget is created and loaded...
// page-sagas
export function* rootSaga() {
const allSagas = [
// ... all sagas used by page (example) ...
// function* watchFoo() {
// yield takeEvery(FooAction, foo);
// }
];
yield all(allSagas.map((saga) => call(saga)));
}
// page-widget
onLoad = () => {
const sagaMiddleware = createSagaMiddleware();
const store = createStore(reducer, initState, applyMiddlware(sagaMiddleware));
sagaMiddleware.run(rootSaga);
}
Ideally, I'd prefer to avoid having to add forking logic to every single saga in every single page-widget, and looking at the Redux-Saga Task API, it says you can cancel a task returned by the call to middleware.run, but I'm wondering if this propagates down to all nested / child sagas that are currently in progress, or if there are any issues / gotcha's I should be aware of:
Example:
// page-widget
onLoad = () => {
...
this.task = sagaMiddlware.run(rootSaga);
}
destroy = () => {
this.task.cancel();
}
const swaggerUi = require('swagger-ui-express');
const swaggerDocument = require('./swagger.json');
app.use('/swagger', swaggerUi.serve, swaggerUi.setup(swaggerDocument));
instead of this, i want to use inside callback function of NodeJS
Need to set basepath dynamically inside callback function.
app.use('/swagger', function(req,res) {
swaggerDocument.basepath = "/pet/details",
res.send(swaggerUi.serve, swaggerUi.setup(swaggerDocument));
});
Please help me to resolve this..
Found the solution,
Used callback function like this,
router.use(
swaggerUi.serve,
function(req, res) {
swaggerDocument.host = req.get('host'); // Replace hardcoded host information in swagger file
swaggerDocument.schemes = [req.protocol]; // Replace hardcoded protocol information in Swagger file
swaggerUi.setup(swaggerDocument)(req, res);
}
});
I have a <webview> in my Electron app. I'd like to have safe "foreign" communication, the way I would with an iframe through postMessage. So for example:
webview.executeJavaScript("window.parent.postMessage('all done!')");
Is my only choice for communication with this subwebview to turn on nodeIntegration so that I can use sendToHost? Turning on all of nodeIntegration just for this one feature seems like overkill.
You can access Electron APIs in the webview preload script, including IPC, even when nodeIntegration is disabled. Your preload script can inject functions into the global namespace that will then be accessible within the page loaded in the webview. A simple example:
webview-preload.js:
const { ipcRenderer } = require('electron')
global.pingHost = () => {
ipcRenderer.sendToHost('ping')
}
webview-index.html:
<script>
pingHost()
</script>
window-index.html:
<script>
const webview = document.getElementById('mywebview')
webview.addEventListener('ipc-message', event => {
// prints "ping"
console.log(event.channel)
})
</script>
Easiest way
Communication is
Note:
(main.js or app.js or background.js or process.js ) no need to pass (directly pass component to component),i succesffully implemented in electron:3.1.10
for print html webview.
Window To Webview
example1.html
<webview id="paper" style="width:300px;height:800px" src="file:///static/mywebview.html" nodeintegration></webview>
example1.js
var webview = document.getElementById("paper");
webview.send("ping",data);
getting data from mycomponent or window(i send directly form component)
mywebview.html
<!---what data you want show----!>
mywebview.js
const {
ipcRenderer
} = require('electron')
//data from window
ipcRenderer.on('ping', (e, data) => { console.log(data) })
webview to window
Webview to window(direct pass to component)
mywebview.js
ipcRenderer.sendToHost("readyCompanyInfo",data)
in my window eg i use vue (mycomponent.vue or mypage)
example1.html
const ipcRenderer = require("electron").ipcRenderer;
webview.addEventListener("ipc-message",(event)=>{
const {args,channel}=event;
if(channel=="readyCompanyInfo")
{
console.log(channel,args)
//here you can see data what u passed from webview to window
console.log(args[0])
}
})
I have a script here, which is extracting the links within a web page. It is comming back with the error 'content is not defined'.
// extract the links
var links = new Array();
for (i = 0; i < content.document.links.length; i++) {
var thisLink = content.document.links[i].toString();
//links.push(content.document.links[i].toString());
console.log(thisLink);
}
In order to interact with the HTML documents within the Firefox SDK, do I need to import a library?
It depends on when the self executing anonymous function is running. It is possible that it is running before window.document is defined.
In that case, try adding a listener
window.addEventListener('load', yourFunction, false);
// ..... or
window.addEventListener('DOMContentLoaded', yourFunction, false);
yourFunction () {
// some ocde
}