firefox - Hur kan jag köra JavaScript-kommandon utan en webbläsare?

Hur kan jag köra JavaScript utan användargränssnitt?

Jag letar efter ett alternativ som Scratchpad (finns i Firefox) som kan köra JavaScript och göra DOM-operationer på specifika webbplatser utan en webbläsare och helst köras från kommandoraden.

Svar #1

Jag hittade ett liknande inlägg som har ett relativt uppdaterat svar på din fråga - Kör DOM-baserad Javascript från kommandoraden

Huvudproblemet är att webbläsaren faktiskt är det som skapar DOM som du vill interagera med. Så utan någon form av "webbläsare" som körs har vi ingen DOM. Men det finns några verktyg tillgängliga (som Selenium) som kan automatisera/simulera att starta en webbläsare, skapa DOM och köra din JavaScript.

Svar #2

Jag har sett scratchpad nämnas mycket här (och alternativ som scratch js), men ditt svar frågar specifikt efter ett alternativ. Node.js fungerar bra för detta ändamål, men kan inte, som standard, manipulera DOM. Det finns två alternativ för paket som gör ett något annorlunda jobb i detta skede. Ett kallas jsdom, och tillåter dig att manipulera DOM från given källkod. Eftersom du sa att du letade efter en lösning som scratchpad, kan puppeteer också fungera. Det använder headless chromium och låter dig kontrollera chromium programmeringsmässigt. Jag tror att du vill ha puppeteer, men det använder tekniskt sett en webbläsare, så du kanske vill ha jsdom.

Steg :

1. Ladda ner och installera nodejs från https://nodejs.org/
2. Välj om du vill använda puppeteer eller jsdom (detaljerat ovan).
3. Skapa en katalog för ditt projekt och byt till den: mkdir javascript && cd javascript
4. Initiera katalogen med npm (Node-pakethanteraren): npm init -y

5. Om du väljer puppeteer:

   • Installera puppeteer: npm install puppeteer

   • Skapa och redigera index.js för att ha följande:

     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();  
     })();
     

   • Kör node index.js
   • Skärmbilden på screenshot.png bör vara av den manipulerade DOM:en

6. Om du väljer jsdom:

   • Installera jsdom: npm install jsdom

   • Skapa och redigera 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!'
     

   • Kör node index.js
   • Du bör se "Hello World!" i din konsol.