In my chrome extension, I was trying to load the AWS Cognito js SDK in the popup type iframe HTML where the HTML is bundled by react, now the problem is I am not able to access AWS instance or ( window.AWS ) in my useEffect to perform user authentication
PS: I tried to get the window object too like below but it was hard luck.
chrome.tabs.query(
{active: true, windowType: 'normal', currentWindow: true},
function (d) {
chrome.tabs.get(d[0].id, function (tab) {
chrome.windows.get(tab.windowId, function (win) {
console.log('App -> win', win)
debugger // THIS IS THE WINDOW OBJECT
})
})
},
)
from background_script.js I get a trigger for on click extension icon
function gotMessage(payload) {
if (payload.message === 'SIGNAL_TAB') {
iframe.src = chrome.extension.getURL('./index.html')
document.body.appendChild(iframe)
toggle()
}
}
In Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://sdk.amazonaws.com/js/aws-sdk-2.831.0.min.js"></script>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
In my App.js
function App() {
useEffect(() => {
console.log('App -> window.AWS', window)
chrome.tabs.query(
{active: true, windowType: 'normal', currentWindow: true},
function (d) {
console.log("App -> d", d)
chrome.tabs.get(d[0].id, function (tab) {
chrome.windows.get(tab.windowId, function (win) {
console.log('App -> win', win)
})
})
},
)
return <SomeJSX />
}
Here is my index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
Manifest.json
{
"manifest_version": 2,
"name": "Elixir AI",
"description": "Elixir AI description",
"version": "1.0",
"permissions": ["tabs", "bookmarks", "unlimitedStorage", "storage", "http://*/", "https://*/"],
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["./content.js"]
}
],
"web_accessible_resources": ["index.html"],
"background": {
"scripts": ["./background.js"]
},
"browser_action": {
"default_icon": "elixir.png"
},
"content_security_policy": "script-src 'self' 'sha256-Vkb/pSN52JgiWSIfh1wav6XGzM3ULeZ5d9VaHeA5JQ8='; object-src 'self'"
}
Background.js
chrome.browserAction.onClicked.addListener(buttonClicked)
chrome.tabs.query({active: true, lastFocusedWindow: true}, (tabs) => {
let url = tabs[0].url
new Promise((res, rej) => {
window.linkedin_url = url
localStorage.setItem('linkedin_url', url)
res(url)
})
})
function buttonClicked(tab) {
var payload = {
id: tab.id,
tabs: chrome.tabs,
eventTab: tab,
message: "SIGNAL_TAB",
linkedin_url: tab.url
}
chrome.tabs.sendMessage(tab.id, payload)
}
question from:
https://stackoverflow.com/questions/65897727/loading-aws-sdk-in-chrome-extension 
