reactjs - Use inferno-devtools in a chrome extension

Question

I'm working on a chrome extension popup that uses inferno. So far, my inferno components themselves are rendering just fine in the popup, so inferno itself is working.

I installed inferno-devtools in my dependencies.

manifest.json:

{
  "name": "Workflow",
  "manifest_version": 2,
  "browser_action": {
    "name": "Workflow",
    "default_popup": "/index.html"
  },
  "permissions":["tabs", "storage", "*://example.com/*" ]
}

index.html has <div id="root"></div> in the body and a <script> tag that loads the js.

In my main js file I have the following:

import Inferno from 'inferno'
... // other imports
require('inferno-devtools')

// redux store code

Inferno.render(
  <Provider store={store}>
    <WorkflowApp />
  </Provider>,
  document.getElementById('root')
)

<WorkflowApp /> can be any connected inferno functional component (via inferno-redux's connect method). This is all rendering fine in the popup and is arbitrary, so I'm omitting it here.

The problem: in Chrome devtools I do not see the React tab showing up. I have a separate React-based application that I use the React devtools on where it shows up just fine, so it's installed and working well.

Is there something specific I need to do to get it to work with inferno in a Chrome extension?

Answer 1

你必须像这样运行导入的 init 函数：require('inferno-devtools').initDevTools()或

import { initDevTools } from 'inferno-devtools';
initDevTools();