Search code examples
javascriptgoogle-chromegoogle-chrome-extensiongoogle-chrome-devtoolsgoogle-chrome-app

Is there any way to open devtool panel in chrome browser using user created extension


In many places it is showing to use experimental api, but it didn't work for me.

manifest.json:-

"permissions":[
        "tabs",
        "experimental",
        "storage" ,
        "http://*/*",
        "https://*/*"
        ]

devtool.js :-

chrome.experimental.devtools.panels.create("xyz",
                              "icon.png",
                              "panel.html",
                              function(panel) {  
  });

Solution

  • Are you using a Canary or Dev version of chrome browser?

    from the documentation:

    1. Make sure you're using either Canary (which you can use at the same time as other Chrome channels) or the Dev channel. Although the experimental APIs might work in other versions, we need your feedback on the latest incarnation of the APIs, which you can find in Canary and on the Dev channel.

    You would also need to enable the experimental API in your browser

    1. Enable the experimental API in your browser. You can do this in either of two ways: Go to chrome://flags, find "Experimental Extension APIs", click its "Enable" link, and restart Chrome. From now on, unless you return to that page and disable experimental APIs, you'll be able to run extensions and apps that use experimental APIs. Specify the --enable-experimental-extension-apis flag each time you launch the browser. On Windows, you can do this by modifying the properties of the shortcut that you use to launch Google Chrome. For example: path_to_chrome.exe --enable-experimental-extension-apis

    https://developer.chrome.com/extensions/experimental

    You might want to read this too. Can I programmatically open the devtools from a Google Chrome extension?