Can I Create Chrome Application Shortcuts Programmatically from a Web Page? - javascript

I've thought about using Chrome and HTML5 local storage to create a useful app and sell it. The problem I think I would have, however, is the delivery mechanism to get this installed on one's computer. Let's say the app was wikipedia.com (although it isn't). Manually one can go there with Chrome, then choose the wrench icon, Tools, Create Application Shortcuts, and make a desktop and application menu icon for the app.
Okay, fine, but is there a way I can compose a web page link or form button such that it does this for me? In other words, one clicks a button or link and it shows the Create Application Shortcuts form. I am hoping that there's this little-known way on Google Chrome to use either HTML or Javascript to trigger showing that form.
As for those who don't have Chrome, I can detect that and give them a button they click that emails them. In the email, it will give them instructions for installing Chrome and then another link so that they can visit this page in Chrome in order to get the button that shows the Create Application Shortcuts form.

For now, until a better answer can be provided, this is sort of the technique for deploying a desktop app with Chrome, the manual way, and without having to register in the Chrome Store:
After the user purchases a product, email them the serial number for registering their product and a web URL to install this new product.
The web URL is the actual URL of the web app. However, it doesn't display its normal content by default. Instead, the web app is in "installer mode". It does this by looking at a 200 year persistent, encrypted, registration cookie that may not already be installed. (Note if they delete cookies, there's no harm done -- it just asks them to re-register again.)
The first thing the web app does in Installer Mode is detect user agent. If it finds this is not Chrome, it gives them a link to install Chrome and tells them to follow the instruction email again that they have already been sent, but using Chrome to do this. (You might also want to provide a form to resend them the instructions and serial number again.)
The user either installs Chrome and returns back to this page again, or is already a Chrome user. The Installer Mode then shows a message that reads, please press the ALT-F key in Chrome, or press the Wrench icon in your toolbar, and choose Tools > Create Application Shortcuts, check the two checkboxes, click OK, and then click the "Task Performed" button below.
The user follows the instructions and creates their desktop/application shortcut and then clicks "Task Performed".
The user then sees a registration form where they are to type in their serial number they were emailed. The user enters this in and clicks the Register button.
The server validates the registration and then stores a persistent, 200 year encrypted cookie that basically says, "This guy is registered." This keeps the web app from running in Installer Mode.
The Installer Mode is still active, however, and shows them the final prompt: "You may close your browser and run the icon for the new app from your desktop or application shortcut that you created. The icon is named '{insert name here}'."
They close their browser and doubleclick the icon. The application loads, the registration cookie is read, and the web app no longer runs in Installer Mode -- it shows the application content like it normally would. Besides the fact that this is not a 100% truly automated install, the only drawback is that, since the main page is not a local file (cached), the web app can't really work offline completely. Sure, it can use HTML5 offline storage, but doubleclicking the desktop shortcut will always connect to your web app site.

Related

Google log in from system default browser into web browser that I created

I want to create a login system where if the user logs in within their default browser I want them to automatically login in my web browser as well (this web browser is within my desktop app).
To explain it step by step:
the user clicks the "login" button on my website (the website is opened in my app in my own browser)
the default browser opens and navigates to my login page
the user logs in there
if login is successful my program/web browser catches the information
the user is automatically logged in in my web browser as well
My app is centered around the browser that I built, so I cannot change it.
I also cannot / would prefer not to have the users use my own browser to log in for two reasons:
it would require verification from Google (without it, Google warns users that the app is unsafe)
but more importantly, it makes the login process more difficult for the users (they would have to enter their email and password and go through 2FA again if they have it set up)
I thought I needed to create a custom URI scheme for my application and send the login information to my program but it sounds unsecure.
Maybe since I am communicating between different browsers, I should handle this with socket programming?
The tech I use:
for the web browser: Qt6 QWebEngineView
for the website: laravel and javascript
I am looking for ideas or road maps here. How can I do this securely?

automatically access default browser by os and copy the value from input field to my program

i've created electron app that will asking for authorization to my google drive account. my application is very simple, it will display the list of files from my google drive account. Here's the link
To get the authorization key, manually i have to click authorize button from my electron app, then it will open new tab in my default browser. i need to give the permission to accessing my google drive data. Then google drive will provide the authorization key to me then i can get and enter the key to my app.
How do I run the above scenario automatically?
You really don't want this to be the default flow for your users' code so I am assuming you are asking for test automation so you can test this works. You would basically:
Install the chromedriver package.
You would create a script that downloads and launches chromedriver then use something like webdriver.io to launch a Chrome session.
In the session, you would configure the user data directory to the user's real directory. You can find the locations in different operating systems here.
You now have a fully automated Chrome with the user's data.
Now, you use electron to request permissions, which will open a tab on the browser with an active selenium session.
Call browser.click('...') on whatever element you want in the page to accept the request.
I want to make it very clear this is only acceptable and will work when testing. "In the wild" controlling the user's browser without explicit permission through a third-party executable is a sure-fire way to get flagged by every anti-malware product in the market and liable for data breaches.

Open Android app through deep link if it's installed or fall back to web if not installed

I'm trying to create a web page that automatically opens an Android app but only if app is installed. In case it's not it should redirect to another web page.
The app is already in production and is properly handling deep links like example://content?id=42. The format of the link could not be changed.
What I've already tried
1) Redirects and timeout:
window.location.replace('example://content?id=42');
setTimeout(function() {
window.location.replace = 'http://example.com/content?id=42';
}, 500);
Works fine for iOS but for Android it redirects to example:// immediately and thus gives me ERR_UNKNOWN_URL_SCHEME. Seems to be no go for Android.
2) iframe approach. Impossible in rencent Chrome versions. Also doesn't seem to work in Samsung browser.
3) Intents with S.browser_fallback_url. Works well but in Chrome only. Doesn't work in Opera and Samsung browser... most probably nowhere else but Chrome 25+.
use http://example.com/content?id=42 as the link and add the intent filter to your activity in manifest
<intent-filter>
<data android:scheme="http" android:host="example.com" />
...
</intent-filter>
However, a list of app registered, e.g. browsers, will show up when the link is first accessed on the machine.
You need to be aware of the browser of the client, and its operating system and adapt your site to them. For example, if the browser is Chrome and the OS is Android, use the Intent solution; if the browser is Safari use the example:// schema. You can get the info looking at the User-Agent header of the request, but I'm sure there are many open source libraries that can help you to get infos related to browser and OS.
Seems like you could at least approximate the experience by letting the user give a one-time assist:
Have your web page itself have the fallback url content.
When the page is hit check the user agent to see if the os is Android
If its Android, show the user a choice prompt/dialog to use web or Android
If they choose web (remember the choice with local storage), dismiss the dialog and show the fallback
If they choose android (remember the choice), redirect to the app with the intent:// URL (without fallback_url), will take them to market to install if necessary
After the first interaction, it'll work as you describe - automatically taking them to the web page or the installed app.
You can try using this scheme(to be sent to the user):
intent://details?id=X&url=Y&referrer=Z#Intent;scheme=market;action=android.intent.action.VIEW;package=com.android.vending;end";
X: Package name of the App
Y: Deep link scheme which should be defined in the App's manifest.
(Please refer this)
Here, they have used this URL as an example: "http://www.example.com/gizmos" , therefore Y should be replaced by this URL.
Z: Can be any data which you want to pass to the App via Google Play.
Please take note that any data which you pass should not be '&' separated because the original parameters are itself '&' separated.
PS: The Google Play makes a broadcast to the app. So make sure you receive the broadcast in a receiver.

Looking for a script that can be ran in Chrome to automatically reset the browser settings.

What I'm looking to do is create a script that we could place on people's desktop to reset some settings back to where I want them for internal web application?
The script will need to reset everytime a user opens and closes the browser.
As far as my knowledge says, you cannot just edit settings of a browser without attaining user's permissions. So, it will be better to write a chrome plug-in application and ask you web application users to install that first.
You can identify the plug-in status in your web application.

How to detect that User has added webapp to the homescreen on mobile device?

I am working on a webapp. I want to count the number of Users that added my webapp to home screen.
suppose my website is.
http://www.example.com
I have added meta tags that allow Mobile users to add it to home screen. I want a count of users that downloaded my webapp. If User has downloaded even if he has not opened that then also I should get notification that User has added it to home screen.
So I need any event that should work when an Webapp is added to home screen.
My webapp is in HTML5
First of all, officially it's not possible, as per the official FAQ:
How can I detect if the app is running as an installed app?
You can’t, directly.
which is again re-iterated
Best practices
Do not prompt the user to add your app to the homescreen. There is no way to detect if the app is running installed or not.
Source: https://developer.chrome.com/multidevice/android/installtohomescreen
You could do some manual checking of the screen sizes though on page load, as chrome can't go fullscreen by hand, but do not rely on this (though for statistical purposes it might be interesting).
Another clarification which might be useful, the application is not downloaded when it's added to the homescreen. All that happens is that a 'link' will be created to chrome with certain parameters. By design little information is disclosed to developers regarding this process to prevent companies from forcing users to 'install' webapps before they would function.
As of 2018, according to https://developers.google.com/web/fundamentals/app-install-banners/:
To determine if the app was successfully added to the user's home screen after they accepted the prompt, you can listen for the appinstalled event.
window.addEventListener('appinstalled', (evt) => {
app.logEvent('a2hs', 'installed');
});

Categories

Resources