Question

我有一个简单的chrome扩展程序，该扩展程序会自动使用默认值填充页面上的表单。

manifest.json文件

SET @day = '2018-01-20';
SET @firstday := FROM_DAYS(TO_DAYS(@day)-DAY(@day)+1) + (7 - WEEKDAY(FROM_DAYS(TO_DAYS(@day)-DAY(@day)+1))) % 7;
SELECT @firstday + INTERVAL w WEEK AS start, @firstday + INTERVAL w WEEK + INTERVAL 6 DAY AS end 
FROM (SELECT 0 AS w UNION SELECT 1 UNION SELECT 2 UNION SELECT 3 UNION SELECT 4) weeks
HAVING end <= LAST_DAY(@firstday)

这是content.js文件

{
  "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/*"
        ]
}

在普通的HTML页面上，效果很好。

但是在反应页面上不起作用。

我猜很明显的原因是事情是由状态处理的，如果我可以以某种方式改变状态，我应该能够使它工作。

我尝试了这段代码（file = 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);
    }
});

这是eventPage.js

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

我无法访问扩展名JS中的状态。

执行此任务的正确方法是什么？

React页面上的Chrome扩展程序

0 个答案: