How do Google Meet virtual backgrounds work? - google-chrome

Does anyone know how Google Meet manages to do Virtual Backgrounds with my webcam without requiring a browser extension or anything — it seems very impressive that it can do this in real time via my browser - is this a Google Chrome feature?

Related

PWA behaviour in the background mode

Our project includes a personal account, which works via chrome.
There is a special mechanism in Google Chrome to mitigate the negative effect on the background tabs (https://developers.google.com/web/updates/2017/03/background_tabs).
Nevertheless, for the purposes of our app, we need to disable this function for our app. Disabling via flags is not possible due to several reasons.
As far as we understand, we can solve this problem via PWA (Progressive Web Application). However, we cannot find any references of how PWA behaves in the background mode.
So please provide information - whether there are any restrictions on PWA in the background or the application is always "active"?

CSP reports about Google Fonts (Open Sans), though it’s not used

Recently I’ve enabled a Content Security Policy for my web app. Based on my own testing in Safari and Chrome, everything works fine. I’m using report-uri.com to get error reports.
So far, the only reports I received are a number of blocked requests from Chrome browsers to Google Fonts for the Open Sans font. However, we don’t use Google Fonts or Open Sans in this project at all. I’ve searched through the whole source code (including libraries) for related terms, which confirmed that we don’t do anything with Google Fonts or Open Sans.
The reports don’t include useful information to find where the request to Google Fonts was made from, so I don’t know where to look any more. Because the reports only come in at some times during the day, but our app is used by a number of users throughout the whole day, I suspect it’s just one user. Maybe some kind of browser extension is causing this?
Does anyone have an idea how these requests could be caused? I’d like to make sure it’s not something on our end.
It's possible that a poorly made Browser Extension is attempting to load content in an un-kosher way. I haven't experienced it myself but there's at least one article out there on the phenomenon discussing how to avoid it from the perspective of an extension dev. Unfortunately there would be basically no way to be sure without finding the actual user(s) in question and asking them or testing from their machine.
It's also possible that user-side malware taking over the browser could load external elements on your page much like a browser extension; it's rather unlikely they'd bother loading Open Sans and nothing else, though.
As usual be sure to test your site in a variety of configurations and browsers (a favorite of mine is incognito mode in both Chrome and Firefox to ensure my cache/service worker aren't deceiving me). I would say if you don't find anything it's highly likely that it's in fact a user-side issue.

Open Chrome app within Chrome's main window

I'm fairly new to Chrome app development and was wondering if it's possible to run an app within Chrome's main window, like the TweetDeck app.
Thanks!
No. Chrome Apps' current goal is to provide a native-like app experience outside the Chrome browser. Today, with the exception of certain privileged APIs, putting an app in Chrome would be... well, it would be a website.
If you want an app in one of Chrome's tabs, why not just build a website? What does the open web lack for your project?
Note that we have been thinking about what it would mean for an app to be a component inside a webpage. You could imagine a Facebook Like button or a Google+ +1 button implemented as an app in a webpage in the same way that those buttons today are usually implemented as iframes. There are some interesting security properties that this approach would bring over iframes. But again, this doesn't seem to be what you had in mind. What you had in mind appears to be a regular website.

How does Chrome Dev Tools console Access the resources of the website?

Early on I was doing some debugging and testing using the chrome dev tools(known as inspect element). I found out that on the Resources column of the dev tool, Chrome can always access the resources from the server and display them(links, videos, images....). Just wonder how Chrome does that. Is there any way to write a piece of code doing the same thing(access the server resources of other websites, not modifying them but displaying, stuff like, the link of the video currently playing on the website, which usually does not pop up until the play button is hit)?
DevTools doesn't fetch resources from a site. It fetches them from the browser.
There were similar questions already
How does webkit/chrome's WebInspector Resources Inspection work?
and
Getting Information from Google Chrome's Developer Tools
The Chrome Developer Tools has two parts frontend (html+javascript) and backend (C++) and there is an API which specifies the protocol between these parts. You can see the specification here. You can use it for writing your own app instead of standard DevTools frontend.
Also there is experimental debugging API for chrome extensions.
I think the Webkit WebInspector go over the hole source code and match all resources of the source.
So it match <link href="something.css"> and then it place something.css in the resource panel under stylesheets. And exactly the same thing for the other tags.
It's not hard to make regexes for this.

Difference between Chrome Apps and Extensions

What is the difference between Chrome Apps and Extensions?
What can you do with apps that you can't do with extensions or vice versa?
Quoting from https://developer.chrome.com/webstore/apps_vs_extensions:
We’ve already had the concept of “web apps” in the browser for a few years, as something more rich and interactive than a website, but less cumbersome and monolithic than a desktop application. Examples include games, photo editors, and video players; all of these categories are viable as tightly focused apps running inside the browser. Google Chrome is just formalizing the web app concept in a way that will be familiar to anyone who’s used apps on a smartphone.
Extensions ... extend the functionality of Google Chrome and the websites being viewed in it. For example, they can extend Google Chrome by adding a new button to the address bar, such as an ever-present currency converter. Buttons like this can also apply to the current website being viewed—for example, click the currency converter button to convert all prices on the website you’re viewing. Similarly, you can introduce new items to the context menu, change the behavior of the omnibox (the input field on the address bar), access the user’s browsing history (with consent), and much more. You can alter web pages too—for example, embed a “mail this” button next to every link in every page, or customize the layout of your favorite website.
Compared to apps, extensions cut across websites and web apps; they are usually in effect across all websites (though some are site-specific). Apps don’t combine with other apps in this way; they run standalone, like any regular website.
(emphasis added)
From what I can tell, Chrome apps are just web applications that are registered with Chrome's Web Store (Gmail, e.g.). They're basically just glorified bookmarks. Google seems to have introduced them in order to make their browser more "operating system"-like, in preparation for tablets running Chrome OS. Since Chrome OS won't have any native applications apart from Chrome, they need some way for you to be able to "install" applications... even if those applications are just websites.
Extensions can actually affect the way that the browser behaves (ad blocking, e.g.). They can add buttons to Chrome's toolbars, intercept web requests, change the DOM, etc.
Here is an excellent resource from the Google Chrome team explaining the differences in detail.
It also contains a decision tree flow chart shown below.
Please refer to the following link:
(chrome app vs extension).
It basically says that there are two kinds of apps: hosted and packaged. Hosted apps are glorified bookmarks. But packaged apps provide you with a somewhat best of both worlds features- of both extensions and apps.
Extensions of course extend the core browser functionality providing little or no additional UI apart from what is already provided by chrome.
There are three Chrome distribution channels for developers.
In order of increasing functionality they are:
Chrome extensions — little to no UI
Chrome hosted apps
Chrome packaged apps
More information and fuller discussion is contained in this video.
quoting from http://www.chromeplugins.org/extensions/chrome-web-apps-extensions-spot-the-difference/
(as the explanation is very good)
Major Differences Between Chrome Extension and Chrome Web Apps
One of the major differences between Chrome extensions and web
applications is their location. Majority of the Chrome extensions can
be downloaded from Chrome Extensions Gallery whereas Chrome Web Apps
can be installed from Chrome Web Store.
Another major difference between Chrome extensions and web apps is the
fact that while extensions are used to enhance the functionality of
the Chrome Browser, web apps run within the browser having a different
user interface. Unlike web applications, extensions have little or
sometimes no UI component.
From a technical perspective the major difference between Chrome Apps
and extensions is the presence of “launch” parameter in apps which
indicates Chrome to show when user starts an application installed by
him/her.