Upload a local image file via puppeteer connect on Chrome extension

Task: I'm building a chrome extension with a popup (panel_chatwindow.js) window (standalone window). I want to take a local image file (e.g., /1.png) and upload it to a website that has a <input type='file'/> element (e.g., any services that require to upload a user photo).

Note

Other than upload file, the code can execute other web macro just fine.

My current code:

let browserWSEndpoint = "";
const puppeteer = require("puppeteer");

async function initiatePuppeteer() {
  await fetch("http://localhost:9222/json/version")
    .then((response) => response.json())
    .then(function (data) {
      browserWSEndpoint = data.webSocketDebuggerUrl;
    })
    .catch((error) => console.log(error));
}

initiatePuppeteer();

$("#puppeteer-button").on("action", doPuppeteerThings);

// Assign button to puppeteer function
async function doPuppeteerThings(event, actionArray) {
  const browser = await puppeteer.connect({
    browserWSEndpoint: browserWSEndpoint,
  });
  const page = await browser.newPage();
  await page.setViewport({
    width: 1600,
    height: 1000,
  });

  await page.goto("website", {
    waitUntil: "networkidle2",
  });

  await page.waitForSelector("input[type=file]");
  await page.waitFor(2000);
  const input = await page.$('input[type="file"]');
  await input.uploadFile("/1.PNG");

})

Error message on popup window console (panel_chatwindow.js)

panel_chatwindow.js:160 is the await input.uploadFile("/1.PNG"); line

Using puppeteer.launch works perfectly fine with the code, i.e., can upload a local file to a website once launching the node server.

I don't have to use puppeteer to upload image files, any other way on chrome extension would be just fine.

I'm aware of this post: https://github.com/puppeteer/puppeteer/issues/4405 but i am not able to address my issue with any answers in the thread.