reactjs Chrome扩展消息传递不起作用

Question

我试图使用从create-react-app构建的模板来构建hello世界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 error 'chrome' is not defined no-undef

✖ 1 problem (1 error, 0 warnings)

如何调用chrome.runtime或从反应应用background.js传递消息？

Answer 1

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

/*global chrome*/