javascript - chrome.tabs.captureVisibleTab doubles the image size

Question

I have the following code in background.ts:

chrome.browserAction.onClicked.addListener(function () {
  let targetId: number | undefined | null = null
  chrome.tabs.captureVisibleTab(function (imageUrl) {
    chrome.tabs.onUpdated.addListener(function listener(tabId, changedProps) {
      if (tabId !== targetId || changedProps.status != 'complete') return

      chrome.tabs.onUpdated.removeListener(listener)

      chrome.runtime.sendMessage(imageUrl)
    })
  })

  chrome.tabs.create({ url: 'popup.html' }, function (tab) {
    targetId = tab.id
  })
})

And I listen to the message like:

import * as React from 'react'
import { observer } from 'mobx-react'
import useImage from 'use-image'

export const SiteImage = observer(() => {
    const [imageUrl, setImageUrl] = React.useState('')
    const [img] = useImage(imageUrl)
    
    React.useEffect(() => {
        chrome.runtime.onMessage.addListener((url) => {
            setImageUrl(url)
            const newImg = new Image()
            newImg.src = url
            newImg.onload = () => {
                console.log(newImg.naturalWidth, newImg.naturalHeight)
            }
        })
    }, [])

    return null
})

When I log it to the console, I get 2880 1592, however my screen resolution is half of it 1440 796.

How do I get an image according to my screen resolution rather than double of it?

Answer 1

等待大神答复