firefox - Jak mohu spouštět příkazy JavaScriptu bez prohlížeče?

Jak mohu spustit JavaScript bezhlavě?

Hledám možnost jako Scratchpad (přítomný ve Firefoxu), která by mohla spouštět JavaScript a provádět operace s DOM na konkrétních webových stránkách bez prohlížeče a ideálně spouštěná z příkazového řádku.

Odpověď č. 1

Našel jsem podobný příspěvek, který má relativně aktuální odpověď na vaši otázku - Spuštění Javascriptu založeného na DOM z příkazového řádku

Hlavním problémem je, že prohlížeč je ve skutečnosti to, co vytváří DOM, se kterým chcete interagovat. Takže bez nějakého druhu "prohlížeče", který běží, nemáme žádný DOM. Ale existují některé nástroje (jako Selenium), které mohou automatizovat/simulovat spuštění prohlížeče, vytvoření DOM a spuštění vašeho JavaScriptu.

Odpověď č. 2

Viděl jsem zde často zmínky o scratchpadu (a alternativách jako scratch js), ale vaše otázka se konkrétně ptá na alternativu. Node.js bude pro tento účel fungovat dobře, ale ve výchozím nastavení nemůže manipulovat s DOM. V tuto chvíli jsou dvě možnosti balíčků, které vykonávají trochu odlišnou práci. Jeden se nazývá jsdom a umožňuje manipulovat s DOM z daného zdrojového kódu. Jelikož jste řekl, že hledáte řešení jako scratchpad, puppeteer by také mohl fungovat. Používá headless Chromium a umožní vám ovládat Chromium programově. Myslím, že chcete puppeteer, ale technicky vzato používá prohlížeč, takže možná budete chtít jsdom.

Kroky :

1. Stáhněte a nainstalujte Node.js z https://nodejs.org/
2. Zvolte, zda chcete použít puppeteer nebo jsdom (viz výše).
3. Vytvořte adresář pro svůj projekt a přesuňte se do něj: mkdir javascript && cd javascript
4. Inicializujte adresář pomocí npm (správce balíků pro Node): npm init -y

5. Pokud zvolíte puppeteer:

   • Nainstalujte Puppeteer: npm install puppeteer

   • Vytvořte a upravte soubor index.js tak, aby obsahoval následující:

     const puppeteer = require('puppeteer');
     
     (async () => {
       const browser = await puppeteer.launch();
     
       const page = await browser.newPage();
       await page.goto('https://example.com');
     
       await page.addScriptTag({content:`
         document.querySelector('div>h1').textContent = 'Example Puppeteer'
       `})
       await page.evaluate(() => {
         document.querySelector('div>p').textContent = "Just another way to do things."
       });
       // this ^ is slightly different because in the
       // first the javascript is being injected as a
       // script tag, while in the second the div>p is
       // actually being manipulated. The first would
       // probably be closer to scratchpad though.
     
       await page.screenshot({path: 'screenshot.png'});
       await browser.close();  
     })();
     

   • Spusťte node index.js
   • Snímek obrazovky v souboru screenshot.png by měl být z upraveného DOM

6. Pokud zvolíte jsdom:

   • Nainstalujte jsdom: npm install jsdom

   • Vytvořte a upravte index.js:

     const { JSDOM } = require('jsdom')
     const { document } = (new JSDOM(`<!DOCTYPE html><html><head></head><body><p>Hello</p></body></html>`)).window
     document.querySelector('p').textContent = 'Hello World!'
     console.log(document.querySelector('p').textContent) // Will output 'Hello World!'
     

   • Spusťte node index.js
   • Měl byste vidět „Hello World!“ ve své konzoli.