使用Chrome扩展程序注入模态

Question

我已经按照本教程：https://medium.com/@yosevu/how-to-inject-a-react-app-into-a-chrome-extension-as-a-content-script-3a038f611067完成了产品，现在我正试图添加它。

我想使用一个库（例如Ant-design）将样式按钮添加到Google页面，点击该按钮时会打开一个模态。

但是，在上传我的代码之后，Google主页目前看起来像这样（缺少CSS并且模式赢了“#p>

这是我的应用程序：

＆＃13;

＆＃13;

import React, { Component } from 'react'
import './App.css'

import { Button, Modal } from 'antd'

class App extends Component {
  constructor(props) {
    super(props)

    this.state = {
      modalVisible: false
    }
  }

  handleOK(e) {
    this.setState({
      modalVisible: false
    })
  }

  handleCancel(e) {
    this.setState({
      modalVisible: false
    })
  }

  openModal(e) {
    this.setState({
      modalVisible: true
    })
  }

  render() {
    return (
      <div className="App">
        <p>Test</p>
        <Button type='primary' onClick={this.showModal}>Test modal</Button>
        <Modal
          title="Basic Modal"
          visible={this.state.visible}
          onOk={this.handleOk}
          onCancel={this.handleCancel}
        >
          <p>Some contents...</p>
          <p>Some contents...</p>
          <p>Some contents...</p>
        </Modal>
      </div>
    )
  }
}

export default App

＆＃13;

＆＃13;

＆＃13;

这是我的manifest.json：

＆＃13;

＆＃13;

{
  "manifest_version": 2,
  "name": "React Content Script",
  "version": "0.1",
  "content_scripts": [
    {
      "matches": ["https://www.google.com/"],
      "css": ["/static/css/main.css"],
      "js": ["/static/js/main.js"]
    }
  ]
}

＆＃13;

＆＃13;

＆＃13;