在 OBS 的 html 代码中使用 node.js puppeteer答案

【问题标题】：Use a node.js puppeteer in a html code for OBS在 OBS 的 html 代码中使用 node.js puppeteer
【发布时间】：2022-01-26 13:17:10
【问题描述】：

我正在使用 HTML 为 OBS 制作叠加层。我正在使用 puppeteer 从 tracker.gg 中抓取我的排名，以将其输出到一个开关，该开关将相应地更改本地 HTML 页面上的图像。这是我的第一个代码，我还不是很熟悉。到目前为止，我已经制作了“index.js”来抓取并为排名设置一个变量

const puppeteer = require('puppeteer')

async function scrapeProduct(url) {
    const browser = await puppeteer.launch()
    const page = await browser.newPage()
    await page.goto(url, {waitUntil: 'domcontentloaded'});
    
    await page.waitForXPath('/html/body/div/div[2]/div[2]/div/main/div[2]/div[3]/div[3]/div[1]/div[1]/div/div[1]/div/div/div/div/div[2]/div[2]/text()')

    const [el] = await page.$x('/html/body/div/div[2]/div[2]/div/main/div[2]/div[3]/div[3]/div[1]/div[1]/div/div[1]/div/div/div/div/div[2]/div[2]/text()')
    
    const txt = await el.getProperty('textContent')
    const rank = await txt.jsonValue()

    var requestrank = rank.substring(15, 19)

    console.log(requestrank)

    await browser.close()
}

scrapeProduct('https://tracker.gg/valorant/profile/riot/"user"/overview')

我想将变量从“index.js”节点链接到我的 HTML 代码，以便它可以相应地更改开关

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <script type="text/javascript">                         
            function request() {

                var image = document.getElementById("RankImg")                                                                 ///switch start

                var requestrank = "Diam"                                                                                       ///test the var

                switch (requestrank) {
                    case "Iron":
                        image.src = 'Images/Iron.png' ;
                        break;
                    case "Bron":
                        image.src = 'Images/Bronze.png' ;
                        break;
                    case "Silv":
                        image.src = 'Images/Silver.png' ;
                        break;
                    case "Gold":
                        image.src = 'Images/Gold.png' ;
                        break;
                    case "Plat":
                        image.src = 'Images/Platinum.png' ;
                        break;
                    case "Diam":
                        image.src = 'Images/Diamond.png' ;
                        break;
                    case "Immo":
                        image.src = 'Images/Immortal.png' ;
                        break;
                    case "Radi":
                        image.src = 'Images/Radiant.png' ;
                        break;
                    default:
                        image.src = 'Images/Base.png' ;
                }
            }                                                                                       
        </script>                                           
    </head>
    <body>

        <img src="Images/Base.png" alt="Valorant Rank" id="RankImg" onload="request()">
    
    </body>
</html>

似乎如果我只是将“index.js”中的代码放入 HTML 文件中的脚本中，由于我使用的是 puppeteer，所以它不起作用，所以基本上试图从浏览器打开浏览器（或所以我听说过）。

【问题讨论】：

您的 puppeter 代码是 nodejs（服务器端），这就是为什么不能在您的浏览器上运行的原因。运行nodejs代码不是您的选择吗？
如何做到这一点？到目前为止，我发现唯一有效的是使用 puppeteer 和 node.js。有没有办法在不使用节点的情况下抓取网站并将其数据用于 HTML javascript？
如果你想废弃一些远程网站，是因为你需要获取一些数据并将其持久化。通常，您需要使用某种服务器端语言对其进行编码并在服务器或笔记本电脑中运行它。另一种方式可能更手动：在您喜欢的浏览器中打开网页，打开控制台开发人员并粘贴一些 JavaScript 算法以在弹出窗口中获取一些数据或使用 ajax 将其发送到远程服务。你需要什么？
由于在obs上将其用作小部件是最终的，我认为服务器方法会很乏味，因为我不想每次启动OBS时都必须启动服务器。正如我所说，我是编码新手，互联网教程中的简单方法似乎是使用 node.js，尽管我不知道我必须在服务器端使用它。基本上，我想启动 OBS，将 html 页面作为小部件获取，它可能每 10-15 分钟重新加载一次，检查网站的信息，输出排名，以便我可以在开关中使用它来更改图像。
你能给我提供更多关于如何做到这一点的信息吗？

标签： node.js puppeteer

【解决方案1】：

我发现了一些有用的东西

所以我先用node.js生成一个文本文件

fs.writeFile("/Bibliothèques/Pictures/Graphism/New twitch gold/Widgets/Rank checker/rank.txt", requestrank, function(err) {
    if (err) {
        return console.log(err)
    }
    console.log("The rank file was saved")
})

console.log(requestrank)

然后继续读取在改变图像函数中生成的文本文件来属性到开关

async function request() {

    var image = document.getElementById("RankImg") ///set img var

    const response = await fetch('rank.txt') ///get text
    const text = await response.text()

        .then(requestrank => {
            console.log(requestrank)
            switch (requestrank) { ///switch start
                case "Iron":
                    image.src = 'Images/Iron.png';
                    break;
                case "Bron":
                    image.src = 'Images/Bronze.png';
                    break;
                case "Silv":
                    image.src = 'Images/Silver.png';
                    break;
                case "Gold":
                    image.src = 'Images/Gold.png';
                    break;
                case "Plat":
                    image.src = 'Images/Platinum.png';
                    break;
                case "Diam":
                    image.src = 'Images/Diamond.png';
                    break;
                case "Immo":
                    image.src = 'Images/Immortal.png';
                    break;
                case "Radi":
                    image.src = 'Images/Radiant.png';
                    break;
                default:
                    image.src = 'Images/Base.png';
            }
        })
        .catch(error => {
            console.error(error);
        })
} ///Twitch.tv/QuentinCly

【讨论】：