web 應用程序和 chrome 擴展程序之間的消息傳遞

Question

我正在構建 chrome 擴展，它將與 web 應用程序交互並向其發送數據。 我有 2 個功能 - 連接到 web 應用程序並生成 hash 消息（類似 Metamask 的功能）。 But I faced with issue that to interact with extension http web app needs to have permissions (externally_connectable) and write permissions for every http site is a bad idea I guess (as I know it works good for https web apps). 由於禁止像 <all_urls> 這樣的 externally_connectable 模式我尋求幫助，也許我為此功能選擇了錯誤的解決方案。 請幫忙。

manifest.json

{
  "manifest_version": 3,
  "name": "extension",
  "description": "extension",
  "version": "1.0.0",
  "icons": {
    "16": "16x16.png",
    "48": "48x48.png",
    "128": "128x128.png"
  },
  "host_permissions": ["https://google.com/", "http://localhost:3000/"],
  "permissions": ["cookies", "storage", "tabs"],
  "action": {
    "default_popup": "popup.html",
    "default_title": "Open popup",
    "default_icon": "16x16.png"
  },
  "background": {
    "service_worker": "background.js"
  },
  "externally_connectable": {
    "matches": [
      "http://my-http-test-web-app/",
      "http://localhost:3000/",
      "http://localhost:3001/"
    ]
  }

網絡應用腳本

const message = { id: ExtensionID, method: 'requestAccounts' }

chrome?.runtime?.sendMessage(ExtensionID, JSON.stringify(message),  (response) => console.log(response)}

背景.js

chrome.runtime.onMessageExternal.addListener(async (request, sender, sendResponse) => {
  const parsedRequest: IExternalRequest = JSON.parse(request)
  
  const { connectedSites, activeAccount, userBalances } = await chrome.storage.local.get()

  if (connectedSites && connectedSites.includes(sender.origin)) {
    sendResponse({
      id: EXTENSION_ID,
      success: true,
      method: 'responseRequestAccounts',
      data: {
        address: activeAccount.address,
        guildName: activeAccount.username,
        balance: userBalances,
      },
    })
    return
  }

  await chrome.storage.local.set(prepareRequestData(method, sender.tab, sender.origin))
  await openNewNotificationsPage()

  chrome.runtime.onMessage.addListener((request) => {
    sendResponse(JSON.parse(request))
  })

}

const openNewNotificationsPage = async () => {
  const { top, left, width } = await chrome.windows.getCurrent()
  const topPosition = Math.max(top, 0)
  const leftPosition = Math.max(left + (width - 340), 0)
  const options = {
    url: 'notification.html',
    type: 'popup',
    width: 340,
    height: 516,
    left: leftPosition,
    top: topPosition,
  }
  openWindow(options)
}


function openWindow(options) {
  chrome.windows.create(options)
}

在新打開的 window 上，有一個擴展腳本可以獲取帳戶數據並發送它

chrome.runtime.sendMessage(
        EXTENSION_ID,
        JSON.stringify(buildConnectWalletResponseData(response, true)),
        handleClose
      

Answer 1

您究竟是如何讓 chrome.runtime 在 web 應用程序中工作的？ 您要進口什么 package？ 我也遇到過這個問題，我找不到可導入的 package 用於非 Chrome 擴展。 我相信您可以執行跨擴展消息傳遞，但不能執行 webapp 到擴展消息傳遞。