How to make WebGPU run in Chrome Canary 97? - chrome-canary

Whichever WebGPU example (austin-eng, jack1232/WebGPU-Step-By-Step, etc...) I run in Chrome Canary 97.0.4686.0 with unsafe WebGPU flag enabled I get some errors in console that indicate that my browser does not support WebGPU.
Example: https://austin-eng.com/webgpu-samples/samples/helloTriangle
Is WebGPU Enabled?
TypeError: Cannot read property 'requestDevice' of null
Can you reproduce this behavior?

Recently (at least in 96), WebGPU is no longer behind a flag, instead it's now behind an origin trial. This means that you can register for a token and put it in the <head> of your webpage and it will enable WebGPU for all users.
To do this, go to: https://developer.chrome.com/origintrials/#/register_trial/118219490218475521, fill out the form, and retrieve your token. Note that you can also request a token for localhost for development. Then simply add <meta http-equiv="origin-trial" content={ORIGIN_TRIAL_KEY}/> to your webpage and if registered correctly, WebGPU will be enabled for not only you but everyone that visits your site.
If you are using JSX/React, use this: <meta httpEquiv="origin-trial" content={ORIGIN_TRIAL_KEY}/>
The difference is http-equiv vs httpEquiv.

As https://web.dev/gpu/#enabling-via-about:flags says, to experiment with WebGPU locally, enable the #enable-unsafe-webgpu flag in about://flags.
To check if WebGPU is supported, use:
if ("gpu" in navigator) {
// WebGPU is supported! 🎉
}
Caution: The GPU adapter returned by navigator.gpu.requestAdapter() may be null.
At the time of writing, WebGPU is available on select devices on Chrome OS, macOS, and Windows 10 in Chrome 94 with more devices being supported in the future. Linux experimental support is available by running Chrome with --enable-features=Vulkan. More support for more platforms will follow.

if you use chrome of canary, why not use the latest canary, as far as I know, satable version is already 108, the latest canary version is 111.
when you enable #enable-unsafe-webgpu in the lastest canary chrome. you can use ts code
let adapter: GPUAdapter;
let device: GPUDevice;
export async function getGpuDevice() {
if (device) {
return { adapter, device }
} else {
try {
adapter = (await navigator.gpu.requestAdapter())!;
device = (await adapter!.requestDevice())!;
} catch (e) {
alert('your browser don‘t support webgpu\n你的浏览器不支持 webgpu');
}
return { adapter, device };
}
}
good luck!

Related

Permission issue for appium chrome borwser

I am implementing an appium test on remote android driver, with chrome browser for loading urls.
Some of the Urls are pdfs, and chrome asks to store those files. and appears that chrome doesnt have access to filesystem to store those files, which results in a dialog like below.
Please help me pass that dialog without any manual inputs.
Upon clicking continue, it will load actual permissions dialog from Android.
Here is my code initialize appium capabilities
DesiredCapabilities caps = DesiredCapabilities.android();
caps.setCapability("appiumVersion", "1.9.1");
caps.setCapability("deviceName","Samsung Galaxy S9 Plus HD GoogleAPI Emulator");
caps.setCapability("deviceOrientation", "portrait");
caps.setCapability("browserName", "Chrome");
caps.setCapability("platformVersion", "8.1");
caps.setCapability("platformName","Android");
caps.setCapability("autoAcceptAlerts", true);
caps.setCapability("autoGrantPermissions", true);
caps.setCapability("chromedriverArgs", "--allow-file-access-from-files");
caps.setCapability("maxDuration", 10000);
and this is the snippet I use to load a Url
driver.navigate().to("http://kmmc.in/wp-content/uploads/2014/01/lesson2.pdf");
autoGrantPermission also doesnt work in this case because chrome is already installed. Appium team has already rejected this issue -
https://github.com/appium/appium/issues/10008
Please help!
Indeed I had very hard time finding out the solution, but eventually I found a workaround.
The best workaround would have been reinstalling the chrome package. I tried that, but I could not start chrome after reinstalling it, as I had no access to shell, and chromedriver complained. So I left that track.
I tried getting hold of adb command or mobile:changePermissions but for that you need to use server flag --relaxed-security while starting the server, and saucelabs doesnt provide any handy interface to start the server with this flag.
The last resort, I found a solution here - https://stackoverflow.com/a/51241899/4675277 . But just that was not sufficient, because it helped me fix chrome alert, but later on it popped up with another alert with allow and deny, for which another solution in the same question helped me. So this is the code I eventually used -
driver.navigate().to("http://kmmc.in/wp-content/uploads/2014/01/lesson2.pdf");
String webContext = ((AndroidDriver)driver).getContext();
Set<String> contexts = ((AndroidDriver)driver).getContextHandles();
for (String context: contexts){
if (context.contains("NATIVE_APP")){
((AndroidDriver)driver).context(context);
break;
}
}
driver.findElement(By.id("android:id/button1")).click();
contexts = ((AndroidDriver)driver).getContextHandles();
for (String context: contexts){
if (context.contains("NATIVE_APP")){
((AndroidDriver)driver).context(context);
break;
}
}
driver.findElement(By.id("com.android.packageinstaller:id/permission_allow_button")).click();
((AndroidDriver)driver).context(webContext);
This helps allow all permissions required.

Incomplete Implementation of CTAP2 (FIDO2) protocol in Chrome?

I've been investigating the implementation of CTAP2 protocol with Google Chrome (protocol between Fido Authenticator and Fido Client (e.g. Chrome)), which should be supported in Chrome since version 69.
So I dumped the chrome request to the authenticator in two cases:
1. U2F (CTAP1) with yubico demo website.
Here everything goes as expected and chrome follows the CTAP1 protocol.
2. FIDO2/Webauthn (CTAP2) with webauthn.org
And the browser has a strange behaviour:
It starts by following the CTAP2 protocol by sending a AuthenticatorGetInfoRequest
The Authenticator replies with AuthenticatorGetInfoResponse
But then Chrome switches to the CTAP1 protocol by sending a Registration Request Message (U2F_REGISTER)
Is it a problem with Chrome implementation: CTAP2 is not enabled entirely yet (it seems to be implemented in Chromium sources)?
Or is the problem coming from the authenticator: sending a response that makes Chrome switch to CTAP1?
Or something else entirely?
In AuthenticatorGetInfoRequest, the authenticator must respond with a string list of the supported versions among "U2F_V2" and "FIDO_2_0". Note also in case of NFC or CCID, a "FIDO_2_0" (CTAP2) only authenticator shall anwser directly "FIDO_2_0" on the SELECT command. I don't know about HID and BLE.
So maybe your authenticator is listing "U2F_V2" in the protocol versions list in AuthenticatorGetInfoRequest.
I also imagine the Chrome code base about this was moving fast and can be partial or not strict. To my tests in early 2020, the Chrome CTAP capabilities seem now stable and compliant.

Webdriver.io enable flash for selenium-standalone

I'm writing acceptance tests on node.js using webdriver.io with selenium standalone server with latest Google Chrome driver.
I need to check that flash elements are clickable, but browser keeps to show me "Restart Chrome to enable Adobe Flash Player".
I've seen article that shows how to make Chrome driver to see custom profile on local machine, but I can't understand how to use this with my standalone server, since it has poor examples for configuration.
Can you explain the correct way to enable Adobe flash player for selenium standalone server in webdriver.io?
I found that the following worked:
browserName: 'chrome',
'goog:chromeOptions' : {
args: ['enable-features=RunAllFlashInAllowMode',
'disable-features=EnableEphemeralFlashPermission'],
prefs: {
"profile.content_settings.exceptions.plugins.*,*.per_resource.adobe-flash-player": 1,
'PluginsAllowedForUrls': '/route/to/site.com'
}
}
Using ephemeral mode will create a temp profile which allows the prefs to take effect:
https://developer.chrome.com/extensions/contentSettings
https://support.google.com/chrome/a/answer/3538894?hl=en
'goog:chromeOptions' was introduced as of selenium 3.8 github.com/elgalu/docker-selenium/issues/201 –
You can open up the profile which is a JSON blob and see the site added at profile.content_settings.exceptions.plugins and profile.content_settings.exceptions.flash_data.
It is very easy. you need to create a custom profile that you will always use to load your chrome with. then you configure the browser like you would do manually too. this means make website exclusions for flash. load some extensions or whatever you want to preconfig. with this code you can do it
// setup browser
var options = {
desiredCapabilities: {
browserName: 'chrome',
chromeOptions: {
args: ['user-data-dir=C:/Users/Administrator/AppData/Local/Google/Chrome/User Data/Profile 21v69',
'--lang=en']
} // chromeOptions: {
} // desiredCapabilities: {
} // options = {
var client = webdriverio.remote(options).init();
Also here are all command line commands for chrome
https://peter.sh/experiments/chromium-command-line-switches/
Another workable method. It's possible to allow flash plugin execution in the chrome config
You need to add in the wdio.conf.js three last preferences from code example
chromeOptions : {
args: chromeArgs,
prefs: {
"download.default_directory": process.env.PWD +'/download',
"profile.default_content_setting_values.plugins": 1,
"profile.content_settings.plugin_whitelist.adobe-flash-player": 1,
"profile.content_settings.exceptions.plugins.*,*.per_resource.adobe-flash-player": 1
}
}
I hope it will helpful

App doesn't geolocate after installation on FF OS

I've written a web app for Firefox Mobile / Firefox OS. My app uses geolocation.
It worked well when I tested it with Firefox for Android and the FFOS simulator add-on by visiting the web address of the application. Recently I've passed the Firefox Marketplace review and my app is installable on FFOS and Firefox for Android. To my surprise, when I installed and ran it, geolocation didn't work.
Here's an excerpt from the .webapp file:
"permissions": {
"geolocation": {
"description": "Required for ....."
}
}
Here's the relevant part of JS:
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(positionFound, positionNotFound, {
enableHighAccuracy: false,
maximumAge: 3600000
});
}
else {
$('#location').html('No geolocation support');
}
The else block is not executed, so JS detects that geolocation exists, but the callback is never called, and the GPS icon never blinks.
The app still works and positionFound() is called properly when accessed via its URL, not as an installed app.
How can I make it geolocate after installation?
The following code works for us, however GPS functionality is severely limited on the Geeksphone FFOS 1.2 nightly builds as well as aGPS on FFOS 1.0 (time to first fix ~ 5min). The geoLocation API requires frequent reboots on our devices. For us, FFOS 1.1 worked best so far. Try to use one of the existing GPS apps like "gpsDashboard" before starting your app. This way you know your phone is working.
function geo_success(position) {
alert(position.coords.longitude);
}
function geo_error() {
alert("Sorry, no position available.");
}
var geo_options = {
enableHighAccuracy: true,
maximumAge : 300000,
timeout : 270000
};
navigator.geolocation.watchPosition(geo_success, geo_error, geo_options);
Do your callback functions work properly with fake data?
Here's a post on the Mozilla Hacks Blog that discusses geolocation tips and tricks, as well as limitations with some of the developer devices:
https://hacks.mozilla.org/2013/10/who-moved-my-geolocation/

Chrome and Mocha Global Leaks

I have the following extremely simple Mocha / Chai test:
describe('main tests', function () {
var expect = chai.expect, something = null;
before(function () {
something = 0;
});
it('should equal 0', function () {
expect(something).to.equal(0);
});
});
This fails in chrome with the following output:
Error: global leaks detected: css, cssFile, cssRule
In both Firefox and Safari, it passes with no problem.
There was another global variable defined by Google's own Screen Capture extension. Upon disabling that extension Mocha only complained about css, cssFile, and cssRule being global leaks.
I checked and these variables are not defined in Safari or Firefox, so obviously something in Chrome or one of my Chrome extensions is defining these three variables. Is there any way to figure out which extension is defining these variables short of disabling and reenabling all of them in sequence?
The best solution for your problem is not some JavaScript snippet, but the source code of your installed extensions.
Visit the Extensions sub-directory of your Chrome profile (locations below).
Use a tool to recursively search for the term.
For example, using the grep command: grep -r 'cssFile' (available for Linux, Mac and even Windows).
Default locations for your profile's Chrome extensions
Windows XP:
Chrome : %AppData%\..\Local Settings\Application Data\Google\Chrome\User Data\Default\Extensions\
Chromium: %AppData%\..\Local Settings\Application Data\Chromium\User Data\Default\Extensions\
Windows Vista/7/8:
Chrome : %LocalAppData%\Google\Chrome\User Data\Default\Extensions\
Chromium: %LocalAppData%\Chromium\User Data\Default\Extensions\
Linux:
Chrome : ~/.config/google-chrome/Default/Extensions/
Chromium: ~/.config/chromium/Default/Extensions/
Mac OS X:
Chrome : ~/Library/Application Support/Google/Chrome/Default/Extensions/
Chromium: ~/Library/Application Support/Chromium/Default/Extensions/
Well, I just did the disable all extensions thing. Chrome Sniffer appears to be the culprit. Specifically in the following code (detector.js):
for (t in cssClasses) {
// snipped for brevity
for(css in cssClasses[t]) {
// snipped for brevity
for(cssFile in document.styleSheets) {
for(cssRule in document.styleSheets[cssFile].cssRules) {
// snipped for brevity
}
}
}
}
That will leak t, css, cssFile, and cssRule into global scope. Looks like I'm not the first to notice this: https://github.com/nqbao/chromesniffer/pull/51
If anybody wants to answer with how I could have avoided the manual process I will accept your answer.