How can I connect our chrome extension to our web application?
Our web application displays a list of wish list items to their user dashboard. The chrome extension grabs the information on the page of the item a user is viewing on a button click in the extension.
We need users to be able to login to the chrome extension using Auth0 to connect to their user account from the web application.
The chrome extension takes active tab information on the button click, creates a Link Preview via MicroLink API which includes URL, Image Source, Title, and Description in a JSON response.
We need to access/receive and store that JSON response to the Users table so that we can render a react component to that users wish list/dashboard when they log into the Web Application.
How can we go about making the two communicate? Does the Chrome Extension need to live within the Web React Application, or does it need to be a separate application?
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>
)
}```
Related
If it can be integrated, the option is already in the moderator menu and my project is already linked with the DropBox app inside the app console, but it doesn’t save to the DropBox because the option needs to be enabled, it’s disabled by default.
enter image description here
When I enable that option manually if it saves the recording to DropBox
Is there a way to make that option start as enabled when starting the conference?
I have tried with this configuration
var options = {
fileRecordingsEnabled: true,
modules_enabled = {
"recording_autostart";
},
configOverwrite: {
dropbox: {
application key: 'XXXXXX'
} }, interfaceConfigOverwrite: { filmStripOnly: true } }`
It enables the dropbox but it does not store it automatically
I have used Facebook graph API in my react js application for accessing user images after login by the user.
window.FB.login((response) => {
if (response.authResponse) {
const userId = response.authResponse.userID;
window.FB.api('/me?fields=albums{photos.limit(99999){images,name,picture}}&limit=99999', (fbUser) => {
if(!fbUser.albums){
console.log( "error")// which gives only id (not giving album)
return;
}else{
console.log(fbUser.albums) // which contain all uploaded images
}
});
} else {
console.log( "User cancelled login or did not fully authorize.")
}
}, error => {
console.log(error)
});
I have tested with my test account credentials and after login, it will gives me all uploaded image.
Then I have done Business verification as well as App verification for accessing user_photos According to facebook doc.
but the problem comes when I switched the verified app from "development mode" to "live mode"
and try to test with a real account then it will give me one object which contains the only id instead of the album as shown in the below pic
The code is only working for the test user account which I was created through https://developers.facebook.com/apps/ site and gives me all uploaded images
if I switch again from "live mode" to "development mode" then I can access user_photos.
Please help me with this issue that is not accessing the album in live mode
I am setting color and icon of my android notification in node.js after setting title and body it does not seem to work. and I need different notification background color and different icon for two notifications for same app that i am creating.
I have tried changing icon and color in android manifest meta tag and it works but the problem is i need separate notification icon and color for request received notification and separate notification color and icon for for new message notification. Also to mention that the code for both new request notification and new chat request notification and in same index.js file and after receiving new message, the notification that pops up is that of new friend request I don't know why.
//Request notification format.
return DeviceToken.then(result =>
{
const token_id = result.val();
const payload =
{
notification:
{
from_sender_user_id : from_sender_user_id,
title: "New Friend Request",
body: `${senderUserName} wants to connect with you`,
icon: "/requestsmall.png"
color: "#fffbd7"
}
};
//New Message notification
return Token.then(result =>
{
const tid = result.val();
const pload =
{
notification:
{
from_sender_id : from_sender_id,
title: "New Message",
body: `${senderName} sent you a message`,
icon: "chatsmall.png"
color: "#e5fafa"
}
};
I want to display now different icon and color for these two notifications but it is not working also the send message notification displays the title and body of new request notification
As per my knowledge this is fully depend on the extension which you are using inside your project. Every extension of Firebase didn't support all features. Even if you send a FCM message directly from the Firebase console it will not redirect to the desired page. After many days I found an extension which supports all the features. just install and try inside your project and use it. Hope it will work for you.
For installation of the extension npm i cordova-plugin-firebasex
I have a live score display website which is implemented with Google's channel API to push live score updates to the browser. Since Google is shutting down the channel API, I have to move to Firebase Cloud Messaging.
When I migrated to FCM, I had to add a service worker javascript file (firebase-messaging-sw.js). Whenever a score update is pushed to the browser, if the user is in another browser tab or the user has closed my web page tab, A notification appears to the user.
I don't need this notification and I want to disable it. Also, when user moves to another browser tab, I want to prevent the push message from going into the service worker and route it to my web page, so that when user returns to the tab again, the latest score is updated in the webpage.
Is there any way to achieve this?
You should pass a parameter (depends what you need to do) in the body of message like this:
$msg = [
'title' => pushTitle,
'body'=> pushBody,
'icon'=> icon.png,
'image'=> image.png,
'active'=> 1
];
The above is PHP but is also working in the same way-idea in any programming language. If you use Firebase then you should use cloud functions.
then in your js file:
messaging.setBackgroundMessageHandler(function(payload) {
console.log('Received background message', payload);
if(payload.data.active == 1){
return;
}
var notificationTitle = payload.data.title;
var notificationOptions = {
body: payload.data.body,
icon: payload.data.icon,
image: payload.data.image
};
return self.registration.showNotification(notificationTitle, notificationOptions);
});
If I had your code(what did you have done until now) I would gave you an exact answer.
If you have more questions don't hesitate to ask.
I have a web page where I implement ADAL.JS.
When browsing the page via the web it works perfectly; however when I try to view it on an iPhone, and I have saved it as a shortcut on the desktop using the Add to Homescreen button, things go haywire.
The initial page (index.html) shows correctly using the apple-mobile-web-app-capable meta tag; however, when the authentication is invoked, I am taken to a real browser window. Once redirected back to index.html, I am still in the separate browser window not the Web App view.
Ultimately, I want to have this as an offline web site with all page functionality running in the view produced by apple-mobile-web-app-capable. Any other ideas as to how to implement this are appreciated.
Thanks in advance.
This is one of the big problems currently existing in iOS webapps. Every link or redirection opens up in a new window.
You can fix it changing window.location.href with JavaScript.
Seem to be missing something...I get at urlNavigate not defined error...suggestions?
alert('Running Auth');
online = navigator.onLine;
authContext = new AuthenticationContext({
tenant: azureTenant,
clientId: azureClientId,
postLogoutRedirectUri: window.location,
//redirectUri: "https://shlpkpiapi.azurewebsites.net/kpiapp/test.html"
});
authContext.config.displayCall=function(url){
if (urlNavigate)
{
this.info('Navigate to:' + urlNavigate);
window.location.href=urlNavigate;
}
else
{
this.info('Navigate url is empty');
}
}
if (authContext.isCallback(window.location.hash)) {
authContext.handleWindowCallback();
var err = authContext.getLoginError();
if (err) {
alert('Error on callback')
}
}
else {
var user = authContext.getCachedUser();
if (user) {
//We have a user in cache and are using those credentials
console.log('Signed in as: ' + user.userName);
} else {
console.log('Not signed in.')
if (online)
{
alert('signing in');
authContext.login();
}
else
{
alert('currently offline');
}
}
}
Ok...I made the change and the error is gone but I don't understand how this is supposed to address the issue. When I add my page to my IPhone home screen (https://xxxxx.azurewebsites.net/app/test.html) and then click on the tile I am taken to the test.html page. On that page page there is an auth function that executes which uses adal.js and takes me to "https://login.microsoftonline.com/xxx.onmicrosoft.com/oauth2...". This shows up in the scope of my IOS Web app and has my account listed and the Use another account option. I click on my account or choose the Use another account option and I am taken to another page that is opened in Safari.