Quantcast
Channel: Active questions tagged javascript - Stack Overflow
Viewing all articles
Browse latest Browse all 140788

How do you inject a function exported from a local file into puppeteer using typescript?

$
0
0

I have two files, both in typescript: puppeteer.ts and async-some.ts.

async-some.ts imports another file that contains an async version of the some function.

// async-some.ts
import { someP } from "../helpers/arrays"

window.someP = someP

export default someP

The source file of the async some:

// helpers/arrays.ts
export const someP = <T>(arrayP: T[], fn: (item: T) => Promise<boolean>) =>
  new Promise(async (resolve, reject) => {
    for (const item of arrayP) {
      if (await fn(item)) {
        resolve(true)
        break
      }
    }
    resolve(false)
  })

And finally, the puppeteer file, which uses the page.addScriptTag function:

{
  // ...

  // this is supposed to allow external javascript to be imported into
  // the pages puppeteer traverses.
  await page.setBypassCSP(true)

  // this works - it adds isEmpty to the window object, which can be
  // used like: await window.isEmpty(...). However, it only excepts
  // strings. If I try to pass a function, which is the way the async
  // some is designed to work, the function will come in as null.
  await page.exposeFunction("isEmpty", isEmpty)

  // I saw that the `addScriptTag` should be wrapped in a "framenavigated" 
  // event listener in a suggestion on a git issue.
  page.on(
    "framenavigated",
    async frame =>
      frame === page.mainFrame() &&
      (await page.addScriptTag({
        // content: someP.toString(),
        // content: `${someP}`,
        // path: path.resolve(__dirname, "../injections/async-some.ts"),
        path: "./async-some.ts",
      })),
    // type: "module",
  )

  // I don't think this alone works.
  // await page.addScriptTag({ path: "./async-some.ts" }))
}

As you can see from the comments in the page.addScriptTag, I have tried many, many things, searching google for a solution to the best of my ability, looking through every article that even contained the words puppeteer and addScriptTag.

When adding the script with path: "./async-some.ts", I get the following error: A parser-blocking, cross site (i.e. different eTLD+1) script, <URL>, is invoked via document.write. The network request for this script MAY be blocked by the browser in this or a future page load due to poor network connectivity. If blocked in this page load, it will be confirmed in a subsequent console message. See <URL> for more details.

When I had the async-some.ts file in another directory, this would later result in a 404 error, so I added to the directory that puppeteer is initialized in. In the code, trying to use the asyncSome function will result in either asyncSome(...) is not a function or await window.asyncSome(...) is not a function. No luck there.

Using content: someP.toString() and content: \${someP}`` all fail in the same way.

Please tell me what I am doing wrong.


Viewing all articles
Browse latest Browse all 140788

Latest Images

Trending Articles



Latest Images

<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>