Как отправить объект JSON из расширения Chrome в отдельное веб-приложение? - PullRequest
0 голосов
/ 11 мая 2019

У меня есть расширение Google Chrome, которое захватывает объект JSON с текущей активной вкладки и отображает предварительный просмотр ссылки с помощью API-интерфейса MicroLink.У меня есть кнопка внутри расширения, которую я хочу инициировать, отправляя объект JSON из расширения в мое веб-приложение для сохранения в профиле этого пользователя.Я не хочу подключать расширение напрямую к моей MongoDB в целях безопасности.Как я могу сделать это?Использую ли я externally_connect из Chrome API или отправляю запросы XMLHTTP?Я новичок в Chrome Extensions.Веб-приложение использует Node / Express, Mongo и React.

Я еще ничего явно не пробовал, но нашел документацию для externally_connect от Chrome и одну или две вещи о XMLHTTPRequests.Расширение 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/*"
  ]
}

React Component

    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>
        )
    }
}

Ответ JSON MicroLink API

{
  "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"
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...