reactjs 크롬 확장 메시지 전달이 작동하지 않습니다.

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; 

나는 매니페스트를 추가하여 크롬 확장을 만들 수 있었다 어떻게 chrome.runtime 전화 또는 background.js에 반응 응용 프로그램에서 메시지를 전달하지

/dev/hello-world/src/App.js 11:5 error 'chrome' is not defined no-undef

✖ 1 problem (1 error, 0 warnings)

: 나는 npm run build을 실행할 때

그러나, 나는이 오류가?

Answer 1

이 오류는 ESLint에서이므로 파일 맨 위에 다음 줄을 추가 할 수 있습니다.

/*global chrome*/