How can I add DevTools extensions to the Atom editor? - electron

I would like to be able to use devtools extensions like React Developer Tools to Atom in dev mode. How can I do that?
The official Electron documentation mentions a way to load devtools extensions in an Electron window, but I haven't been able to apply it to Atom.
I've tried variations of the following code in the init.coffee script of my .atom folder, but they all fail with some variant of "This method you're trying to access doesn't exist".
# Your init script
#
BrowserWindow = require('electron').remote.BrowserWindow
BrowserWindow.addDevToolsExtension("~/.config/chromium/Default/Extensions/fmkadmapgofadopljbjfkapdkoienihi/3.2.1_0/")
Which leads me to think I'm missing something. Is there a way to load devtools extensions from init.coffee, or should I try so other method? Either way, which is the simplest way to proceed?
Secondary question: I've also found this npm package that provides a simplified way to load devtools extensions in Electron. Is it possible at all to use it in Atom? I don't think you can add node modules to init.coffee.

You can run your two commands/statements on the Atom console.
Open it from the menu: View > Developer > Toggle Developer Tools.

Related

Where does Chromium load extensions?

I'm trying to get a number of Chrome extensions working in an Electron app. Electron only supports dev tools extensions, so I'm writing code to handle regular extensions more-or-less from scratch. But, I'm getting stuck figuring out what's involved in getting the content scripts to run in the same way they do in Chrome.
In the existing Electron implementation, which is expressly limited to development tool extensions, I traced the code to here, specifically, line 392:
win.devToolsWebContents.executeJavaScript(Extensions.extensionServer._addExtension(${JSON.stringify(extensionInfo)}))
Finding the next step in this process has proved very challenging. I think, but am not certain, that HERE is the corresponding Chromium code, but this seems like it's for development tools extensions in particular (what with the calls to InspectorFrontendHost and the use of iframes).
Could anyone point me in the right direction? Where is the code where Chromium loads the content scripts for regular extensions? Or is this that code?

Webstorm Markdown editor tools all disabled?

I'm using WebStorm 2016.2.2 Build #WS-162.1628.41. When I open a .md file I see a bunch of tools but they are all disabled.
How can I enable them?
Apparently Webstorm comes with at some point I had installed a trial version of a plugin called Markdown Navigator from vladsch.com.
I uninstalled it and now I get a couple basic buttons and a side-by-side preview.
if you wanted to use the Markdown Navigator from vladsch.com, you need to activatie it by either a:
trial license
or buy a license
and then add the license to the plugin via the settings to activate all of its functions...

Force Open Lua Console or Run Lua Console Automatically on Startup

I'm new to Wireshark & Lua and I have a question that I can't seem to find the answer to by reading around online
Is there a way to open the Wireshark Lua console window on start up? Or even automatically open dialogs created by listeners on start up? I was hoping there were some commands or capability that would allow me to open (not just create) dialogs from within a script.
I've read about the exploit for the console in versions 1.6 and earlier, but I'm running 1.6.8 and I'd rather not use something that could potentially cause Wireshark to be unstable.
Modify the bottom of C:\Program Files\Wireshark\console.lua. Before the final "end", add:
run_console()
You can find an advanced option in the preferences dialog:
Open Preferences from the Edit menu
Navigate to Advanced
Filter for console
Change the value for gui.console_open to ALWAYS

Dart in a stand-alone app that does NOT require Chrome to be installed

electron, node-webkit, brackets-shell and atom-shell are frameworks that allow a user to create stand alone executables that use HTML, CSS, and JavaScript (Node) for all code in the app. They don't require any prior installation of any software, as I understand it. I want to use Dart instead of JavaScript. I don't want a chrome app because that requires the installation of Chrome, if I understand correctly. Is it possible to make a stand-alone application using Dart? Will DartToJs be able to do this for me?
You need to have a Dart-VM (Dart-Runtime) installed in order to be able to execute Dart applications on the command line/server.
As far as I know there is no way to create a standalone executable, at least no easy one.
It is technically possible to create an executable that contains the Dart-VM but there are no tools available yet that generate that for you.
I don't think the path using Dart2JS will help much. Dart2JS aims primarily at browsers but I have heard that some try to use Dart2JS to run Dart code with Node.js but I don't know if that really works.
This similar question contains some links that may be of interest to you: Embedding Dart into application
dart2js + node-webkit will definitely do this for you. Just compile your webapp to js, make a proper package.json file and follow the standard directions on the node-webkit github page.
There's even a pub package that let's you use the node-webkit API from dart (filesystem access, window controls, and whatnot).
Search pub for node_webkit and you'll find it.
Good luck.

Adding add-on bar to a custom XULRunner application

On MDN, the phrase "Add-on Manager-enabled XUL application" is introduced.
By dragging a XPI file containing an add-on and dropping it onto a FireFox window, the addon's widgets will be installed in FireFox's add-on bar.
I can also use Firefox to run a XUL application by specifying the commandline option "-app application.ini".
Since MDN makes me think that the two are not mutually exclusive, I'm looking for a simple 4 step process where steps 1 and 2 are create a XUL application and XPI independently, step 3 describes how to change either the XUL application or the XPI in preparation for step 4, and step 4 is final integration.
I'll start you off with steps 1 and 2, and then suggest some things that need to be done in steps 3 or 4.
Step 1: Build the XPI by following the tutorial at https://addons.mozilla.org/en-US/developers/docs/sdk/1.3/dev-guide/addon-development/implementing-simple-addon.html
Step 2: Build the XUL application by following the tutorial at https://developer.mozilla.org/en/Getting_started_with_XULRunner
Now for Steps 3 and 4. They should include modifying the application.ini built in step 2 by adding the code:
[XRE]
EnableExtensionManager=1
They should also include adding lines to prefs.js to support the extension manager. And they may require adding addon bar window element to XUL by adding code similar to:
<toolbarpalette id="BrowserToolbarPalette">
<toolbarbutton
id="xfox-statusbarpanel" class="toolbarbutton-1 chromeclass-toolbar-additional"
label="&name;"
tooltiptext="&name;"
oncommand="toggleSidebar('xfox-sidebar');"
context="xfox-contextmenu">
</toolbarbutton>
</toolbarpalette>
I've succeeded in making the "Add-on Manager-enabled XUL application" (aka <TestApp>) accept the XPI (aka <wikipanel>) and attempt to install it, but it fails with the error message: "<wikipanel> could not be installed because it is not compatible with <TestApp version 1.0>"
[edit] I editted INSTALL.RDF (for my XPI) and added the following:
<em:targetApplication>
<Description>
<em:id>testapp#sample.xul</em:id>
<em:minVers‌​ion>0.0</em:minVersion>
<em:maxVersion>9.*</em:maxVersion>
</Description>
</em:targe‌​tApplication>.
The extension now installs, but I am getting the following error in jsconsole:
Error: The widget module currently supports only Firefox. In the future it will support other applications. Please see https://bugzilla.mozilla.org/show_bug.cgi?id=560716 for more information.
You are mixing things up here. The -app command line flag is there to run XULRunner applications, not browser extensions. As to Add-on SDK, it doesn't have XUL support, only HTML. There is a fork of the Add-on SDK with XUL support but it looks somewhat outdated and I'm not sure whether it is capable of creating standalone windows (is that what you are asking about?).
There are of course classic extensions. They allow you to do anything including creating new XUL windows or using the add-on bar. But they are quite a bit more complicated to write.
I've found the answer but it is a bit of a hack and requires removing the following lines of code from the addon-kit javascript source:
if (!require("api-utils/xul-app").is("Firefox")) {
throw new Error([
"The widget module currently supports only Firefox. In the future ",
"it will support other applications. Please see ",
"https://bugzilla.mozilla.org/show_bug.cgi?id=560716 for more information."
].join(""));
}
Since the above code is specifically designed to prevent using the addon kit in anything other than bonafide Firefox, this avenue is not worth pursuing further. However, if there is a way to build a xul-app in such a way that it conforms to Firefox, then I will revisit the issue.
Firefox is chrome://browser/content/browser.xul after all.

Resources