reactjs chrome extension message passing not working

Question

I'm trying to build a hello world chrome extension using a template build from create-react-app.

I was able to create the chrome extension by adding a manifest:

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;

However, when I run npm run build, I get this error:

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

✖ 1 problem (1 error, 0 warnings)

How do I call chrome.runtime or pass a message from a react app to background.js?

Haibara Ai · Accepted Answer · 2016-12-28 01:29:53Z

47

This error is from ESLint, you could add the following line at the top of the file.

/*global chrome*/

answered Dec 28, 2016 at 1:29

Haibara Ai

10.9k2 gold badges35 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jon Over a year ago

Awesome. To be clear, I added it to the top of App.js file, and it worked.

parse Over a year ago

This will head to another ESLint error(spaced-comment) if there's no space/tab after /*.... It should be something like /* global chrome */

agm1984 · Accepted Answer · 2018-03-26 04:28:34Z

0

To clarify, the error is caused by a compile error from create-react-app. It does not allow builds to have ES Lint errors in them.

The accepted answer is great, and you can also add comments in this manner (this ES Lint rule is called no-undef):

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

I have this VS Code extension that I picked up a long the way, and it's amazing: https://marketplace.visualstudio.com/items?itemName=drKnoxy.eslint-disable-snippets

I recommend it because it's easy to remember to type esl and choose from the snippets, far easier than remembering the various ways you can disable rules.

answered Mar 26, 2018 at 4:28

agm1984

17.4k6 gold badges108 silver badges120 bronze badges

Collectives™ on Stack Overflow

reactjs chrome extension message passing not working

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related