时间戳

首页 > 解决方案 > 在 chrome 扩展中加载 AWS sdk

amazon-web-services - 在 chrome 扩展中加载 AWS sdk

问题描述

在我的 chrome 扩展中，我试图在弹出类型 iframe HTML 中加载 AWS Cognito js SDK，其中 HTML 由 react 捆绑，现在问题是我无法在我的 useEffect 中访问 AWS 实例或（ window.AWS ）执行用户认证

PS：我也尝试像下面那样获取窗口对象，但运气不好。

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
          })
        })
      },
    )

从 background_script.js 我得到一个点击扩展图标的触发器

function gotMessage(payload) {
  if (payload.message === 'SIGNAL_TAB') {
    iframe.src = chrome.extension.getURL('./index.html')
    document.body.appendChild(iframe)

    toggle()
  }
}

在 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>

在我的 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 />

}

这是我的 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')
);

清单.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'"
}

背景.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)
}

标签： amazon-web-servicesgoogle-chrome-extensionamazon-cognito

解决方案

推荐阅读