Question

我有一个Google Chrome扩展程序，它从当前活动选项卡中获取JSON对象，并使用MicroLink API显示链接预览。我在扩展程序中有一个按钮，想要触发将JSON对象从扩展程序发送到Web应用程序以存储到该用户个人资料。为了安全起见，我不想将扩展直接连接到我的MongoDB。我该怎么做？我是使用Chrome API的external_connect还是发送XMLHTTPRequests？我是Chrome扩展程序的新手。该Web应用程序正在使用Node / Express，Mongo和React。

我还没有明确尝试过任何东西，但是我发现的是有关Chrome的external_connect的文档以及有关XMLHTTPRequest的一两件事。 Chrome扩展程序已使用React构建。

Manifest.json

{
  "manifest_version": 2,
  "name": "PennyWise Chrome Extension",
  "author": "PennyWise",
  "version": "1.0.1",
  "description": "Allow users to save items to their PennyWise Wish List Dashboard.",
  "browser_action": {
    "default_popup": "index.html",
    "default_title": "PennyWise"
  },
  "permissions": [
    "storage",
    "activeTab",
    "tabs",
    "declarativeContent"
  ],
  "web_accessible_resources": [
    "*.html"
  ],
"matches": [
    "*://*.getpennywise.io/*"
  ]
}

反应组件

    componentDidMount() {
        chrome.tabs.query({ active: true, currentWindow: true }, tabs => {
            const itemURL = new URL(tabs[0].url);
            this.setState({
                itemURL: itemURL,
            });
            console.log(itemURL);
        });
    }

    render() {
        return (
            <ItemWrapper>
                <MicrolinkCard
                    className='item-shadow'
                    url={this.state.itemURL}
                    media={['video', 'image']}
                    size='large'
                    controls
                />
            </ItemWrapper>
        )
    }
}

MicroLink API JSON响应

{
  "data": {
    "lang": "en",
    "author": null,
    "title": "Turns any website into data | Microlink",
    "publisher": "Microlink",
    "image": {
      "url": "https://cdn.microlink.io/meta/preview.jpg",
      "width": 2431,
      "height": 1531,
      "type": "jpg",
      "size": 136704,
      "size_pretty": "137 kB"
    },
    "description": "Extract structured data from any website. Enter an URL, receive information. Get relevant information from any link & easily create beautiful previews.",
    "date": "2019-04-19T13:59:05.677Z",
    "logo": {
      "url": "https://cdn.microlink.io/logo/trim.png",
      "width": 500,
      "height": 500,
      "type": "png",
      "size": 1448,
      "size_pretty": "1.45 kB"
    },
    "url": "https://microlink.io",
    "screenshot": {
      "url": "https://i.imgur.com/rLReKBy.png",
      "width": 1280,
      "height": 800,
      "type": "png",
      "size": 179126,
      "size_pretty": "179 kB"
    }
  },
  "status": "success"
}

如何将Chrome扩展程序中的JSON对象发送到单独的Web应用程序？

0 个答案: