I am trying to require a module in a guest page (angular controller).
When the application used an older version of node (0.30.5) it worked perfectly well. However i've had to upgrade electron to the latest version (0.37.6), and ive updated all uses of ipc in the electron application, so that it's now ipcMain and ipcRenderer.
Previously the angular controller managed to require the module using:
var ipc = window['require']('ipc');
So i thought that changing it to:
var ipcRenderer = window['require']('electron').ipcRenderer;
However that does not work and it states that window.require is not a function. I've tried multiple times to get it to work with other methods, however nothing works so far.
The problem is that require is undefined, however require is set in the html file that contains the <webview>, so it should be defined.
The <webview> goes to a URL which returns a <div> that uses angular.
The angular controller that is used in that <div> is no longer working, as the module I need is the first thing to be set in the file, and it is undefined
EDIT:
I can now see that the property that I set in the html is visible in the application debugger, however it does not appear in the webview debugger.
So I can only assume the parent view does not pass on the value to the <webview>. So if anyone knows why it doesn't pass on the value or what I need to do to set it, I would appreciate any information.
So as of the current version of Electron (0.37.6) the way to set a global variable is to specify a preload script on the preload attribute on the <webview> tag. For example in the preload script:
window['ipcRenderer'] = require('electron').ipcRenderer;
This will allow the guest page that the <webview> is displaying, to use the ipcRenderer. It seems like the previous method i was using, which was setting the global variable in the parent view HTML, does not work anymore
It's a quite old way to require electron modules. Here's the new one:
var ipcRenderer = require('electron').ipcRenderer;
Related
I want to make a website and desktop app with one single codebase. But because there are some minor differences, I need to know in the angular app whether the app got called from the web or from electron.
In the main.js I have already tried:
Putting a URL parameter in the loadFile function like this:
win.loadFile('dist/project/index.html?electron=true')
but then it doesn't find the file anymore.
I have tried to make a second 'index.html':
win.loadFile('dist/project/electron.html')
but that html does not get compiled with angular.
In your angular side you can check the process global constant, the package #types/node must be instaled
cont inElectron = process.versions.hasOwnProperty('electron');
console.log(inElectron);
// true if the app is running in electron, otherwise false
https://stackblitz.com/edit/angular-lrgkgv
My problem is that when I use inappbrowser to open my web page, the main javascript file seems to be ignored, even though it is referenced in the Head of the file that I am opening using ref = cordova.InAppBrowser.open('https://MYURLHERE:8484/home/login', '_self', 'location=yes');
I am using chrome://inspect/#devices to inspect the console and I get errors when hitting buttons.. Anything referenced in the main.js file is undefined.. whereas the actual code for the autocomplete and button seems to be executing.
Please note The url is working fine when viewed in the chrome browser. The javascript files seem to load correctly, and all variables are defined correctly. - It is only when I use inappbrowser that I see issues with undefined variables.
My code (cordova app):
ref = cordova.InAppBrowser.open('https://MYURLHERE:8484/home/login', '_self', 'location=yes');
var myInAppBrowserCallback = function(event) {
console.log(event.url, 'LOADED');
};
ref.addEventListener('loadstart', myInAppBrowserCallback);
//Works fine.
My code (from the actual website I'm trying to view in Inappbrowser):
<script src="/Scripts/commonFunctions.js"></script>
var p = 'Hello';
<script src="/Scripts/loginPage.js"></script>
$('#btnLogin').on('click', function() {
alert(p);
});
Returns an alert with undefined.
What I have tried:
Extensive googling! (all the answers seem to be related to javascript not being enabled.. or 404 errors or things like that.. Not with global variables from one js file being undefined in another js file.)
Removing inappbrowser, using window.open.. Won't work as the app needs to execute scripts to inspect localstorage of the site.
Re-installing the android platform using cordova.
Re-installing the plugin.
Checking chrome in the inspector to ensure the files are in sources tab (they are).
Checking that the functions in main.js also exist (they do).
Thanks, JFIT
Summary:
The problem was that a javascript file was trying to load 'SpeechSynthesis' which was undefined only in the inappbrowser.
Details:
The problem with this was confusing but here are the steps I found to debug / solve:
Set up Remote Debugging on the phone so that you can view the console of the phone using chrome://inspect/#devices
View the console of the inappbrowser site (which will show as a seperate page to the inappbrowser instance.
Identify which files are being loaded and remove files until 'undefined' errors disappear.
Add back in the most recent file and start to strip out various functions (especially functions/variables before document.ready (global variables also)
Find the line/variable that way. It was handy for me this way as the actual undefined variable showed up after I removed most of the files.
The actual cause of my error was the speechSynthesis functionality.
The speechsynthesis lines were removed, and I readded all remaining files and everything works. This function works fine in chrome on desktop/android but not in the inappbrowser.
I'm brand new to writing Firefox extensions and I'm trying to create a sidebar which searches for certain elements in the main document and shows info about them in the sidebar. I followed the instructions here to create the sidebar with no problems.
Problem I'm having now is accessing the main window or document in my sidebar.js file.
The docs here say to use
var mainWindow = window.QueryInterface(Components.interfaces.nsIInterfaceRequestor)
.getInterface(Components.interfaces.nsIWebNavigation)
.QueryInterface(Components.interfaces.nsIDocShellTreeItem)
.rootTreeItem
.QueryInterface(Components.interfaces.nsIInterfaceRequestor)
.getInterface(Components.interfaces.nsIDOMWindow);
But that gives me this error:
TypeError: window.QueryInterface is not a function
I'm getting the warning:
The Components object is deprecated. It will soon be removed.
Which makes me think even if the code above worked for me it's not the best method.
The error messages indicate that your code is running in an unprivileged javascript context. .QueryInterface() is XPCOM code, i.e. accessing internal browser components which is only available to privileged code.
It is generally not advisable to for "leaf content" (windows/sidebars spawned by addons) to have direct control. Instead your addon main code should coordinate the individual views. Your sidebar should be dumb, just pass messages to addon code and the addon then modifies the content of the tab.
Due e10s various parts of the browser may end up running in separate processes in the future and will not have direct access to each other.
If you're not developing with the addon-sdk - which is designed with message-passing as its primary way of gluing components together - you will have to use the message manager to wire your addon, sidebar and content scripts together.
Use tabs.create() | MDN as in:
browser.tabs.create({url:"https://www.google.com"});
I also used that documentation and I also got that error. The documentation is too old.
browser.tabs.create({url:"https://www.google.com"})
will work fine
I'm attempting to fix a bookmarklet I wrote to track the URL changes in a single page application, specifically recording timesheet while using asana. It uses a script loader to embed jQuery and KnockoutJS libraries before init. I'm unable to find the ko object in global scope after the KnockoutJS library has initialized and cannot figure out why. To test, login to https://app.asana.com, open the Google Chrome developer tools' Console tab and try the following code:
var koScript=document.createElement('script');
koScript.type='text/javascript';
koScript.src='//ajax.aspnetcdn.com/ajax/knockout/knockout-3.0.0.js';
document.getElementsByTagName('head')[0].appendChild(koScript);
The Network tab shows the script downloading. The Elements tab shows the script as the last child of the head element. Yet ko remains undefined.
The short version is that:
Asana uses an internal module system that uses module.exports and require - the CommonJS standard you may know from node.js.
The knockout.js file checks the environment to determine if it should be setting window.ko or using module.exports or AMD-style define. If it detects CommonJS-style require it sets properties on exports instead of on a global ko object.
Workaround:
You could temporarily "copy" require off first:
_require = require; require = null
And then it should set window.ko as you're expecting!
I'm finding I can't debug the app.js file locally when testing things out in Chrome.
If I set a breakpoint on a line, when I refresh the filename it's referencing has changed dynamically.
i.e. to something like App.js?_dc=0.1228585853241384
I assume this is some kind of Rally internal setting, how can I disable this so I can actually debug the changes?
You can either use the debugger; keyword to trigger a breakpoint directly from your code, or I think you can add the following code at the top of your app right before your Ext.define:
Ext.Loader.setConfig({
disableCaching: true
});