Coming from web development background, I am learning application development with Electron.
With the basic code I made a honest mistake of using submenu instead of subMenu, I would have expected an error somewhere but the file menu was not clickable at all.
As this is my side/hobby project didn't spend a lot of time to fix it. Next day noticed and fixed this.
I would like to understand on how to debug these kind of issues properly, my code was:
// mainWindow.loadURL('URL');
// also tried opening chrome dev tools
mainWindow.webContents.openDevTools();
// create menu template
const mainMenuTemplate = [
{
label: "File",
subMenu: [
{
label: "Add Item"
}
]
}
];
// Build menu from template
const mainMenu = Menu.buildFromTemplate(mainMenuTemplate);
// insert menu
Menu.setApplicationMenu(mainMenu);
What I had tried is to open dev tools mainWindow.webContents.openDevTools();, even with this there was no error on console.
Please share some thoughts.
Added: Source code of my main.js from github repo.
Related
Developed an Electron app using Vuejs and everything works fine in development, but when packaged I keep getting this pop-up after start up (NOTE: This is a sample image - mine doesn't say 'windowsdefender' but is otherwise the same).
Using electron-builder to create the application with the following build json, and it is installed on the PC:
{
"productName": "My App",
"appId": "com.mycompany.myapp",
"win": {
"icon": "build/icon.png",
"target": [
"nsis"
]
}
}
Though the app does open, there is no initial screen. However, I can open the dev tools but there are no errors displayed.
Any ideas on what is causing this or how to resolve?
After many tries, I finally figured it out (or at least I think I know what caused the issue).
The primary issue was that in using vue router (from an app ported from the web), it is important that you use 'hash' mode and not 'history. Add this to your router file:
const router = new VueRouter({
mode: process.env.IS_ELECTRON ? "hash" : "history",
routes
});
See this link for more details (common issues): Vue CLI plugin common issues
Second, I think there is a rights issue (i.e. having elevated rights to install) so I added this line along with the guid to my electron-builder.json file. The result was a build file like this:
{
"productName": "My App",
"appId": "com.abcco.my-app",
"win": {
"icon": "build/icon.png",
"target": "nsis",
"requestedExecutionLevel": "requireAdministrator"
},
"nsis": {
"guid": "6ee647a9-d5c6-46a9-a480-aa7d6d3d1c10",
"oneClick": false,
"allowToChangeInstallationDirectory": true
}
}
As I am developing only for Windows I was able to use material from this page (React but not that different with respect to Electron packaging):
Electron Build file help
The last thing I did was to remove all 'dist' files and uninstall the app entirely (previous versions). I think this cleared up a lot of the 'baggage' left over from testing.
Hopefully this helps others who may experience the same issue.
I am experimenting with using NativeScript to speed up the process of porting an existing Android app to iOS. The app in question uses a great deal of SVG manipulation in a Cordova webview. To keep things simple I want to port all of my existing Webview side code - in essence the entire existing Cordova www folder and its contents - over to the new NativeScript app. The WebView talks to a custom Cordova plugin which I use to talk with my servers to do such things as get new SVGs to show, keep track of user actions etc.
If I an get through these teething issues I am considering using this component to implement bi-direction communications between by current webview JS code and the, new, NativeScript backend that will replace my current Cordova plugin. Someone here is bound to tell me that I don't need to do that... . However, doing so would mean throwing out the baby with the bathwater and rewriting all of my current Webview ES6/JS/CSS code.
This is pretty much Day 1 for me with NativeScript and I have run into a few issues.
I find that I cannot get rid of the ActionBar even though I have followed the instructions here and set the action bar to hidden.
I can use the following markup in home.component.html
to show external web content. However, what I want to really do is to show the local HTML file that is in the www folder in the following folder hierarchy
app
|
____home
|
____www
|
______ index.html
|
______css
|
______ tpl
|
.....
However, when I use the markup
<Page actionBarHidden="true" >
<WebView src="~/www/index.html"></WebView>
</Page>
I am shown the error message
The webpage at file:///data/data/com.example.myapp/files/app/www/index.html is not available.
I'd be most grateful to anyone who might be able to tell me what I am doing wrong here - and also, how I can get rid of that action bar which is currently showing the app title.
About using local HTML file
Is your local HTML file recognized by Webpack (which is enabled by default in NativeScript)? Try to explicitly add the local HTML file to your webpack.config.js file. This way Webpack will "know" that it will have to bundle this file as well.
new CopyWebpackPlugin([
{ from: { glob: "<path-to-your-custom-file-here>/index.html" } }, // HERE
{ from: { glob: "fonts/**" } },
{ from: { glob: "**/*.jpg" } },
{ from: { glob: "**/*.png" } },
]
Example here
About hiding the ActionBar
NativeScript Core only: Try hiding the action bar directly for the frame that holds the page. See the related documentation here
NativeScript Angular: The page-router-outlet will have an action bar by default (you can hide it by using the Page DI as done here). Otherwise, you could create a router-outlet (instead of page-router-outlet). The router-outler won't have the mobile-specific ActionBar.
I thought I had recently seen a developer open the dev tools from inside the Microsoft Teams desktop client (for Windows), but I can't easily replicate that.
Shortcuts like
Strg+Shift+I, Strg+Alt+I, Shift+Alt+I,
F12, Strg+F12, Shift+F12, Strg+Shift+F12, Strg+Alt+F12
don't work.
The reason I am not just using the browser version is that the same app behaves differently in browser and desktop version which makes these dev tools kind of necessary for debugging.
Install teams Desktop. Official Link given below,
https://products.office.com/en-in/microsoft-teams/download-app
If Dev mode is enabled, Right-click the Teams tray icon and choose Open Dev Tools.
Else, Enable Dev Mode by following below steps,
Open Show hidden items
Click Teams icon 7 times. (Normal left click)
Now right click the Teams icon and you'll see all Dev options.
Update:
Now a new menu called DevTools opens as shown in image. Previously lot of dev options will show directly.
Here's the piece of code that adds the developer menus to microsoft teams:
trayDockMenuClickedDebugModeCheck() {
if (this.isDebugModeEnabled() || appConfig.getInstance().getSetting(constants.settings.debugMenuDisabled)) {
return;
}
this.debugMenuClickCount++;
if (this.debugModeClickTimer) {
clearTimeout(this.debugModeClickTimer);
this.debugModeClickTimer = null;
}
if (this.debugMenuClickCount >= 4) {
this.loggingService.logInfo('Enabling debug mode. Click count:' + this.debugMenuClickCount);
this.debugModeEnabled = true;
this.eventingService.emit(constants.events.debug.debugModeToggle);
}
else {
this.debugModeClickTimer = setTimeout(() => {
this.debugMenuClickCount = 0;
}, constants.timeInMiliseconds.second * 30);
}
}
Basically you have to click fast 4 times or more in the tray icon.
For linux users, the process is completely different. You need to click on Open button multiple times.
Once it's done, you'll see something like
Source
click: () => __awaiter(this, void 0, void 0, function* () {
yield this.restoreWindow();
// **Enable dev menu by clicking multiple times on Open for linux as electron does not report click events from tray icon**
if (utility.isLinux() && this.trayAppIcon) {
AppStateService.getInstance().trayDockMenuClickedDebugModeCheck();
if (AppStateService.getInstance().isDebugModeEnabled() && !this.isDebugMenuSetUp) {
this.buildContextMenu();
this.trayAppIcon.setContextMenu(this.contextMenu);
}
}
})
Right-click the Teams tray icon and choose Open DevTools. This is available only in the Developer build of Teams. See this Microsoft doc.
I have already developed a C# win form application and a chrome extension with native messaging (another C# console app) to fetch user's active tab url. I have also developed an msi setup in WiX to write under the registry (HKLM/SOFTWARE/Wow6432Node/Google/Chrome/Extensions and HKLM\SOFTWARE\Wow6432Node\Google\Chrome\NativeMessagingHosts) programmatically and tested the installation of the chrome extension by running the setup on different Windows 7 machines. I am publishing this extension on chrome web store and then I shall install the extension on several client computers.
I want to accomplish the same with Mozilla Firefox. I am newbie in this field and going through some Firefox developers guides (XPCOM, js-ctypes etc.) and getting little confused with multiple links.
It would be of great help if anyone can guide me towards the exact solution. Please note that, 1) I have to install the extension programmatically through the same msi package which already contains my own C# app and the chrome extension with native app and 2) the client machines will be Windows only but any version (XP (optional), 7, 8, Server anything).
EDIT:
According to Noitidart's answer, I have made an ffext.xpi from the 4 files (bootstrap.js, myWorker.js, chrome.manifest, install.rdf) and uploaded and installed on firefox, with no error, but nothing happens. At first, I am concentrating on the browser extension part and not the native for now and I just want to have a listener inside the js files such that whenever I switch to a different firefox tab or firefox window, an alert should show up from the browser itself (not from native at this moment) displaying the active tab's URL. I don't even understand how the js files will get called or executed, how this line myWorker.addEventListener('message', handleMessageFromWorker); will work or if I need to add some other listener.
Nothing is happening at all. How to debug or proceed from here? Please help.
To get the current url of the window do this:
aDOMWindow.gBrowser.currentURI.spec
To access all windows do this:
Cu.import('resource://gre/modules/Services.jsm');
let DOMWindows = Services.wm.getEnumerator(null);
while (DOMWindows.hasMoreElements()) {
let aDOMWindow = DOMWindows.getNext();
if (aDOMWindow.gBrowser) {
var currentURL = aDOMWindow.gBrowser.currentURI;
}
}
If you don't check for gBrowser the aDOMWindow.location will be a chrome path, very likely.
So putting this togather with a ChromeWorker (the ChromeWorker will access the js-ctypes) template here: https://github.com/Noitidart/ChromeWorker (this template is the bare minimum needed for communication between ChromeWorker and your js file, in this case bootstrap.js) (bootstrap.js is the js file that is required and is run, the 4 startup,shutdown,install,uninstall functions are required in bootstrap.js)
From bootstrap.js we would do, for now lets do it in startup:
function startup() {
loadAndSetupWorker(); //must do after startup
myWorker.postMessage({
aTopic: 'currentURL',
aURL: Services.wm.getMostRecentWindow('navigator:browser').gBrowser.currentURI.spec // recent window of type navigator:browser always has gBrowser
aLinkedPanel: Services.wm.getMostRecentWindow('navigator:browser').gBrowser.selectedTab.getAttribute('linkedpanel') //we use this to make sure to get the right tab/window on message back
});
}
Then in worker we'll do something like this:
self.onmessage = function(msg) {
switch (msg.data.aTopic) {
case 'currentURL':
var ret = msgBox(0, "alert from ctypes on windows, the url is:" + msg.data.aURL, "ctypes alert windows", MB_OK);
self.postMessage({
aTopic: 'currentURL-reply',
theLinkedPanel: msg.data.aLinkedPanel,
aResponde: aRet
});
break;
default:
throw 'no aTopic on incoming message to ChromeWorker';
}
}
Then back in bootstrap.js we'll receive this message and do something with it:
function handleMessageFromWorker(msg) {
console.log('incoming message from worker, msg:', msg);
switch (msg.data.aTopic) {
case 'currentURL-reply':
let DOMWindows = Services.wm.getEnumerator('navigator:browser');
while (DOMWindows.hasMoreElements()) {
let aDOMWindow = DOMWindows.getNext();
if (aDOMWindow.gBrowser && aDOMWindow.gBrowser.selectedTab.getAttribute('linkedpanel') == msg.data.theLinkedPanel) {
//this is our window, as the currently selected tab linkedpanel is same as one the worker dealt with
var currentURL = aDOMWindow.gBrowser.currentURI;
aDOMWindow.gBrowser.selectedTab.contentWindow.alert('the user was prompted with js-ctypes and the user clicked on:' + aRet);
break;
}
}
break;
default:
console.error('no handle for msg from worker of aTopic:', msg.data.aTopic);
}
}
so what this example does, is on install/startup of addon it gets the most recent browser windows url. it sends it to ctypes, ctypes throws a os level alert, and then ctypes sends back what the user clicked, then bootstrap.js finds that same window and that tab and with a javascript alert it tells what the jsctypes os level msgbox return value was.
I created my first Meteor package for fullPage.js. This package uses Meteor's new packaging system.
On first page load the package works great. Normal autoscrolling between sections as expected.
Linking to another page within the app will initialize fullPage without any errors. However, after scroll or down arrow click, the page autoscrolls and skips sections. Refreshing the page fixes the problem.
Setting "autoScrolling: false" will stop the page from scrolling to the bottom after initial scroll. However, this then causes the app to use normal scrolling.
Package dependencies:
[
"jquery",
"1.0.0"
],
[
"meteor",
"1.0.2"
],
[
"mrt:jquery-ui",
"1.9.2"
],
[
"underscore",
"1.0.0"
]
An example of the problem: http://fullpagetest.meteor.com/
The package: https://github.com/lawshe/full-page
The problem is caused because you are initializating the plugin each time you click in a menu.
You don't want to initialize fullpage.js more than once.
I would recommend you to avoid using AJAX and just use normal links for each section.
Otherwise, you should make use of the function $.fn.fullpage.destroy('all'); every time you click in a link and then initialize fullpage.js again as you are doing right now.
The destroy('all') function will remove all the plugin events (mousewheel, scroll...) and all the changes made over your original structure (addition of classes, inline styles...).
In other words, it will just restart your HTML structure as it was before applying fullpage.js.
Once that is done, fullpage.js can be initialized again.