如何将Chrome扩展程序连接到Web应用程序

时间:2019-05-07 00:00:43

标签: javascript reactjs google-chrome google-chrome-extension auth0

如何将chrome扩展程序连接到Web应用程序? 我们的Web应用程序在其用户仪表板上显示愿望清单项目的列表。 chrome扩展程序通过单击扩展程序中的按钮来获取用户正在查看的项目页面上的信息。 我们需要用户能够使用Auth0登录到Chrome扩展程序,以便从网络应用程序连接到其用户帐户。 chrome扩展程序在单击按钮时获取活动的选项卡信息,并通过MicroLink API创建链接预览,该链接预览包括JSON响应中的URL,图像源,标题和说明。 我们需要访问/接收并将该JSON响应存储到Users表,以便我们可以为用户登录到Web应用程序时希望其列表/仪表板的用户提供响应组件。

我们如何才能使两者进行交流? Chrome扩展程序是否需要驻留在Web React应用程序中,还是需要作为单独的应用程序?

        super(props);
        this.state = {
            itemURL: 'https://www.item.url'
        };
    }

    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', 'logo', 'screenshot']}
                    size='large'
                />
            </ItemWrapper>
        )
    }```

0 个答案:

没有答案