0

I'm building chrome extension that is going to interact with web applications and send data to it. I have 2 features - connect to web app and generate hash message (Metamask like functionality). 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). As patterns for externally_connectable like <all_urls> is prohibited I ask for help, maybe I chose wrong solution for this features. Help please.

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/"
    ]
  }

webapp script

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

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

background.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)
}

On new opened window there is a extension script that gets account data and sends it

chrome.runtime.sendMessage(
        EXTENSION_ID,
        JSON.stringify(buildConnectWalletResponseData(response, true)),
        handleClose
      
  • Use a content script and CustomEvent messaging: [example](https://stackoverflow.com/a/10527809). – wOxxOm May 09 '22 at 10:48

0 Answers0