How to build web application that run in WeChat in app browsers? - google-chrome-extension

I am trying to build a simple web application, which capture users photo and sent it my custom server there by connected to some other business use-case. My web page uses HTML's file input control to launch native camera or gallery pick up option.
var input = document.createElement('input');
input.setAttribute('accept', 'image/*');
input.setAttribute('capture', 'camera');
input.setAttribute('type', 'file');
input.click();
This web app, I placed in local webserver with a name "PhotoLocker" and testing with url like
https://localhost(ipaddress to access via mobile browser)/PhotoLocker/index.html
This link is working fine both on desktop and mobile chrome browsers and am able to debug any issues. Where as same link, I try to access from WeChat browser (just opening above link from chat window), it is not at all opening my application in WeChat in app browser.
After googling, I found that https URL scheme is not supported by WeChat. is it True? When I paste the same app url as weixin://ipaddress/PhotoLocker/index.html, I am able to see my web app home page but it is not working as expected.
My Question is - how to debug my webpage opened in WeChat browser? Do I need a official WeChat Dev account even to develop and test sample apps?
Additional Info :
I am able to debug webpage from WeChat web devloper tool as mentioned in below link. But, unable to debug mobile wechat page in this tool. It is always opening chrome dev tools.
https://mp.weixin.qq.com/wiki?action=doc&id=mp1455784140&t=0.06697335132505233#1

I am a frontend developer in China, Chinese. Forgive my English for any mistake, misunderstanding I could make. Some links (dev docs mostly) below contain sites complete in Chinese, because I can not find corresponding English ones for now.
how to debug my webpage opened in WeChat browser?
Tencent provide an IDE for developing regular web interface and WeChat-mini-program, with which developer can directly interact with:
JSSDK (basically a special weixin
Object lives only in in-WeChat-browser);
API provided in WeChat-mini-program.
If you download that IDE:
First it will ask you is to use you WeChat to scan the QRCode, then confirm login with your WeChat account;
Next it will show up two square button (image below), left one is for WeChat-mini-program, the right one is for you to testing regular web page.
Click the right blue one, then you can find your way out, it's just something built top on project Blink.
As you can see the part of debugging regular webpage in WeChat IDE is no more than a simulator (in the WeChat-mini-program part, developer can write code directly in it), and in my experience it does have bugs, you will still need to test code in real machine.
For that Tencent provide another tool called vConsole, tutorials here, with it you can do following things directly in in-WeChat-browsers:
View console logs;
View network requests;
View document elements;
View Cookies and localStorages;
Execute JS command manually
and so on
Do I need a official WeChat Dev account even to develop and test sample apps?
Depends.
You may know the Official Account inside WeChat, with webpages directly opened in any context inside in-WeChat-browser, it will have the ability to interact the weixin Object, or have some API like login with WeChat, pay with WeChat Pay:
API like close current in-WeChat-browser, hide-share-button will not required anything special, you don't need to register any Official Account;
But if you want yo do the Pay, Login thing, you need an Official Account and pay for the ability every year (not sure about this outside China).
The localhost problem you faced
I don't have my working machine with me now so I can not test. Regularly I can proxy localhost with Charles then debugging in WeChat, but never do the https, I will try it later.

All the information got regarding how to debug webpage opened in wechat browser redirects to how to see log or ajax/netwrok calls analysis.
Even with WeChat web devloper tool as mentioned in below link, I am unable to debug mobile wechat page in this tool. It is always opening chrome dev tools.
https://mp.weixin.qq.com/wiki?action=doc&id=mp1455784140&t=0.06697335132505233#1.
Hence further analyzed remote mobile webpage debugging and found that there is no way to put break points, watch, expressions and all just like in chrome dev tools is not possible.
As a work around - you are able to debug code, when you simulate page in dev tools but no way to debug webpage in mobile device.
Same webpage when tried to do remote debugging as per WeChat web devloper tool documentation. here we can only see console logs and network calls.

Related

Blue Prism applicaton modeler fails to identify authentication pop up window on firefox

I am trying to automate a web application using firefox on blue prism. When I use the application modeler to launch the web application, first it is asking for credentials to login on a pop up window. Application modeler cannot identify this pop up has appeared. So I cannot automate the login. However after login manually, I can spy other elements in the application as normal. Any idea on how to automate the pop up window asking for user name and password?
I assume that you specified your application as browser based in application modeler. It's hard to answer your question without knowing how this web application looks and works like. There are few options that you can try nevertheless:
In the latest version (6.4) Blue Prism introduced Firefox plug-in. If you would be able to upgrade your version to the latest one (if you are not using it already), then maybe you'll be able to spy the pop up.
If this web application does not necessarily need be launched via Firefox in particular, then you can test its behavior and spying possibilities on other browsers - Internet Explorer and Google Chrome (supported by BP since 6.3 version).
You can spy the whole browser's window using Region mode and use Surface Automation techniques to input credentials and log in. SA functionalities are greatly improved since version 6.
You can try using web services (if applicable with this website) to connect with the API of the web application, you'll be able to pass/validate your credentials via web services as well. Blue Prism natively supports SOAP based web services, you might need to come with some code stages to wrap it up. It's pretty advanced stuff though and I wouldn't recommend it as a 1st choice.
Hope this helps.

Pepper Robot Web Debugging

We're trying to show a web page on pepper's tablet, but something goes wrong. How can we get the browser's error messages to debug the web page?
We know js 1.5 is implemented, so we installed all kind of polyfills for Promises, forEach, etc. But no luck. How can we get meaningful debugging info?
thx
Sven
I create a git for showing a web page and send event with the module ALMemory ( see it for an example). For debugging, it is more complicated but you can also try this. You can create a template for showing web page and connect directly it to your robot. For example, you install it on your pc and create a web-page template with python jumpstart.py service-tabletpage my-package-name MyServiceName. A package will be create in a file output. Open this app on choregraphe and install it on the robot. You can after that launch on your computer the web page (double click on index.html, name by default) and just adding at the end of the url ?robot=ip_of_the_robot. You can now debug your code.

chromecast on chrome packaged app

I would like to add the ability to cast my chrome packaged app to a google chromecast device.
So far google states that all you have to do is add
to your page and the API will inject itself.
For me that doesn't happen. No code is injected.
Am I doing something wrong?
There doesn't seem to be a demo showing this type of capability.
EDIT:
I just wanted to clarify a bit. All that I would like to do is display my app to a screen.
I have no media. I simply want to display it exactly as the chrome extension in the chrome browser would.Therefore I would follow the directions for a sender only. The app is packaged so it is running only CSS/JS/HTML5 code. The app is designed to run offline.
Steps I've taken to cast:
1. I've added the extra bit to the HTML line:
2. I've followed the whitelisting, to the best of my understanding, by adding my "website address" to the chrome extension. So I've added the only two address that should matter.
127.0.0.1
192.168.1.106
There is a good chance Content Security Policy is blocking the implementation of the cast API being injected. I see that you've filed Issue 287254: Google cast (chromecast) ability for packaged apps, and suspect we will need to wait for it to be implemented in a packaged apps compliant way.
You must whitelist your device and your Chrome app. See here for more details:
https://developers.google.com/cast/whitelisting#whitelist-chrome

Embedded bookmark in J2ME app

Does anyone know if this is possible in J2ME;
I want to have an app that simply launches a browser when opened and directs the browser to a specific web page.
If so, is it widely supported.
You can use javax.microedition.midlet.MIDlet.platformRequest() to launch the browser on almost all phones that support JavaME. This article tells more about invoking platform services such as browser.

App for Google Chrome

I have created an App for google chrome which just opens a web page. I am new in the topic
of Apps. I was thinking if it is possible to execute some linux command by using an App
in google chrome. For instance, an App which can open a terminal or open a program
installed in my machine like Gimp, Kate, Libre Office ...
From the instructions in the web page of google I saw that the only actions for an App
are limited to open a web address but I dont know if it is possible to extend the capabilities
of the Apps,
Regards.
Aren't apps sandboxed into the Google Chrome Process to ensure they can't affect other processes and for other security reasons. If so, you won't be able to execute programs/commands or view the User's Files unless you use some workaround such as Google's Native Client.
Google has locked down capabilities to stop malicious Web Apps from executing code and bringing malware and exploits.
You can write a NPAPI Plugin or a custom URI scheme associated to Unix terminal.

Resources