reactjs chrome扩展消息传递不起作用答案

【问题标题】：reactjs chrome extension message passing not workingreactjs chrome扩展消息传递不起作用
【发布时间】：2016-12-27 23:45:40
【问题描述】：

我正在尝试使用来自 create-react-app 的模板构建构建一个 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？

【问题讨论】：

标签： reactjs google-chrome-extension

【解决方案1】：

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

/*global chrome*/

【讨论】：

太棒了。为了清楚起见，我将它添加到 App.js 文件的顶部，并且它起作用了。
如果/*...之后没有空格/制表符，这将导致另一个ESLint错误（空格注释）。应该类似于/* global chrome */

【解决方案2】：

为了澄清，该错误是由来自create-react-app 的编译错误引起的。它不允许构建中有ES Lint 错误。

接受的答案很好，也可以通过这种方式添加cmets（这个ES Lint规则叫做no-undef）：

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

我有这个 VS Code 扩展，我在很长一段时间里就学会了，它太棒了： https://marketplace.visualstudio.com/items?itemName=drKnoxy.eslint-disable-snippets

我推荐它，因为它很容易记住键入 esl 并从 sn-ps 中进行选择，这比记住可以禁用规则的各种方法要容易得多。

【讨论】：