У меня есть расширение 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"
}