I have been trying to open google picker from a chrome extension. I want to select a file from google drive and get the info about the file. I use manifest v3 for my extension. I am tried to implement this using an Iframe, but sandboxed iframe throws Blocked script execution in because the document's frame is sandboxed and the 'allow-scripts' permission is not set. My iframe already has 'allow-same-origin' and adding 'allow-script' it exits the sandbox and throws Uncaught (in promise) SyntaxError: Failed to construct 'WebSocket': The URL 'ws://localhost:undefined/' is invalid.
Script it is blocking is 'https://apis.google.com/js/api.js'
this is how I am calling iframe in my extension
<iframe sandbox="allow-same-origin" className="picker-html" src={chrome.runtime.getURL("picker.html")}></iframe>
this is contents in my picker.html file
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Sandboxed Content</title>
<script src="https://apis.google.com/js/api.js"></script>
</head>
<body>
<h1>Sandboxed Content</h1>
<p>I am the sandboxed iframe.</p>
<div id="message"></div>
</body>
</html>
"manifest_version": 3,
"name": "example",
"version": "1.0.0",
"action": { "default_title": "click me" },
"permissions": [
"activeTab",
"tabs",
"storage",
"identity"
],
"content_scripts": [
{
"js": ["content.tsx"],
"matches": ["https://*.google.com/*"]
}
],
"background": {
"service_worker": "service-worker.ts",
"type": "module"
}
}
I am expecting to click a button and open google picker and get the file info back to extension.