What is the domain name for a Google Chrome extension? - javascript

I am currently building a Google Chrome extension displaying a Twitch player within the extension window. To do so I need to have the domain / website on which the extension is hosted. In this case I guess it would be Google Chrome but I don't quite understand hwo to get the exact domain name.
Thanks in advance!

To do so I need to have the domain / website on which the extension is hosted.
They aren't hosted on any domain at all, they're loaded directly by Chrome from its local copy of the extension. The scheme used in the URL is chrome-extension://, not http:// or https://. For instance:
chrome-extension://longstringofcharactershere/filename.html
If you need to provide Twitch with a domain (for instance, to get passlisted in their CORS policy or some such), there's simply no domain to give them. (I haven't tried, but Chrome extensions are really locked down by default, I doubt you could even embed an iframe loaded from a domain you control. Extensions are a privacy and security nightmare, so Google locks them down pretty thoroughly.)

Related

Remote loading iframe in chrome extension can't access chrome properties

I am building a chrome extension which uses a back end (php) app with gmail API and because
i do not want to separate Google apps / i need to have the chrome extension consume a
backed API as i cannot whitelist a chrome extension for gmail API / use the existing web app.
To solve this i have put the extension app on a subdomain whitelisted for gmail API and i am loading this domain via an iframe into the chrome extension.
The issue is that the subdomain cannot access the chrome properties inside the iframe:
chrome.tabs.query or chrome.runtime.onMessage
to enable talk to the content script.
i get the error
chrome is not defined
What is the best solution for this?

Safari LocalStorage not shared between IFrames hosted on same domain

We are working on two web applications that are hosted on two different subdomains of the same domain:
https://subDomainA.domain.com
https://subDomainB.domain.com
Both web applications are showing an iFrame hosted on a third subdomain:
https://subDomainC.domain.com
We are using postMessage to communicate between top window and IFrame window.
Within the iFrame shown on subDomainA, we are setting an AuthToken:
localStorage.setItem("AuthToken", "JWTAuthToken")
When we navigate to subDomainB and try to run the following code within the iFrame:
localStorage.getItem("AuthToken")
The result is null.
This only happens in the Safari browser.
All other browsers share the LocalStorage within these IFrames
We are on the same domain, i.e. the same "eTLD+1" (domain.com)
Doing the exact same thing with cookies works!. Just not with LocalStorage
Opening subDomainC directly in the browser and setting the data persists them for the IFrames as well.
Is this a indended behaviour of Safari or do we have an issue with our implementation?
This is the expected behavior in Safari. Safari's Intelligent Tracking Prevention (ITP) partitions browser storage based on the top frame. Here's how WebKit's documentation explains it:
Partitioning is a technology to allow third-parties to use storage and stateful web features, but have those isolated per first-party website. Let’s say adtech.example is a third-party under both news.example and blog.example and that adtech.example uses LocalStorage. With partitioned LocalStorage, adtech.example will get unique storage instances under news.example and blog.example which removes the possibility to do cross-site tracking through LocalStorage.
References:
https://webkit.org/tracking-prevention/#partitioned-third-party-localstorage
Iframe localStorage on Safari and Safari mobile
In slightly plainer English, https://github.com/zendesk/cross-storage says :
Notes on Safari 7+ (OSX, iOS)
All cross-domain local storage access is disabled by default with Safari 7+. This is a result of the "Block cookies and other website data" privacy setting being set to "From third parties and advertisers". Any cross-storage client code will not crash, however, it will only have access to a sandboxed, isolated local storage instance. As such, none of the data previously set by other origins will be accessible. If an option, one could fall back to using root cookies for those user agents, or requesting the data from a server-side store.
This may be of use:
https://webkit.org/blog/8124/introducing-storage-access-api/
According to the same-origin policy, different subdomains are considered cross-origin.
You should use postMessage for cross-origin communication.
It seems that the recent updates to the Safari browser (Prevent cross-site tracking) blocks any cookies from being generated when the Matomo domain doesn't match the website it's being loaded from.
This breaks the use of iFrames for Matomo that require cookies to be set (For example the logme feature)
There doesn't seem to be any way to fix this with headers (Eg using CSP or CORS configurations).
current workarounds exist that I've found:
Disable the "Prevent cross-site tracking" setting in the Privacy settings
Redirect the visitor to the page outside of an iFrame to set the cookie - after this the iFrame can load as long as the CORS configuration is correct and the browser isn't completely blocking the iFrame from loading.
I'm not sure how many users are using iFrames that would require cookies to be set, but they would be impacted if any of their users use Safari.

Google Oauth2 in Chrome Extension in background.js

I am building a Chrome Extension for my personal use (i.e. it will not be packaged and distributed) to dump data from a website into Google Sheets. I'd like to click on the Extension and have it process the data to my sheet. I believe this means I need to do the Oauth flow in background.js.
I did the initial authorization flow by customizing this Google Sheets demo, can't figure out how to make it work in my Extension.
I've tried a number of approaches, including using the chrome.identity API, and gapi.client.init(), and following the Chrome App sample. No dice.
Some of my questions...thanks in advance:
To what extent do Chrome Extensions mirror Chrome Apps? I understand that Chrome Apps are being deprecated, so wondering if the docs are inconsistent.
Is it possible to do this without packaging and uploading my app? The Oauth credentials page in Console asks for a Web Store URL
Is it acceptable to store a copy of Google's api.js in my extension, or must I load it from https://apis.google.com/js/client.js? If so,
For the Chrome App Sample, Where do I get the key included in manifest.json? I've seen instructions like "Copy key in the installed manifest.json to your source manifest" but I don't understand.
Is anyone aware of a complete, self-contained Chrome Extension sample?
To what extent do Chrome Extensions mirror Chrome Apps? I understand that Chrome Apps are being deprecated, so wondering if the docs are inconsistent.
Extensions and Apps are similar in many ways, however for your situation the main hurdle to overcome is the two handle Google Authentication differently. Extensions have permission limitations, where javascript can't run in certain places. Therefore, Chrome Extensions use chrome.identity in background.js to establish a secure connection and token. The general process to implement it is as follows:
Make a Chrome Extension, zip it, upload to your Google Dev account & get extensionID#
In Google API Console, register an OAuth ClientID# using the extensionID#
Update your Chrome Extension manifest to include an 'oauth2' section with the OAuth ClientID# as well as the scopes you allow, and include 'identity' under "permissions:"
Enable the API of your choosing in the Google API Console and generate a key. Include this key in your background.js file so you can use the API.
Is it possible to do this without packaging and uploading my app? The Oauth credentials page in Console asks for a Web Store URL
No, mainly because you need both the chrome extension and the API to be aware of each other and be 'linked' in a sense so they can be secure and work properly. You can still have a private app however, as you only need to package (.zip it) and upload it into your Developer Dashboard, and you can leave it out of the public Chrome Store by simply not publishing. It can forever linger in 'Draft' stage for your personal use.
Is it acceptable to store a copy of Google's api.js in my extension, or must I load it from https://apis.google.com/js/client.js? If so,
For the Chrome App Sample, Where do I get the key included in manifest.json? I've seen instructions like "Copy key in the installed manifest.json to your source manifest" but I don't understand.
You don't need to store a copy within your extension, you can add the following to your manifest.json:
"content_security_policy": "script-src 'self' https://apis.google.com/; object-src 'self'"
and then this at the bottom of your popup.html:
<script src="https://apis.google.com/js/client.js?onload=onGAPILoad"></script>
It's a rather confusing process without a guide; here is the one that finally made sense of it all for me. This official example from Google is a good one as well.
Is anyone aware of a complete, self-contained Chrome Extension sample?
'self-contained' is a bit tricky here, as the manifest needs to reference keys specific to the OAuth ClientID and API that YOU are utilizing, however this (download link) along with the two links above should be enough to get you to a working extension.

Google Chrome Frame and Amazon Cloud Front CDN Timeout?

Our company is currently experiencing an issue with Google Chrome Frame enabled browsers and a third party site that utilizes an Amazon CloudFront CDN. For all CSS and JS files on the CDN, chrome sits on a request for 2 minutes exactly, and then returns with a 304 and loads the page.
We need chrome frame active, and it doesn't look like we can disable it for specific sites if the site is sending down the chrome frame headers.
Has anyone experienced this before? Is there any way to force the timeout to occur quicker. Why would that be happening in the first place?
Duplicate dead question here.

Change secure http page content in a Firefox extension using Greasemonkey compiler

I'm building a Firefox extension that alters the page content of a few select websites and I'm using the Greasemonkey compiler to do this (http://diveintogreasemonkey.org/advanced/compiler.html).
The trouble I'm having though is with websites using secure http. Even if I list the https version of the site in my #includes, Greasemonkey still doesn't pick it up and change the scripted content.
Any ideas on how I can still have the same effect on https sites? Thanks.

Categories