I'd like to have users authenticate into a service from within my popup.html browser extension, but the url for the service they use can't be predefined (e.g. different servers are at different URLs) and the authentication must be over HTTPS. Currently they enter the url of their server and I open a new window, monitor the url, and grab the Auth key from the url and close the tab, But I'd prefer to just load the mobile view of the site inside the extension for a more seamless experience.
My understanding is that this may not be possible due to xss and previous ways of using an iframe to do this will no longer be approved by Google/Mozilla.
Any workaround?
You can do this in your Chrome extension Manifest V3:
manifest.json file
{
"manifest_version": 3,
"name": "__MSG_name__",
"version": "1.0",
"description": "__MSG_description__",
"icons": {
"16": "icons/icon16.png",
"24": "icons/icon24.png",
"32": "icons/icon32.png",
"48": "icons/icon48.png",
"96": "icons/icon96.png",
"128": "icons/icon128.png"
},
"default_locale": "en",
"action": {
"default_title": "__MSG_pageatitle__",
"default_icon": {
"19": "icons/icon19.png",
"38": "icons/icon38.png"
}
},
"content_security_policy": {
"extension_pages": "default-src 'none'; style-src 'self'; child-src https://www.youtube.com; script-src 'self'; img-src 'self'; object-src 'none'"
},
"permissions": ["tabs"],
"host_permissions": ["<all_urls>"]
}
popup.html file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<iframe id="login" title="Login box" src="https://www.youtube.com/watch?v=SlGuvC5nnTA" width="100%" height="100%" frameBorder="0" scrolling="no">Your browser does not support iframes.</iframe>
</body>
</html>
Signing in users
If you want to use the Signing in users from a Chrome extension, see this Google Cloud documentation:
https://cloud.google.com/identity-platform/docs/web/chrome-extension
Note: This currently only works in the Chrome extension Manifest V2. And not in the latest Chrome extension Manifest V3 technology.
Related
Google Chrome Extension Manifest v3 does not allow external scripts & inline scripts:
In Manifest V3, all of your extension's logic must be included in the extension. You can no longer load and execute a remotely hosted file.
― source
This is my content_security_policy in manifest.json:
"content_security_policy": {
"extension_pages": "default-src 'self'; script-src 'self' 'wasm-unsafe-eval'; style-src 'self' 'unsafe-inline'; script-src-elem 'self' 'unsafe-inline';",
"sandbox": "sandbox"
}
I've been trying to use the Google Drive Picker API inside of a Google Chrome extension, but somehow fail to do so.
The library requires these two scripts:
<script async defer src="https://apis.google.com/js/api.js" onload="onApiLoad()"></script>
<script async defer src="https://accounts.google.com/gsi/client" onload="gisLoaded()"></script>
Which I have downloaded locally inside the extension:
<script async defer src="./lib/apis.google.com/js/api.js"></script>
<script async defer src="./lib/accounts.google.com/gsi/client.js"></script>
window.addEventListener('load', () => gapiLoaded())
But then these two scripts at their turn install other external scripts which is not allowed in Manifest v3:
Error 1
Error 2
I tried both in a popup and in a tab created with:
chrome.tabs.create({url: chrome.runtime.getURL('setup.html')})
Both give the same error
How can I use the Google Drive Picker API inside of a Google Chrome extension?
Thank you
You need to declare https://apis.google.com/js/api.js and
https://accounts.google.com/ in content_security_policy
"content_security_policy": {
"extension_pages": "script-src 'self'; object-src 'self'",
"sandbox": "sandbox allow-scripts; script-src 'self' 'https://apis.google.com/' 'https://accounts.google.com/' 'https://www.googleapis.com' 'https://ajax.googleapis.com'; object-src 'self'"
},
I am trying to use SharedArrayBuffer by setting up a document that is cross-origin isolated. However since it is in a Google Chrome extension and I need WebAssembly, I need to run this inside a sandboxed page.
I have a sandboxed page which is defined as such in my manifest.json
{
...
"sandbox": {
"pages": ["sandbox.html"]
},
"content_security_policy": {
"sandbox": "sandbox allow-scripts; script-src 'self' 'wasm-eval'; script-src-elem 'self' 'wasm-eval' blob:; worker-src 'self' blob:"
},
"cross_origin_embedder_policy": {
"value": "require-corp"
},
"cross_origin_opener_policy": {
"value": "same-origin"
},
...
}
and I have also enabled cross-origin isolation with COOP and COEP.
The sandbox.html does nothing except use this script:
window.addEventListener('load', () => {
const thing = document.createElement('h1');
thing.innerHTML = self.crossOriginIsolated ? 'GOOD am crossOriginIso' : 'BAD am not crossOriginIso';
document.body.appendChild(thing);
});
Then I have a page outer.html which embeds sandbox.html in an iFrame.
<iframe src="sandbox.html" allow="cross-origin-isolated"></iframe>
When I open outer.html, I get the message "BAD am not crossOriginIso", ie the sandbox.html document inside the iFrame is not cross-origin isolated (and I cannot use SharedArrayBuffer).
Is there a way to enable cross-origin isolation in a Chrome extension with manifest v3 in an iFrame where the inner document is sandboxed (through manifest.json).
Perhaps more specifically, how does one add more featurePolicy.allowedFeatures() to a sandbox iFrame (which is sandboxed in the Chrome extension's manifest.json, not with the sandbox attribute).
I have noted the following things:
Opening sandbox.html directly without the iFrame, the page is cross-origin isolated.
Removing the sandbox attribute in manifest.json results in the document inside the iframe to be cross-origin isolated.
Executing document.featurePolicy.allowedFeatures() inside the iFrame gives a very small list of features (and doesn't include cross-origin-isolated). This list is a lot smaller than executing the same command when opening sandbox.html directly.
In chrome 103, manifest v3, that works well
"content_security_policy": {
"extension_pages": "default-src 'self' 'wasm-unsafe-eval';style-src 'unsafe-inline' 'self' "
},
"cross_origin_embedder_policy": {
"value": "require-corp"
},
"cross_origin_opener_policy": {
"value": "same-origin"
},
don't use sandbox to run ffmpeg.wasm, SharedArrayBuffer is not available in sandbox
First of all, I make all my tests upon firefox 0S 2.0 simulator
I have a website that is a game webportal.
I made a privilleged packaged app with all requierements. As launch_path I took some "index.html" file and inside this file I wrote all the basic infos and particulary this one in the header:
<meta http-equiv="refresh" content="5;url=http://url10.infinitgame.com?webview=1">
As far as this, it works OK. Meaning that I can launch my app inside firefox OS desktop and get inside my webportal
So next I packaged the fxpay library as explained in some doc and added it in my game webportal server. I've made everything like the tutorial and it perfectly works with the fake products.
After this I made a "real product" (creating a Bango account, chosing countries, and finally creating real products). And then I turned OFF the fake products from the javascript code. Now I cannot find my product and there is the error message I got:
-"using default adapter"
-"using Firefox Marketplace In-App adapter"
-"using custom adapter"
-"receipts fetched from mozApps:" 0
-"receipts fetched from localStorage:" 0
-"Number of receipts installed: 0"
-"about to fetch real products for app" "http%3A%2F%2Furl10.infinitgame.com"
-"opening" "GET""to" "https://marketplace.firefox.com/api/v1/payments/http%3A%2F%2Furl10.infinitgame.com/in-app/?active=1"
-"BAD_API_RESPONSE" "status:" 404 "for URL:" "https://marketplace.firefox.com/api/v1/payments/http%3A%2F%2Furl10.infinitgame.com/in-app/?active=1"
-"BAD_API_RESPONSE" "response:" "{"detail":"Not found"}"
-"Error getting products:" "BAD_API_RESPONSE".
I also read online that an app must be published before production payments can be used. But I find a lot of contradictory informations about firefoxOS since the community is quite small.
Here is my manifest.webapp
{
"version": "1.0.0",
"name": "T-Games",
"description": "T-games service de malade",
"launch_path": "/index.html",
"type": "privileged",
"icons": {
"16": "/img/icon-16.png",
"48": "/img/icon-48.png",
"128": "/img/icon-128.png"
},
"developer": {
"name": "Serial Screener",
"url": "http://url0.infinitgame.com"
},
"permissions": {
"systemXHR": {
"description": "Required to access payment API"
}
},
"chrome": { "navigation": true },
"origin": "app://url10.infinitgame.com",
"csp" : "default-src *; script-src 'self'; object-src 'none'; style-src 'self' 'unsafe-inline'"
}
and here is my index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>T-Games</title>
<meta name="description" content="TGames, service de jeux">
<meta name="viewport" content="width=device-width">
<meta http-equiv="refresh" content="5;url=http://url10.infinitgame.com?webview=1">
</head>
<body>
<p>Loading...</p>
<script type="text/javascript" src="fxpay.min.js"></script>
</body>
</html>
Thanks for time & support.
Tomy
It is true that your app must be fully approved and public before the API will return your real products. On the Developer Hub you can click Status from your app's sidebar to see if it's public or not. A non-public app could cause the BAD_API_RESPONSE (404) you see.
Another problem is that according to your manifest your app is packaged and has an origin of app://url10.infinitgame.com. However, the console logs suggest that you are running the app from the web at origin http://url10.infinitgame.com. This will also cause a BAD_API_RESPONSE (404) because your products are registered under the app: origin, not the http: origin.
If I understand correctly, you are redirecting to the http: URL from within the packaged app. If that's the case, you would need to run all of your fxpay code from within the packaged app and do something like window.postMessage to pass the results to the http: URL. You'd also have to switch to using an iframe rather than a redirect so that you can run JavaScript from the top level packaged app window.
It's not required that you use a packaged app for in-app payments with the fxpay library. As of more recent versions, it's fine to use a hosted app. Maybe that would be easier.
Previously I have loaded facebook comment plugin in side my chrmoe extension with manifest version 01. Now I updated version to manifest version 02 and then I have to do couple of changers in my extension code base.
According to the new version we can not load the external js file without specifying external resources associate with "content_security_policy". Anyway this is my new manifest.json file,
{
"name": "",
"version": "1.13",
"manifest_version": 2,
"description": "",
"background": "background.html",
"icons": { "128": "fb_bug.gif" },
"content_security_policy": "script-src 'self' https://connect.facebook.net/; object-src 'self'",
"browser_action": {
"default_icon": "icon.png",
"default_popup": "plugin_content.html"
},
"permissions": [
"tabs",
"background",
"cookies"
],"web_accessible_resources": [
"css/extension.css",
"js/config.js",
"js/jquery-1.6.1.min.js"
"js/extension.js",
"images/loaderImg.gif",
"https://connect.facebook.net/en_US/all.js"
]
}
Now when I load the extension it raises a following error and facebook social plugin is not working.
"error: Code generation from strings disallowed for this context all.js:41"
Is there anyone who know solution for this matter.
sorry it took so long to reply to this.
I'm an Engineer at Facebook and tried looking at alternatives to remove the one Function() we use in the SDK, but unfortunately there is no way to reliably remove it without breaking functionality. Other seem to have the same problem and I didn't find anyone that was able to solve this issue in an efficient way.
However, according to this comment on the Chromium issue tracker (http://code.google.com/p/chromium/issues/detail?id=107538#c69), you should be able to solve this by adding a content_security_policy attribute to your manifest that whitelists 'unsafe-eval' for script-src:
{
...
"content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'"
...
}
I have a chrome extension that has a reference to the jquery file.
this is my popup html (only the head tag):
<head>
<title>My Extention</title>
<script type="text/javascript" src="http://www.MySite.com/Resources/JS/JQuery/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="MyExtensionScript.js"></script>
</head>
so in "MyExtensionScript.js" i thought i could use jquery but apparently the $ function is not defined.
This is my manifest.json file:
{
"name": "My Test Extension",
"version": "1.0",
"manifest_version": 2,
"description": "Test version of My Extension",
"browser_action": {
"default_icon": "test.ico",
"default_popup": "Test.html"
},
"permissions": [
"cookies",
"tabs",
"<all_urls>"
]
}
in version 1 of the manifest it worked, but now it doesn't. I tried to use the "web_accessible_resources" and add to them "http://www.MySite.com/Resources/JS/JQuery/jquery-1.7.2.min.js" but that didn't work also. any ideas?
also, i have a script injected to the current page and returning me a message (in my case some html source of the current page), will this behavior be affected by the transition to manifest version 2?
Thanks all :)
EDIT: I have a web application that enables cross domain scripting (using JSONP). In my extension i had a script calling a web service in my site with $.getJSON. now it doesn't work. i'm pretty sure that it has to do with the new manifest version but how can i enable again the cross domain scripting?
You need to use a jQuery file stored locally in your extension, rather than referenced from your site.
This is due to Chrome's strict Content Security Policy that only allows local scripts to be executed, with no inline code.
Web Accessible Resources are files inside your extension that may be accessed from the web, rather that resources your extension can access that are on the web. For example, if you wanted to change the background image of a page using an image stored in the extension, you have to add that image to the list in web_accessible_resouces in your manifest.
The change of manifest version should not affect your content scripts, unless they do something that is no longer allowed. You can see what else has changed from the Chrome manifestVersion docs.
I just include jquery in my content scripts. just make sure to load it before your script.
{
"manifest_version": 2,
"default_title": "Babble",
"version": "1.2",
"description": "Chat in your language with friends in their language",
"default_locale": "en",
"default_icons": {
"16": "img/icon16.png",
"48": "img/icon48.png",
"128": "img/icon128.png"
},
"content_scripts":[
{
"matches": ["http://mail.google.com/*", "https://mail.google.com/*"],
"css" : ["css/style.css"],
"js" : ["js/jquery.js" , "js/translate.js" , "js/jquery.cookie.js"]
}
]
}