HTML/CSS Is it possible to use js variables in html while using Puppeteer?

[Darkmisc]

TL;DR Summary

I'd like to use a variable from my JS file in my html file. This works fine until I use Puppeteer in the JS file. Then, it won't work.

Hi everyone

I'm using Visual Studio Code and would like to use a variable from a JavaScript file in my html code.

This is easy enough to do until I try using Puppeteer in the JS file. If I add the following line to the JS code, I can no longer call my JS variable in the html file.

[CODE lang="javascript" title="Puppeteer"]const puppeteer = require("puppeteer")[/CODE]

I can work around this by saving the JS variable to a text file and then using the fetch method to get the data out of the file, but it's rather clunky.

[CODE lang="javascript" title="fetch"] fetch('blah.txt')
.then(response => response.text())
.then(data => {
var myVariable = data;
var paragraphElement = document.getElementById("myParagraph");
paragraphElement.innerHTML = "wowee" + myVariable;
})
.catch(error => console.error(error));
[/CODE]

Is there a more direct way to use JS variables in html while using Puppeteer?

Thanks

 

[Darkmisc]

The console says

[CODE lang="javascript" title="error"]index.js:2 Uncaught ReferenceError: require is not defined
at index.js:2:19
(anonymous) @ index.js:2[/CODE]

The code that it refers to is
[CODE lang="javascript" title="puppeteer"]const puppeteer = require("puppeteer")
[/CODE]

This is the part in sources that is underlined

I think flow might not be an issue here. My js variable is only there for testing. It's a fixed string. It doesn't depend on anything retrieved by Puppeteer.

EDIT: going to try fix the problem with Browserify

 

[pbuk]

You are not using Puppeteer because your code is crashing because require doesn't exist in JavaScript.

You may be able to achieve what you want with Browserify, but this is not a way of working that is supported by current versions of Node. It is also not clear why you would want to run puppeteer within a browser, that is not normally how it is used.

What are you actually trying to achieve?

 

[Darkmisc]

I wanted to use Puppeteer to get sports scores from a page and put them in a variable. I then wanted to use that variable to display updates for the scores in a popup.

 

[pbuk]

I wanted to use Puppeteer to get sports scores from a page and put them in a variable.

That is not what Puppeteer is for.

To scrape data from a page you need to retrieve the page either using the browser's built-in Fetch API (or the outdated XMLHttpRequest) or a module such as axios. Beware that [EDIT] this may be a breach of copyright of [/EDIT] the page you are targeting, and it may prevent it using the same-origin policy.

 

[pbuk]

I have added a note on copyright. Note that most publishers of sports results expressly prohibit this kind of thing see eg https://www.nfl.com/legal/terms/

Systematic retrieval of data or other content from the Services, whether to create or compile, directly or indirectly, a collection, compilation, database, or directory, is prohibited absent our express prior written consent.