We Keep Coding

How to open a browser app which is listed in chrome://apps

Chromium-based browser has the apps page at chrome://apps
There are some apps that I have installed into it. Is it able to launch one of them from JavaScript somewhat just like opening file selecting box?
I can open chrome://apps by setting this URL in to a link, but how about a single app?

Copied from: Open Chrome in a new window (Chrome app)
Sadly, there's no way to do that I know of.
Using window.open in an app's context is a bit of a hack, but results in the URL being open in the user's default browser (not necessarily Chrome). There's no control as to how the browser chooses to open it.
There's a Chrome App-specific API that was created specifically with "open a page in Chrome" in mind, chrome.browser. However, it still doesn't provide an option to open in a new window.
The closest you can get is to create your own "browser": an app window with an in it. Then you have full control over the presentation, but it's not integrated with Chrome's profile and may require additional work to implement things like dialogs and browser controls. See the Browser sample app and documentation.

You may need the app id which you can then append to the URL. I am not entirely sure how you would find but if you go to the apps page on chrome, drag the icon of the app to the search bar in the browser, you should get the full link.
For instance, I dragged the Google Slides Icon onto the search bar and it gave me this url chrome-extension://aapocclcgogkmnckokdopfmhonfmgoek/main.html. So, you may give it a shot! Try to open the chrome apps page, then drag the app you want to open in new tab onto the search bar.
Hence, using Javascript:
window.open("chrome-extension://aapocclcgogkmnckokdopfmhonfmgoek/main.html", "_blank");
Opens Google Slides App in a new tab.

onhashchange not working within in-app browsers (Facebook, Twiiter)

I'm using the onhashchange window event to detect the url hash change for my single page webapp. This enables me to fire AJAX, while retaining the browser history.
User clicks anchor with href="#hashlink".
onhashchange detects the URL updating.
#hashlink is extracted and passed in as AJAX url (/partials/hashlink.php).
I have discovered an issue. You may already be aware, but Facebook and Twitter have started launching external links within an in-app browser. It seems to prevent the default action of page anchors href, which has killed my hash change detection. Thus my webapp is pretty much useless :-(
The in-app browser for Facebook and Twitter were only released very recently, so finding a solution is proving to be difficult.
Thanks in advance!

I know this is an old question, but I ran into the same problem yesterday. Was not able to find a solution that allowed me to keep my use of hash links and the onhashchange event. I rewrote my code to use the History API, which is widely supported (caniuse says it works for every browser except Opera Mini, but when I tested, it worked for me there, too).
Step-by-step:
turn all hash links into buttons, or some other accessible format (div with a role="link" attribute, etc). (don't forget to include an aria-label attribute if the buttons don't contain text clearly stating their function).
<button class="nav__list-item" data-id="${p.websafeHandle}" aria-label="Read our Q & A with ${p.name}">
<div class="nav__list-item__img" style="background-image: url(${p.thumbnail})"></div>
<span class="nav__list-item__handle">${p.handle}</span>
</button>
add click event listener
const qaLinks = document.querySelectorAll('.nav__list-item')
qaLinks.forEach(link => {
link.addEventListener('click', (e) => this.loadQA(e.currentTarget.dataset.id, true))
})
click event handler to update page content and browser history
loadQA(person, updateHistory) {
// I'm condensing/summarizing the parts of my code that deal with fetching data and
// outputting it on the page, because it's not particularly relevant to this question.
const data = this.data[person]
this.container.innerHTML = template(Templates.qaPage, data.qa)
// the loadQA function will also be called if somebody comes to this page
// with a hash link like the one below. in that case (on an initial visit,
// instead of navigation within my single-page app), I wouldn't want to add
// the page to the history again, thereby creating a double entry,
// which is why I have the updateHistory param
if (updateHistory) {
// update our page title and our URL and add it to the browser history
const title = `MTI - ${data.info.name}`
const hash = `#/qa/${data.info.websafeHandle}`
history.pushState(null, title, hash)
}
}
event handler that will fire whenever someone uses their browser's forward/back buttons
window.addEventListener('popstate', () => this.loadPage())
in the popstate event handler (which is also run on initial page load), get the URL hash and load the page accordingly
loadPage() {
if (!window.location.hash) {
// the param here is for updateHistory
this.showLanding(false)
} else {
const person = this.getHashParam()
person ? this.loadQA(person, false) : this.showLanding(true)
}
}
Side note: I found this app to be really helpful for testing my local code in Facebook's IAB. You give it a link (e.g. to your dev site), it generates a link (you have to use the xip.io one to be able to open it in FB), gives you a QR code to scan with your phone, which connects your phone to its dev tools and opens that link in your browser. then you can copy the link, post it in a private FB post only you can see, and voila! you can visit your local server in the Facebook browser, and Ghostlab gives you access to all the dev tools you'd normally have in Chrome.

iPhone: Close Safari and return to homescreen using a script?

I have a .html-file that loads a javascript when loaded. I use this to turn on/off electronics in my home.
Currently I have saved the link on my homescreen (iPhone), and I have set the window to close automatically after 1 second of it being opened (which is enough for my javascript to run).
However, I think it would be much more cool, if I somehow could get Safari to close after closing the window. In that way I could return to my homescreen, so I wouldn't have to touch the homebutton, and thereby using this link as a sort of "switch" on my homescreen to turn on/off my electronics.
I have thought of using some code like:
function redirection() {
var userAgent = window.navigator.userAgent;
if (userAgent.match(/iPad/i) || userAgent.match(/iPhone/i)) {
window.location = "myapp://"
}
}
</script>
But this would require a URL Scheme for the dashboard, which I don't think exist (?).
Do you have any other suggestions or is this task just not possible to perform? :)
Thanks in advance

Apple doesn't have an approved way to exit an application, especially not one of their applications, like Safari. Like the Hotel California, you can launch another application, but you can never leave.

Dynamicaly change the URL and id of a body via a link without refreshing page

I am trying to dynamically change the URL displayed to the user and change the id of the body without refreshing the page. The function I require is very similar to flickr.com when you click on an image, the pop-up appears. The id of the body has a word appended to it, and the url of the website also has a word appended to it.
An example would be:
http://www.flickr.com/photos/orangeacid/459207903/
There is an image there, if you click on the image the URL changes to as follows:
http://www.flickr.com/photos/orangeacid/459207903/lightbox/
(This new page is just overlaying the old one)
Before clicking on the link the body tag is as follows:
document.body.className = [document.body.className, 'js'].join(' ');
...
After clicking on the picture it changes to:
document.body.className = [document.body.className, 'js'].join(' ');
...

Flickr uses Yahoo's YUI library and what you are talking about is the lightbox component, and the history utility.
There is no all-in-one function, you have to build it yourself, using the library.
Note about the url : HTML5 adds a new history API that allows javascript to change the url (pushState) without reloading the page and without using the "hash" hack. It's available in webkit (Chrome, Safari) since a while and in Firefox 4. Using history from YUI will help you implementing this.

I have recently started to repatch the jquery fancybox plugin to work with the History API. Which does something similar to flickr's implementation.
However, it might just be the history API you are talking about
Click here to see my plugin on github
Click here to see an introduction to the History API
Click here to see my talk on the history API
:)
Hope it helps

Drag and drop a link on the desktop to create a shortcut

My client asked me a interesting thing today.
Drag and drop a link in the browser on the desktop to create a shortcut to the linked webpage.
We have a web-application and it could be very good to enable the user to directly connect their application.
Do you have any idea of how to do that ?

Isn't this how it actually works with most browsers in Windows? I've just tried in Firefox and IE, and both gave me a shortcut direct to the page on the desktop. Or am I missing something in your question?

Works fine in Windows as-is. If you're talking about some sort of javascript link or button I"m afraid not.

Dragging any link to the desktop should work, but you could extend it by creating a special link (perhaps per screen) that will let the user return to the exact application state.
Obviously you would have to add any state-preserving info into the links URL. You might also have to update the web application to restore the state based on that info.

Obviously you would have to add any state-preserving info into the links URL.
A further suggestion: put the state in the anchor of the URL, like so:
http://mycompany.com/myapplication#mystatevariable=xyz
That way, the browser doesn't reload the whole application. Of course, you'll have to monitor the URL and process the anchor in Javascript.