Customize 'share' message in Google Chrome - javascript

I want my website to enable people to share their score via instant messengers.
So there is this nifty feature where you can share websites in Google Chrome on Android
with other people (on the screenshot it says 'Teilen'):
Right now all it does is for example messages people on whatsapp the title of the webpage and its URL, so I wondered if I could somehow customize this behavior.
So, is it possible?
Also, is there a way to trigger this share functionality via javascript?

It is not possible to influence this directly from a website, but there are two things you can do.
Change url to highscore specific score
As soon as the user get's a new score use the history API .replaceState function to change the URL to a URL that for others will load a page with his highscore. And set window.title to what you want the title to be (though make sure this is something sensible for the player as well).
Triggering the share dialog from code is not possible.
Cordova (+crosswalk)
If you really wish to trigger the share dialog from code you would have to bundle your application as a native application using Cordova (and crosswalk if it's a game). There are next various plugins that expose the share dialog from Javascript.

Related

Force facebook to open link in external browser for smart phones

How can I post a link to my website in a Facebook post, and have it open in the user's external browser when using smartphone app, not Facebook's native browser, which is not displaying properly? My page is http://www.hannabery.com
On Android, you can use Firebase Dynamic Links to let user open specific URLs by external browser. I guess that Android webview is equipped with some Firebase SDKs, so this method only works on Android. User still opens link by in-app browser on iOS.
Create a project and a domain for dynamic links
Manually create the link like: https://DOMAIN.page.link/?link=YOUR_DEST_URL
(Or there're many other ways to create links)
For example, post this link on Facebook or Messenger and try it:
https://fugle.page.link/trade-landing-page
Note: Dynamic Links are mainly used to provide consistent and smooth UX across platforms and app installs. This is just a side effect I discovered may help to answer the question, and it may not last long and so should not be taken as the final solution.
Hope that this way can help you:
var ifc = document.createElement("div");
ifc.innerHTML = `<iframe src='${browserScheme}${target}' style='width:0;height:0;border:0; border:none;visibility: hidden;'></iframe>`;
document.body.appendChild(ifc);
Full sources and example: https://github.com/huantt/force-open-browser/tree/master
https://github.com/huantt/force-open-browser/tree/master I thought this one only worked when link is sent on messenger. But any link clicked on fb messenger is going to ask what browser you prefer. I used the code on my page and I posted the link on FB and it is opened by the FB browser. How annoying :(
This cant be done (for obvious security reasons) but there are ways
1.Create an app for your website
If you create an app for your website then theres no need for facebook in the middle of things
2.Create an app displaying facebook page
As long as its your page and not something misleading then this is allowed and you can do some pretty neat stuff in android studio
for example if you post a like
mywebsite.com/forum/
theres this cool function you can use .endsWith("/forum/") from there you can make your application do ANYTHING when a link is clicked that ends with "/forum/"
A few things ive done
Redirect to that link
open browser to display link
Move to portion of app
Display dialog boxs
and theres much more your able to do
If you are having issues with your PWA not running correctly in Facebooks (insert expletive) Mobile Browser. Using dynamic links will force it out to the regular browser. Don't use your custom domain though. Use https://YOURDOMAIN.page.link instead
https://firebase.google.com/docs/dynamic-links/custom-domains
also DO NOT skip the preview page!

Getting camera and geolocation permission ahead of time

I'm building a web-app that uses the device's camera and location services. The browser (I'm sticking to Chrome for now) asks the user for permission to do so on the page where the service is used.
I want the interface to be able to ask for permission at an early stage in the workflow so the pop-up dialogs don't come up during the use of the app. I know they would go away after the first visit to a page, but I want to avoid it the first time too.
Javascript is pretty much the only tool I know how to use, and I know each page has a separate Javascript execution context, so I can't get references to the objects on one page and hand them over to another.
So is there a way that will work? Maybe I need to learn some other technology?
If you need to do it in the browser, then I would suggest creating a sort of initialization page before going to the actual app page.
In the ini page you can call all permissions and download+cache all needed app scripts and also validate which permissions were accepted and not. Kinda something like when using GMail you go through their ini page first before getting to the actual GMail ui.
Once the ini page has completely loaded simply redirect to the actual app.
If you want to do it outside the browser and still use the same web technologies, take a look at Electron or NW.js.
Both tools above lets you build cross platform desktop apps with web technologies. Things like asking for camera and geolocation can be done without user permission (as I recall. not sure)

Using JS to create a "link" to a password protected site

Quite a few of the sites that the schools I work in use have user accounts to protect the content from people who haven't paid for it which means that the users (aged 5+) have to type in some pretty weird usernames/passwords before they can do their work.
I was wondering if it possible to use Javascript to create a page that would let me do something along the lines of:
Fetch the Login Page
Fill out the form
Submit It
Redirect the user to the site
1-3 would happen in the background without the user seeing it.
In most cases these accounts are shared and the details are on displays etc... in the classrooms so there is no issue with the details being publicly accessible.
I have used Mechanize in ruby before and would imagine a solution like it but running client side.
I know that some inspection of the target site will be needed but once I have an in-principle example I should be able to tailor it to each site later.
If you have a standardized browser, you should consider building a plugin for that browser, that's the easiest way to interact with the web pages. Otherwise you'll get into issues with anti-CSRF protections and cross-domain-policies.
As for the language, Chrome extensions are written in javascript and are pretty easy to build. For the other browsers I don't know.

Use JS or some applet to create a screenshot in Firefox?

I'm creating a personal home page, due to the fact that iGoogle will be discontinued. One of the things I'm trying to create, is a speed dial-type interface, with website thumbnails as links, and I'd like to automate this process.
I've attempted screenshot automation a few years back with linux and the webkit engine. And it's fine. But my problem is, that I want the screenshots to be from my browser, i.e. my Gmail inbox, not the login page I'd get if attempting a remote screenshot.
I thought of using html2canvas but again, I'd have to load the source of the webpages remotely using a proxy, and that's not what I want. Another attempt of mine, was to load the website in an iframe, extract the source, and pass it on to html2canvas. Unfortunately most websites like google, facebook etc don't allow embeding their websites into iframes, so I'm still stuck.
How do plugins like FoxTab, and SpeedDial make the screenshots from within the browser without popups etc? They do it "browser side" silently, is it possible to duplicate this using just JavaScript? Or is there a way I could accomplish the same in another way, perhaps with a custom addon or something?..
Have you considered using a service like http://webthumbnail.org/ ?
http://phantomjs.org/ is also a great service for that if you want to do it yourself.
Take a look at phatomjs. We use it to take screenshots of all our hosted sites periodically. Phantomjs is a headless Webkit implementation.

How can I get HTML to link to a browser (or system) specified URL?

I'd like to be able to create a "HTML link" that the user can click on and be taken to an URL (location) specified either in the browser (preferences?) or system environment.
Is this possible? Any suggestions on how to do it please?
For example, it may look something like this (or alternatively it could be a clickable image or even a submit button):
"Click here to go to your preferred news site."
When the user clicks on "here" the browser would go to a location specified not in the HTML but somehow in the browser (preferences?) or some system environment variable (OS specific etc.)
Of course, the user would have to set up this preference or environment variable (or have some local application or better Web page that could set it - when approved by the user).
This is sort of like most OS these days allow you to set "preferred app" for image processing or playing media. I would like to set preferred Web sites for certain tasks.
Thanks for any suggestions. Hopefully with Javascript and modern browsers and perhaps HTML 5 something like this is possible.
Update: I would like the user to be able to set this once for themselves (e.g. in the browser or the OS) and then for this to work on any site they go to that includes the same "abstract link".
So Web site A and web site B could both an "abstract link" to go to the user's preferred news site and when clicked on the browser would go to the site specified in the browser or the OS). So it cannot be site-specific (like a cookie?).
Cheers,
Ashley.
The general process would be something like this:
Set a cookie using js. Then create a function that retrieves the cookie and redirects. Then trigger an onclick or an onmousedown even like onmousedown='retriveAndRedirect()'
Check out there resources.
QuircksMode's JavaScript Cookies Reference.
W3School's JavaScript Cookies Reference.
UPDATE:
I see what you're trying to do here. In order for your redirection to work from any site, that site has to host your redirection and preference method somehow using js, html, serverside script, etc...
Your other option would be to build a plugin which the user would have to download, that way you wouln'd need any site host your redirection and preference methods for you.
As far as your link retrieval methods go you can either use cookies, or store the links in a database and then call on trigger.
You can store the preferred web site in a cookie. Simple version using the readCookie function from there:
Click to go to your preferred news site

Categories

Resources