Develop Reference

Google Auth OAuth 2.0 SvelteKit wierd behavior

I am using Google Auth OAuth 2.0 One Tap Sign and Sveltekit,
and I got some really weird behavior,
I followed this doc https://developers.google.com/identity/gsi/web/guides/overview with javascript
onMount(async () => {
const handleCredentialResponse = async (response) => {
console.log('Encoded JWT ID token: ' + response.credential);
};
google.accounts.id.initialize({
client_id: clientId,
callback: handleCredentialResponse,
});
google.accounts.id.renderButton(
document.getElementById('buttonDiv'),
{ theme: 'outline', size: 'large' } // customization attributes
);
google.accounts.id.prompt();
});
the code from the doc.
Sometimes it works everything goes well,
Sometimes I got
Uncaught (in promise) ReferenceError: google is not defined
And some mobile / mobile browsers I get
[GSI_LOGGER]: The given origin is not allowed for the given client ID.
but works on laptop
Hope someone can understand and help.
Do we have any way to check logs for investigation?

I got your code to successfully run without modification: https://google-signin-kit.vercel.app/ (This app is in "dev" mode so signin may only succeed with my Google account. If you clone my repo and set your Google client id, signin will work for you.)
I would check how my code is different from your code outside onMount(). For example, how did you include the Google javascript? I describe one major change below.
You also need to check your Google app settings. [GSI_LOGGER]: The given origin is not allowed... is fixed by adding the HTTPS app domain to your Google app "Authorized JavaScript origins." Non-HTTPS domains are not allowed. For example, these domains would not work:
https://google-signin-kit-leftium.vercel.app/ (Not added as Authorized JavaScript origin)
http://google-signin-kit.vercel.app/ (Not HTTPS, if Vercel did not automatically redirect to HTTPS)
Of course, raw IP addresses will not work, either.
localhost is a special exception, but not easy (impossible?) to access from mobile.
ReferenceError: google is not defined (sometimes) happens because onMount() runs before the Google script is loaded.
To get a consistent reproduction, USB debug/inspect Android Chrome and set "disable caching" and throttling to "Slow 3G." (I could not reproduce on desktop Chrome).
Fixed by removing defer async when including Google's script: <script src="https://accounts.google.com/gsi/client"></script>
It should also be possible to call a function after the script is loaded, but I got inconsistent results in SvelteKit. For some reason Kit doesn't always call the load function. Possibly a bug?
Ideally, the Google script should be imported, but I couldn't find a version of the Google script that was built for importing. You may be able to construct a library that you can import? Importing would compile the Google script code into your app, tree-shaking the unused portions. Thus saving a network request and bandwidth.
Another workaround is to have your onMount function check for the google variable. If google is still undefined, call your function again after a certain timeout.

restricting context path is not working for Google Maps API in JavaScript

My original URL for an application to call Google Maps API is something like "https://example.com/abc/def" and I am trying to restrict the context path by replacing it with https://example.com/*. I have looked into so many references but nothing worked. I am facing the below error whenever I try replacing with '*' in context path.
Google Maps JavaScript API error: UnauthorizedURLForClientIdMapError
If I give whole path, then the API is loading with out any errors.

Determine if active tab contains an editable Google Doc

Suppose my extension has obtained the URL for the current active tab using the method suggested in How can I get the current tab URL for chrome extension?, e.g.
chrome.tabs.query({
active: true,
lastFocusedWindow: true
}, function (tabs) {
// use first tab to obtain url
var tab = tabs[0];
var url = tab.url
});
How can I determine if the URL refers to a Google Doc to which I have editing rights? The distinction between ownership and being an invited collaborator is not important for this application. I'm interested only in Docs as opposed to Spreadsheets or Forms.
For context on what I'm trying to develop, see: How to manually generate notifications to a Google Doc collaborator?

Alternate answer, based on the Google Drive API rather than the Google Docs UI.
Before doing any of this, make sure to declare permissions in the manifest (to only match URLs that look like docs.google.com/document/*).
Here is a broad overview of the steps you could follow:
GET a
file,
which will return some metadata. You can use the URL you have to extract the relevant ID which is used in the GET request.
Use this metadata file resource to retrieve a permissions resource
In the permissions resource, look at the role attribute: it will be either owner, reader, or writer. You will not have editing rights if you are a reader, but should have editing rights otherwise.

Here is a side by side view of a google doc, where I created a doc, generated a sharing link, and opened it in a browser where I was not signed in to google. I would suggest using a content script to insert a "find" function which would return either true or false if it can locate the "view only" button in the DOM ("view only" meaning you do not have edit permissions). You could make the content script match URLs that look like docs.google.com/document/* only.
Caution: google changes UI pretty frequently so this may not be future-proof. Try inspecting the source of google docs in both situations to look for more clues.
Side by side view:
Source code in the chrome devtools:

Google Maps API warning: SensorNotRequired

On the site https://gearbottle.com/ I am having an issue where the map will load my geolocation (enable geolocation to see) and then load all results (the entire world) - I need this to stay at the geolocation and not jump to the entire map.
After checking out the console I see "Google Maps API warning: SensorNotRequired //developers.google.com/maps/documentation/javascript/error-messages#sensor-not-required" and then a dropdown of Object etc....After digging a bit i came across the following scripts that still have the sensors in place:
if(ddp('google_places_api')) { if(ddp('google_places_api') != '') { wp_register_script('google_maps_api', 'https://maps.googleapis.com/maps/api/js?key='.ddp('google_places_api').'&sensor=false&libraries=places'); } }
else { wp_register_script('google_maps_api', 'https://maps.googleapis.com/maps/api/js?'); }
}
$google_places_url = 'https://maps.googleapis.com/maps/api/place/autocomplete/xml?key='.ddp('google_places_api').'&sensor=false&input='.$fields[$field->post_name].'&types=(regions)';
$reference_url = 'https://maps.googleapis.com/maps/api/place/details/xml?key='.ddp('google_places_api').'&sensor=false&reference='.$place_reference;
....but I am clueless on what to replace the "Sensor" part in each script to or if this even matters - I really just need the map to stop jumping and that's really it.
This is an older version of a theme that has been reconstructed (purchased by choice)- there is no longer support from original devs, so I am attempting to fix things on my own.

As per the documentation on Google Map Error Codes for SensorNotRequired
The sensor parameter is no longer required for the Google Maps
JavaScript API. It won't prevent the Google Maps JavaScript API from
working correctly, but we recommend that you remove the sensor
parameter from the script element.
It is a warning and you can safely remove &sensor=false from the urls

Google is undefined error - Windows 8 metro application

function initialize() {
var mapOptions = {
center: new google.maps.LatLng(41.001188, 21.330084),
zoom: 8
};
I'm building Windows 8 metro application using Javascript and I only have one HTML file where I call Initialize function to show Google Map, but the application fails because of this error: "Google is undefined"
Does anyone know how can I fix this?

The issue you're likely having is that you cannot load remote script into the "Local Context" in which an app normally runs. This is spelled out on Features and restrictions by context.
You can load remote script into the "web context" which means you use an x-ms-webview element as the element that hosts the map, and point the Webview to an HTML file that has the remote script reference. I use a similar approach (for Bing Maps) in the sample I build in Chapter 2 (page 72) of my free ebook, Programming Windows Store Apps with HTML, CSS, and JavaScript, Second Edition. In that chapter I start by using an iframe, and then change to x-ms-webview in Chapter 4 (starting on page 191). I also show how to communicate with the iframe/Webview so the app can drive it.
The upshot is that if you try to load remote script into the local context, it's ignored and thus the google namespace will be undefined.
As an alternate approach, you could try downloading the remote script and include it as part of your package, referring to it like you would other JS files in your project. However, there are other restrictions in the local context that might cause this script to fail itself, especially if it's trying to load other remote script. Thus the iframe/Webview approach is more reliable.
By the way, the content URI stuff in the manifest has no bearing on this matter; that applies specifically to the privileges you grant to remote script once it's loaded. See "App Content URIs" in Chapter 4 of the aforementioned book (page 197)

Could it be that you are missing a reference to the Google API in your HTML file?
Something like this inside the Head section:
<script src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=visualization"></script>

In case if anyone is facing this issue still then consider to mention this line it first:
<script src='//maps.googleapis.com/maps/api/js?sensor=false'></script>
And then mention any js resource or anything which is based on the Google Maps Javascript API version 3.