reactjs chrome扩展消息传递不工作

我正在尝试使用模板构建来构建hello world chrome扩展

我通过添加清单创建了chrome扩展：

manifest.json

{
  "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"]
  }
}

background.js

：

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;

  }

});

App.js

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 => ({
      showHeader: !prevState.showHeader
    }));
  }
  render() {
    return (
      <div className="App">
        <div className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          {this.state.showHeader && <h2>Welcome to React Jon</h2>}
        </div>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
        <button onClick={this.handleClick}>
          {this.state.showHeader ? "HIDE" : "SHOW"}
        </button>
      </div>
    );
  }
}

export default App;

但是，当我运行

npm run build

时，会出现以下错误：

/dev/hello world/src/App.js 11:5未定义错误“chrome” 无未定义

✖ 1个问题（1个错误，0个警告）

如何调用chrome.runtime或将消息从react应用程序传递到background.js？

此错误来自，您可以在文件顶部添加以下行

/*global chrome*/

---

为了澄清，该错误是由

create react app

中的编译错误引起的。它不允许生成中有

ES Lint

错误

接受的答案很好，您也可以通过这种方式添加注释（此ES Lint规则称为

no undef

）：

我有一个VS代码扩展，我在很长的一段时间内学会了它，它令人惊讶：

---

我之所以推荐它，是因为它很容易记住键入

esl

并从代码片段中进行选择，比记住禁用规则的各种方法要容易得多。

。为了清楚起见，我将它添加到App.js文件的顶部，它成功了。如果

/*

之后没有空格/制表符，这将导致另一个ESLint错误（间隔注释）。。。。它应该类似于

/*globalchrome*/

/* eslint-disable-rule no-undef */
chrome.blah()
/* eslint-enable-rule no-undef */