electron-userland / devtron

[LOOKING FOR MAINTAINERS] An Electron DevTools Extension
https://electronjs.org/devtron
MIT License
1.73k stars 101 forks source link

Support advanced version of electron. #252

Open v2018z opened 3 years ago

v2018z commented 3 years ago

Hi! ๐Ÿ‘‹

Firstly, thanks for your work on this project! ๐Ÿ™‚

I found that the higher version of electron could not be used because of some API changes and chrome security policy problems. My solutions are as follows:

Today I used patch-package to patch devtron@1.4.0 for the project I'm working on.

Here is the diff that solved my problem:

diff --git a/node_modules/devtron/api.js b/node_modules/devtron/api.js
index 3cdabe2..edf8b75 100644
--- a/node_modules/devtron/api.js
+++ b/node_modules/devtron/api.js
@@ -1,29 +1,27 @@
 const electron = require('electron')
+const path = require('path')

-exports.install = () => {
-  if (process.type === 'renderer') {
-    console.log(`Installing Devtron from ${__dirname}`)
-    if (electron.remote.BrowserWindow.getDevToolsExtensions &&
-        electron.remote.BrowserWindow.getDevToolsExtensions().devtron) return true
-    return electron.remote.BrowserWindow.addDevToolsExtension(__dirname)
-  } else if (process.type === 'browser') {
+const resolve = (_dir) => path.resolve(process.cwd(), _dir)
+
+
+exports.install = (session) => {
+  if (process.type === 'renderer' || process.type === 'browser') {
     console.log(`Installing Devtron from ${__dirname}`)
-    if (electron.BrowserWindow.getDevToolsExtensions &&
-        electron.BrowserWindow.getDevToolsExtensions().devtron) return true
-    return electron.BrowserWindow.addDevToolsExtension(__dirname)
+    if (session.defaultSession.getAllExtensions &&
+      session.defaultSession.getAllExtensions().devtron) return true
+    return session.defaultSession.loadExtension(resolve(__dirname))
   } else {
     throw new Error('Devtron can only be installed from an Electron process.')
   }
 }

-exports.uninstall = () => {
-  if (process.type === 'renderer') {
+exports.uninstall = (session) => {
+  if (process.type === 'renderer' || process.type === 'browser') {
     console.log(`Uninstalling Devtron from ${__dirname}`)
-    return electron.remote.BrowserWindow.removeDevToolsExtension('devtron')
-  } else if (process.type === 'browser') {
-    console.log(`Uninstalling Devtron from ${__dirname}`)
-    return electron.BrowserWindow.removeDevToolsExtension('devtron')
-  } else {
+    if (session.defaultSession.getAllExtensions &&
+      !session.defaultSession.getAllExtensions().devtron) return true
+    return session.defaultSession.removeExtension('devtron')
+  }else {
     throw new Error('Devtron can only be uninstalled from an Electron process.')
   }
 }
diff --git a/node_modules/devtron/manifest.json b/node_modules/devtron/manifest.json
index 24613a4..295f752 100644
--- a/node_modules/devtron/manifest.json
+++ b/node_modules/devtron/manifest.json
@@ -4,8 +4,11 @@
   "devtools_page": "static/devtron.html",
   "content_scripts": [
     {
-      "matches": ["*"],
-      "js": ["out/browser-globals.js"]
+      "matches": ["http://*/*", "https://*/*"],
+      "js": ["out/browser-globals.js"],
+      "unsafe-inline": true
     }
-  ]
+  ],
+  "manifest_version": 2,
+  "content_security_policy":"script-src 'self' object-src 'sha256-oUhBdPf7Ru2sGu4k6v1SmxAkpoPTuzvsLrUqElYwDRE='"
 }

This issue body was partially generated by patch-package.

lengband commented 3 years ago

hi @v2018z ,I have configured the following according to your suggestion,but also can not see devtron panel.

require('update-electron-app')({
  logger: require('electron-log')
})
const path = require('path')
const glob = require('glob')
const {app, BrowserWindow,session} = require('electron')
const debug = /--debug/.test(process.argv[2])
if (process.mas) app.setName('Electron APIs')
let mainWindow = null
function initialize () {
  makeSingleInstance()
  loadDemos()
  function createWindow () {
    const windowOptions = {
      width: 1080,
      minWidth: 680,
      height: 840,
      title: app.getName(),
      webPreferences: {
        nodeIntegration: true
      }
    }
    if (process.platform === 'linux') {
      windowOptions.icon = path.join(__dirname, '/assets/app-icon/png/512.png')
    }
    mainWindow = new BrowserWindow(windowOptions)
    mainWindow.loadURL(path.join('file://', __dirname, '/index.html'))
    // ไฝฟ็”จ npm run dev
    if (debug) {
      mainWindow.webContents.openDevTools()
      mainWindow.maximize()
      require('devtron').install(session)
    }
    mainWindow.on('closed', () => {
      mainWindow = null
    })
  }
  app.on('ready', () => {
    createWindow()
  })
  app.on('window-all-closed', () => {
    if (process.platform !== 'darwin') {
      app.quit()
    }
  })
  app.on('activate', () => {
    if (mainWindow === null) {
      createWindow()
    }
  })
}
initialize()

image

v2018z commented 3 years ago

What is your system and Electron version?

v2018z commented 3 years ago

Did you modify file devtron/manifest.json?