Расширение Chrome на странице React

Question

У меня есть простое расширение Chrome, которое автоматически заполняет форму на странице значениями по умолчанию.

файл manifest.json

{
  "manifest_version": 2,

  "name": "Form Filler",
  "description": "This extension auto fills form in a specific page.",
  "version": "1.0",
  "icons": {
    "128": "128x128.png"

  },

  "page_action": {
    "default_icon": "19x19.png",
    "default_popup": "popup.html",
    "default_title": "Form Filler"
  },
  "options_page":"options.html",

  "background": {
    "scripts": ["eventPage.js"],
    "persistent": false
  },


  "content_scripts":[
    {
      "matches": ["http://test-site.com/*"],
      "js": ["content.js", "jquery-3.1.0.min.js"]

    }
  ],

  "permissions": [
    "tabs",
    "storage",
    "http://test-site.com/*"
        ]
}

и это файл content.js

chrome.runtime.onMessage.addListener(function(request, sender, sendResponse){
    if (request.act == "fill"){     
        let name =  request.name;  
        let email =  request.email;                      
        $('#name').val(name);
        $('#email').val(email);
    }
});

Это прекрасно работает на обычной HTML-странице.

Но это не работает на странице реакции.

Полагаю, очевидная причина в том, что вещи обрабатываются состоянием, и если я могу каким-то образом изменить состояние, я смогу заставить его работать.

Я попробовал этот код (file = content.js), но безуспешно

chrome.runtime.onMessage.addListener(function(request, sender) {
    if (request.act == "fill") {
        this.setState({"form.name": "My Name"});
    }
}.bind(this));

Это eventPage.js

chrome.runtime.onMessage.addListener(function(request, sender, sendResponse){
    if (request.todo == "showPageAction")
    {
        chrome.tabs.query({active:true,currentWindow: true}, function(tabs){
            chrome.pageAction.show(tabs[0].id);
        });
    }
});

Я не могу получить доступ к состоянию в расширении JS.

Как правильно выполнить эту задачу?