responsejs chrome расширение сообщение прохождение не работает

Question

Я пытаюсь построить приветствие хром-хелл мира, используя шаблонную строчку от create-react-app.

Я был в состоянии создать расширение хром, добавив манифест:

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*/