display: "fullscreen" in web app manifest file does not work - google-chrome

display: "fullscreen" in my web app manifest file does not work. When I launch the site from my home screen the display-mode is standalone.
(I checked that via window.matchMedia('(display-mode: standalone)').matches.)
But there is this article on Google Developers saying that you can use it. Is it not supported on Chrome mobile? I especially want that the statusbar at the top is not shown.

Since Chrome 58 beta/stable immersive fullscreen mode is supported for progressive web apps.
To make it work you will have to create a shortcut on your home screen and launch your web app/site with this icon.
This could be done with the Add to home screen option in Chrome for Android.
For more information see the following Chromium blog post:
https://blog.chromium.org/2017/03/chrome-58-beta-indexeddb-20_21.html

"fullscreen" is not supported yet. Someone from Google Developers replied that on Twitter.

Related

Capture screen on chrome

I saw a cool feature on slack that allows to share screen between users (like teamviewer or skype). But I can't find anywhere documentation how to capture a screen (e.g. on chrome). It seems slack does it without any extension, so it should be integrated into browsers.
Can anyone please provide me a link to documentation or throw me an exampe.
chrome.desktopCapture API offered by Chrome is useful to capture screen content, individual tabs or windows.

Open link in mobile browser(safari) instead of Facebook native browser (html base)

Im developing a web with facebook share link function. I notice facebook mobile apps will open shared link in its own browser, instead of mobile broswer (IE. safari, chrome and so on). Is there any control on this able us to force facebook open the link in mobile browser?
No. The only reliable workaround is if you use the web app with an iOS app, and all users install that iOS app, you can send users to your iOS app to accomplish that task which isn't a great workaround.
An easier but still not optimal solution would be to detect the Facebook browser in the user-agent string, and display a message to prompt users to visit the URL in the mobile browser.

Not able to copy text,XPath or other attribute from the chrome developer tool

I followed the approach mentioned in how to emulate a mobile (android) browser on desktop
to project the mobile webpage's properties on desktop chrome browser. I was successfully able to do that but now I have some queries as mentioned below, please let me know your inputs on that
a) How to use the "Select element option" of chrome developer toolbar to view an element's property for a mobile webpage. In normal desktop chrome browser we have the web page displayed and below that the developer toolbar is displayed and we can easily spot the element using a pointer but with mobile webpage displayed on desktop chrome browser i am not able to use this option as the webpage is not displayed.
b) I tried to copy the xpath and other things from the displayed HTML (HTML of mobile webpage on desktop chrome browser) but it gave me an error that "You need to install a Chrome extension that grants clipboard access to Developer tools". I installed one such extension named: "Auto Copy" but then also I was not able to copy. Please let me know how to go about it.
Thanks a lot in advance,
Namit
For (B) – Judging from the discussion when that message was introduced, it sounds like you need to roll your own simple custom extension to enable clipboard access. Here's a sample manifest.json – I haven't tested it out myself, but it looks pretty straightforward. The extension development Getting Started guide explains how to turn a file like this into a working extension and install it locally.

Input type Color on Chrome Packaged App

I would like to know how to use input[type=color] on Chrome Packaged App. When I open the HTML file on the browser, the input[type=color] works well, it pop ups the color picker, but when I used it on an app, it doesn't do anything. Please help me how to enable this HTML5 feature.
Are you looking at the app from a mobile device? The web browser for the device might not support input[type=color]. It looks like iOS doesn't at this time. See the compatibility tables.

Does mobile Google Chrome support browser extensions?

Can I create a plugin or an extension for Google Chrome MOBILE (Android Google Chrome)?
If not, can I create an extension for Google Chrome (desktop), which will add a button in Google Chrome bar. This button will open the page in another web browser (in my own web browser), so, this button should launch my own web browser.
Extensions are not supported, see: https://developers.google.com/chrome/mobile/docs/faq .
Specifically:
Does Chrome for Android now support the embedded WebView for a hybrid native/web app?
A Chrome-based WebView is included in Android 4.4 (KitKat) and later. See the WebView overview for details.
Does Chrome for Android support apps and extensions?
Chrome apps and extensions are currently not supported on Chrome for
Android. We have no plans to announce at this time.
Can I write and deploy web apps on Chrome for Android?
Though Chrome apps are not currently supported, we would love to see great interactive web sites accessible by URL.
You can use bookmarklets (javascript code in a bookmark) - this also means they sync across devices.
I have loads - I prefix the name with zzz, so they are eazy to type in to the address bar and show in drop down predictions.
To get them to operate on a page you need to go to the page and then in the address bar type the bookmarklet name - this will cause the bookmarklet to execute in the context of the page.
edit
Just to highlight - for this to work, the bookmarklet name must be typed into the address bar while the page you want to operate in is being displayed - if you go off to select the bookmarklet in some other way the page context gets lost, and the bookmarklet operates on a new empty page.
I use
zzzpocket - send to pocket.
zzztwitter tweet this page
zzzmail email this page
zzzpressthis send this page to wordpress
zzztrello send this page to trello
and more...
and it works in chrome whatever platform I am currently logged on to.
Some extensions like blocksite use the accessibility service API to deploy extension like features to Chrome on Android. Might be worth a look through the play store. Otherwise, Firefox is your best bet, though many extensions don't work on mobile for some reason.
https://play.google.com/store/apps/details?id=co.blocksite&hl=en_US
Just use a different browser.
Follow the steps given below to install Chrome extensions on your Android device.
Step 1: Open Google Play Store and download Yandex Browser. Install the browser on your phone.
Step 2: In the URL box of your new browser, open 'chrome.google.com/webstore’ by entering the same in the URL address.
Step 3: Look for the Chrome extension that you want and once you have it, tap on 'Add to Chrome.’
The added Chrome extension will now be automatically added to the Yandex browser.
I imagine that there are not many browsers supporting extension. Indeed, I have been interested in this question for the last year and I only found Dolphin supporting add-ons and other cool features announced few days ago. I want to test it soon.