Display installed extensions

.babelrc

@@ -1,3 +1,3 @@
 {
-  "presets": ["env", "react"]
+  "presets": ["env", "react", "stage-2"]
 }

.gitignore

@@ -1,2 +1,3 @@
 node_modules
 dist
+.vscode

package.json

@@ -14,6 +14,7 @@
     "babel-loader": "^7.1.3",
     "babel-preset-env": "^1.6.1",
     "babel-preset-react": "^6.24.1",
+    "babel-preset-stage-2": "^6.24.1",
     "copy-webpack-plugin": "^4.4.2",
     "react": "^16.2.0",
     "react-dom": "^16.2.0",

src/index.js

@@ -1,8 +1,37 @@
-import React from 'react'
+import React, { Component } from 'react'
 import { render } from 'react-dom'
 
-const App = () => (
-  <div>Hello React</div>
-)
+class App extends Component {
+  state = {
+    loading: true,
+    extensions: [],
+  }
 
-render(<App />, document.getElementById('root'))
+  componentDidMount() {
+    this.props.chrome.management.getAll(extensions =>
+      this.setState({
+        loading: false,
+        extensions,
+      }),
+    )
+  }
+
+  render() {
+    return (
+      <div style={{ width: 360 }}>
+        {this.state.extensions.map(extension => (
+          <div key={extension.id}>
+            <input
+              id={extension.id}
+              type="checkbox"
+              checked={extension.enabled}
+            />
+            <label htmlFor={extension.id}>{extension.shortName}</label>
+          </div>
+        ))}
+      </div>
+    )
+  }
+}
+
+render(<App chrome={chrome} />, document.getElementById('root'))