how to inject chrome api’s like chrome.runtime in electron

i have an electron app and i need to get the data at runtime, for chrome extension i used chrome.runtime. But how to get the runtime data in the electron. Is there any alternative api’s like chrome.runtime in electron or is there any other way to do it

React render() method is not calling in runtime when i clicking a button in the electron app

i have a chrome extension and i made an electron app over it. i am using react js as a javascript frame work . i have like button and asset button which updates and render the component at runtime. its working in the chrome extension because of chrome.runtime API but in electron the react render method is not calling when i click a like button ,it is calling after i refresh the page .. Can you please help me out with this if anybody knows any runtime api for electron that will update and call the button component in the runtime .

electron’s “addExtension” API is not working

I am facing some issues while trying to add Grammarly extension to my Electron app. I am adding the extension like this –

var extensionPath = '/Users/abc/Library/Application Support/Google/Chrome/Default/Extensions/kbfnbcaeplbcioakkpcpgfkobkghlhen/14.848.1663_0';
var extension = BrowserWindow.addExtension(extensionPath);

I am adding this extension after the app is in ready state.

I can see the presence of the icon provided by Grammarly but its functionality is not working.

enter image description here

I also tried with few other extensions like YoutubeDownloader etc, but those are also not working. Am I missing something here? Is there any specific way in which I should add the extension to make it work? Any help is highly appreciated.

Thanks in Advance.

See debug messages from Chrome Extension’s background page in Electron app

New to Electron here. I have added a Chrome extension to an Electron app successfully, but have hard time debugging it and specifically its background page. I know how to open a dummy html page for a background script in the browser, but is the same functionality possible here?

If not, is there any other convenient way of debugging the background script?


Add chrome extension to an electron js application for mac osx?

I am building a small always on the top browser with electron. To show the website I am using .

Now my idea is to integrate an adblocker (preferably uBlock origin) into the browser and it should work and affect the webview. As electron is running on chrome (as far as I know) there must be a way this is possible right?

So after googling a bit, I found this:

This somehow looks like what I want to achieve. I downloaded the source of uBlock origin an added it to an extra extensions folder into the project. I ran this function both on the BrowserWindow and also my created mainWindow and both give errors or not the expected results (which means not blocking ads).

So am I doing this right? What do I need to change? Is there an easier way? Is there even a way?

Why is Chrome/Electron Devtools Perf showing almost nothing?

I have a React based Electron app and it runs attrociously slow for the first 15 seconds to 2-3 minutes of startup. I’m trying to track down the issue so I open the devtools, go to the ‘Performance’ tab and click the Record ● button. The bar showing how much of the recording memory has been used up fills up very quickly, much quicker than most apps so I stop it as soon as I can (between 1/8th and 1/4th then entire bar) usually in about 1 a second or less. Chrome/Electron then takes 30-40 seconds to parse/process the data before it show anything but when it finishes it shows almost nothing

enter image description here

Is there a known issue like this and a known workaround? A way to get more info out of devtools? Note that once the app is running smoothly I get more normal readings from devtools but fixing that first 2-3 minutes is turning out to be fairly difficult with no info.

enter image description here

Interacting with dev tools while scraping with nightmare.js with .evaluate

I am trying to automate a process that I manually perform in devtools. In the dev console I’ll create a variable object:

var api = angular.element(document.body).injector().get('apiFactory')

and then make calls on the api object api.getData(arg) and then get returned an object {}

How can I get the returned object like above in nightmare’s .evaluate function similarly below?

   .then(function(result) {
}, function(err) {

var run = function * (arg){ 

   var result = nightmare.evaluate((arg) => {
      var api = angular.element(document.body).injector().get('apiFactory')
      return api.getData(arg);     

   yield nightmare.end();

Pause Electron with a hotkey or similar

In our Electron app I’d like to use the dev tools to inspect an element that only exists if a parent element experiences a mouseover action.

Whenever I go to interact with the dev tools my mouse has to move and the element disappears.

I know that the Chrome dev tools usually pause script execution with f8. This does not seem to work in Electron. I have also tried forcing the parent elements into :hover and :focus in the dev tools, but this does nothing.

Any ideas please on how to pause execution or force a parent into :hover?

Does Electron support pausing on uncaught exception during debugging?

When I try to use this feature in both DevTools (chrome:///inspect) and VSCode, it doesn’t pause at the location of the error in my own code, but rather the main.js file inside the default app that is bundled with electron that tries to load my modules:

enter image description here


I’ve also tried this with the quick-start app and found the same issue… is there a way I can pause on uncaught exceptions in my own code?

Electron version: 1.8.2 (node 8.2.1)

OS: Windows 7

Command: electron --inspect-brk .

make electron Developer Tools window to always open at screen position I specify

I’m learning to do develop with electron in WebStorm. When I show the electron Developer Tools (undocked or detached), either by the menu (View..Toggle Developer Tools) or programmatically, the window always comes up in the same spot on my laptop monitor. I would like it to work like nw.js development, which remembered where I drag the Developer Tools window to and always comes up at that spot (on a second monitor) in subsequent runs.

I thought a programmatic solution sounded possible from the electron documentation, using code like below to get a handle on the window and then I could move the window programmatically:

const {app, BrowserWindow} = require('electron')

let win = null
let devtools = null

app.once('ready', () => {
  win = new BrowserWindow()
  devtools = new BrowserWindow()
  win.webContents.openDevTools({mode: 'detach'})

However, when I try the above code, I get this error:
TypeError: appWindow.webContents.setDevToolsWebContents is not a function

I’m running Sierra on a MacBook Pro, in case that matters.

I hate having to manually switch spaces on my second monitor, then drag the Developer Tools window where I want it, every time I run my app during development. I just want the Developer Tools window to show up where I tell it to. Any ideas?