创建google-chrome-extension时，在react-create-app中将消息从content.js移到App.js

Question

我正在使用react-create-app库来创建google-chrome-extension。它尝试将消息从文件content.js发送到App.js并将其显示为警报并显示在console.log中。我没有错。没有警报出现，并且console.log中什么也不显示。有人可以建议您。扩展名正常启动。

结构项目

   project
        build
        node_modules
        public
            /assets
        content.js
        favicon.ico
        index.html
        manifest.json
        src
            App.js
        .gitignore
        package.json

manifest.json

{
  "manifest_version": 2,
  "name": "chrome extension",
  "description": "Chrome extension",
  "version": "0.0.1",
  "content_scripts": [
    {
      "js": ["content.js"],
    }
  ],
  "browser_action": {
    "default_popup": "index.html",
    "default_title": "Open the popup"
  },
  "icons": {
    "16": "assets/icon-128.png",
    "48": "assets/icon-128.png",
    "128": "assets/icon-128.png"
  },
  "permissions": [],
  "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'"
}

content.js

/*global chrome*/
var timer = 0;
var si = setInterval(() => {
  try {
    chrome.runtime.sendMessage(
      {
        data: 'Hello popup, how are you'
      },
      function(response) {
        console.dir(response);
      }
    );
    timer++;
    if (timer === 5) {
      clearInterval(si);
    }
  } catch (error) {
    // debugger;
    console.log(error);
  }
}, 2000);

App.js

/*global chrome*/
import * as React from 'react';
import Form from './components/form/Form';

chrome.runtime.onMessage.addListener(function(message, sender, sendResponse) {
  alert('I am popup!');
  console.log('I am popup');
  sendResponse({
    data: 'I am fine, thank you. How is life in the background?'
  });
});

function App() {
  return <Form />;
}

export default App;