title: reactjs chrome extension message passing not working
body: <p>I'm trying to build a hello world chrome extension using a template build from <a href="https://github.com/facebookincubator/create-react-app" rel="noreferrer">create-react-app</a>.  </p>
  
  <p>I was able to create the chrome extension by adding a manifest:  </p>
  
  <p><code>manifest.json</code>  </p>
  
  <pre><code>{
    "manifest_version": 2,
  
    "name": "Demo React-Chrome extension",
    "description": "This extension shows how to run a React app as a Chrome extension",
    "version": "1.0",
  
    "permissions": [
        "debugger",
        "activeTab",
        "tabs",
        "background",
        "https://*/",
        "http://*/"
    ],
    "browser_action": {
        "default_icon": "favicon.ico",
        "default_popup": "index.html"
    },
    "background": {
      "scripts":["background.js"]
    }
  }
  </code></pre>
  
  <p><code>background.js</code>:  </p>
  
  <pre><code>chrome.runtime.onMessage.addListener(function(message, sender, sendResponse){
    console.log(message);
    switch(message.action){
      case "popupOpen":{
        console.log('popup is open');
        chrome.tabs.executeScript({
          code: 'document.body.style.backgroundColor="red"'
        });
      }
        break;
  
    }
  
  });
  </code></pre>
  
  <p><code>App.js</code>  </p>
  
  <pre><code>import React, { Component } from 'react';
  import logo from './logo.svg';
  import './App.css';
  
  
  class App extends Component {
    constructor(props) {
      super(props);
      this.state = {showHeader: true};
      this.handleClick = this.handleClick.bind(this);
      chrome.runtime.sendMessage({action: "popupOpen"}).bind(this);
  
    }
  
    handleClick() {
      console.log('clicked');
      this.setState( prevState =&gt; ({
        showHeader: !prevState.showHeader
      }));
    }
    render() {
      return (
        &lt;div className="App"&gt;
          &lt;div className="App-header"&gt;
            &lt;img src={logo} className="App-logo" alt="logo" /&gt;
            {this.state.showHeader &amp;&amp; &lt;h2&gt;Welcome to React Jon&lt;/h2&gt;}
          &lt;/div&gt;
          &lt;p className="App-intro"&gt;
            To get started, edit &lt;code&gt;src/App.js&lt;/code&gt; and save to reload.
          &lt;/p&gt;
          &lt;button onClick={this.handleClick}&gt;
            {this.state.showHeader ? "HIDE" : "SHOW"}
          &lt;/button&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default App;
  </code></pre>
  
  <p>However, when I run <code>npm run build</code>, I get this error:</p>
  
  <blockquote>
    <p>/dev/hello-world/src/App.js   11:5  error  'chrome' is not defined 
    no-undef</p>
    
    <p>✖ 1 problem (1 error, 0 warnings)</p>
  </blockquote>
  
  <p>How do I call chrome.runtime or pass a message from a react app to background.js?</p>