I'm searching a way to open the developer Tools windows (using a <button>) once the app is compiled in exe, when I cannot use shortcut as I do in developer mode.
Instead of a button its better you do it via a shortcut key.
use - https://www.npmjs.com/package/electron-localshortcut
The library provides apis to register local shortcuts(as opposed to global shortcuts) to your electron app both on mac and windows.
const electronLocalshortcut = require('electron-localshortcut');
function registerShortcuts() {
electronLocalshortcut.register(mainWindow, 'CommandOrControl+B', () => {
mainWindow.webContents.openDevTools();
});
}
app.on("ready", () => {
registerShortcuts();
});
Related
I'd like to enable the "Custom formatters" setting in my Electron app's dev tools as described here: https://github.com/MarshallOfSound/electron-devtools-installer/issues/36#issuecomment-285956783
Enabling the setting manually is possible, but I'd like to do it automatically when dev tools is opened so that other developers don't have to remember to do it themselves.
Is it possible to automatically enable this setting with dev tools commands, via the Electron Debugger API?
I found that clicking the checkbox in dev tools goes through this code path in Chromium, but otherwise I wasn't able to figure out how I could do this programmatically using the debugger API.
I tried the following:
mainWindow.webContents.once("dom-ready", async () => {
const debug = mainWindow.webContents.debugger;
try {
debug.attach("1.1");
} catch (err) {
// debugger may already be attached
}
try {
await debug.sendCommand("Runtime.enable");
await debug.sendCommand("Runtime.setCustomObjectFormatterEnabled", { enabled: true });
} finally {
debug.detach();
}
});
But the setting doesn't appear to change.
I have some javascript lines in my electron app that doesn't work with Window. They only work on Mac.
When I make builds with electron-packager, the Window/PC version doesn't start because those lines throw an error.
See my code. I think that those line only work for mac version :
const { systemPreferences } = require('electron');
systemPreferences.setUserDefault('NSDisabledDictationMenuItem', 'boolean', true);
systemPreferences.setUserDefault('NSDisabledCharacterPaletteMenuItem', 'boolean', false);
How could I say to Electron that these lines should only be used in mac version? Not Windows version
Sorry for my bad english.
You can use the variable provided by NodeJS: process.platform. If it equals to darwin then Electron is running on Mac.
Example:
if (process.platform == 'darwin') {
// your Mac code
}
Check official documentation.
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 am working on an application with PhoneGap (now Apache Cordova, with the version of 2.0), and using the PhoneGap File API to write file.
The File API I use could be referenced at:
http://docs.phonegap.com/en/2.0.0/cordova_file_file.md.html#File
I use Ripple Emulator (0.9.9beta) from here: https://developer.blackberry.com/html5/download to test my application in chrome.
But I find Ripple could not handle the PhoneGap File API correctly.
For example:
I want to create a file (root/foo.json) at the PERSISTENT directory
function onSuccess(fileSystem) {
fileSystem.root.getDirectory("dir", {create: true}, function(dirEntry){
dirEntry.getFile("foo.json", {create: true}, function(fileEntry){
fileEntry.createWriter(function(writer){
writer.write(JSON.stringify(fooData));
}, onfail);
}, onfail);
}, onfail);
}
function onfail(error)
{
console.log(error.code);
}
// request the persistent file system
window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, onSuccess, onfail);
It works fine on iOS simulator, which did create the right file at the right place, but in the Ripple Emulator running in chrome, I just got a onfail callback, and got error code 10 (FileError.QUOTA_EXCEEDED_ERR).
I also found someone with the similar question here: Is it able to test phonegap application outside emulator?
But still no answer.
Does Ripple emulator currently not work correctly for PhoneGap API? Or did I missed some setting?
Problem found. I need to grant quota before using the PERSISTENT filesystem object.
https://developers.google.com/chrome/whitepapers/storage#persistent
// Request Quota (only for File System API)
window.webkitStorageInfo.requestQuota(PERSISTENT, 1024*1024, function(grantedBytes) {
window.webkitRequestFileSystem(PERSISTENT, grantedBytes, onInitFs, errorHandler);
}, function(e) {
console.log('Error', e);
});
It seems Ripple-UI didn't do this for me (I checked the source code at lib/ripple/fs.js) . That's why I always get a FileError.QUOTA_EXCEEDED_ERR.