Check if website was opened from an embed browser - javascript

I have a website and I need to check when this site opens from an embed browser.
I need to do a similar flow to Google Login. When Google Login detect that the site is loaded from an embed browser then the user cannot authenticate.
More info

This gives if embed or not
function isEmbed() {
try {
return window.self !== window.top;
} catch (e) {
return true;
}
}
console.log(isEmbed())

Related

Message Passing Between Web Application and Chrome Extension - How to GET the message?

I am developing a chrome extension.
In my web application, there is a JavaScript embedded in a HTML page which tries to interact with my extension.
let extId = "extension id";
var extPort = chrome.runtime.connect(extId);
extPort.postMessage({from: "WebServer", fn: "greeting"});
In my extension - background script, event listener is set to handle the message.
chrome.runtime.onConnectExternal.addListener(function(port) {
port.onMessage.addListener(function(message, sender) {
if (message.from == "WebServer") {
if (message.fn == "greeting") {
console.log("Message from Web Server");
}
}
});
});
Besides, there is a function in the background script to use XHR to GET the HTML page. The function works fine.
Question: The message (which is shown in console log) can be got only when I visit the HTML page in browser but not when the page got by XHR. Why? (Sorry I am new to JavaScript and Chrome Extension)

ADAL.JS and Offline Web App

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.

how to check speech recognition is supported by browser

My website has index.html and voice.html.
If someone navigates to voice.html,they should redirect to index.html if voice recognition is not supported by the browser.
if (!code to check if voice recognition is not supported by the browser)
{
redirect to index.html
}
I am using annyang.js.
If i open voice.html. From OPERA it should redirect to index.html. Because I think opera does not support voice recognition.
This piece of code should be able to handle the concerns.
if ('SpeechRecognition' in window || 'webkitSpeechRecognition' in window) {
// speech recognition API supported
} else {
// speech recognition API not supported
//redirect to another page
location.href = "index.html";
}
What exactly you need to do for detection, depends on what exactly you mean by voice recognition. If you mean Chrome's x-webkit-speech, this should work:
if (document.createElement('input').webkitSpeech === undefined) {
location.href = "index.html";
}
It looks like you can just run a truthy check for annyang:
if (!annyang) {
location.href = 'index.html';
}

Chrome Rich Notifications - How to use it

For 2-3 days I'm trying to use Chrome rich notification. I've read some reviews regarding this but nobody tells how to use implement it.
I want to try it in a html test page. How can I do this? because I couldn't manage to show at least a basic notification... :(
I want to implement this in an extension that I'm building. How can I do this? There are special instructions?
I don't need this simple notification:
function notifyMe() {
if (!("Notification" in window)) {
alert("This browser does not support desktop notification");
}
else if (Notification.permission === "granted") {
var notification = new Notification("Message");
}
else if (Notification.permission !== 'denied') {
Notification.requestPermission(function (permission) {
if(!('permission' in Notification)) {
Notification.permission = permission;
}
if (permission === "granted") {
var notification = new Notification("Message");
}
});
}
}//--Notification code--
I need rich notification because I need a bunch of options which this is offering.
Can someone help me with a tutorial or a html test page to understand how to implement it?
1) You can't use most of chrome APIs outside extensions with proper permissions. So you cannot test it in a standalone HTML file - unless it's packed in an extension, i.e. an options page.
So you can add a test.html file to an extension's folder, and open it as
chrome-extension://yourExtensionIdHere/test.html
It might be easier to test it in the background script though.
2) Well, you need to read the docs! There's also some examples in this article.
Points to remember:
You need to declare the "notifications" permission.
You can't use them in a content script.
Icon is required.
Callbacks (even doing nothing) are required (this was a bug until Chrome 42).
I highly recommend using a diagnostic callback:
function diag() {
if (chrome.runtime.lastError) {
console.error(chrome.runtime.lastError.message);
}
}
chrome.notifications.create(id, options, diag);
It will warn you of any errors while using the API.

Register gcm for chrome

I have a chrome Apps use push notification of GCM. I have a problem, when i don't login account on chrome. I can't receive registerId from GCM. I think a idea. When registerId empty, i show notification, request user login to chrome and show login page account on chrome. But because of security concerns , the chrome does not allow access to its setting from external links . How is open "chrome://settings/" from external links? Can register to gcm, If i don't want login account on chrome?
My code:
function setValue()
{
//var thongtin=$('#status').val();
//var thongtin = document.getElementById('status').innerText;
if(registrationId == "")
{
// Pop up a notification to show notification.
chrome.notifications.create(getNotificationId(), {
title: 'CLOUD MONITOR',
iconUrl: 'gcm_128.png',
type: 'basic',
message: 'You must sign in account gmail on google chrome!'
}, function() {});
//event click to notification
chrome.notifications.onClicked.addListener(function() {
window.location.href = "chrome://settings/"
});
}
else
{
//http://mtraffic.longvan.net/device_register?regId=" +registrationId+"&device=android
//document.getElementById('webviewSendData').src = "http://192.168.64.246:8080/register?REGID=" +registrationId+"&DEVICE=desktop";
document.getElementById('webviewSendData').src = "http://mtraffic.longvan.net/device_register?regId="+registrationId+"&device=android";
//document.getElementById('webviewSendData').src = "http://192.168.64.124:8080/monitor/device_register?regId=" +registrationId+"&device=android";
//var url = "http://192.168.64.124:8080/monitor/device_register?regId=" +registrationId+"&device=android";
//httpGet(url);
//alert(thongtin);
//document.getElementById('status').innerHTML="Infomation New";
// Pop up a notification to show notification.
}
}
This code don't run.
chrome.notifications.onClicked.addListener(function() {
window.location.href = "chrome://settings/"
});
I fix code as Derek 朕會功夫.
chrome.notifications.onClicked.addListener(function() {
chrome.tabs.create({url: "chrome://settings/"});
});
And receive error notify: Error in event handler for notifications.onClicked:TypeError: Can't read property 'create' of underfined.
I'm afraid at the moment it's not possible.
Chrome Apps don't have access to tabs/windows API that can open privileged pages; that's why Derek's suggestion does not work.
In future, they may be a way to do this with chrome.browser API. See this feature request, this proposal, and please leave feedback there with your use case.

Categories

Resources