How to use addStyleTag method in Puppeteer

Best JavaScript code snippet using puppeteer

CodeGym DARKMODE.user.js

Source:CodeGym DARKMODE.user.js

...10// @grant        none11// @run-at       document-idle12// @license      MIT13// ==/UserScript==14function addStyleTag(css) {15    var head, style;16    head = document.getElementsByTagName('head')[0];17    if (!head) { return; }18    style = document.createElement('style');19    style.type = 'text/css';20    style.innerHTML = css;21    head.appendChild(style);22}23// h1 : 36px;24// h2 : 32px;25// h3 : 24px;26// keyframe rainbow27addStyleTag('@keyframes rainbow {   0%{background-position:left}  50%{background-position:right}  100%{background-position:left}}')28// LOGO filter29addStyleTag('span.navbar-brand-logo.mini {filter: grayscale(75%);}')30// body bg31addStyleTag('#page, .main-navigation ul ul{background: #202225 !important;}')32addStyleTag('.navbar .navbar-brand ,.navbar.nav-inverse, .bg-primary{background: #3a4044 !important;}')33addStyleTag('body {color: #ACC8E5 !important; background: #112A46 !important;font-family: \'Montserrat\', Arial, sans-serif !important; }')34// dropdown-menu35addStyleTag('.dropdown-menu {background: #202225 !important; color: #83ba52 !important; }')36// h1 neon37addStyleTag('h1,h2,h3,h4 {letter-spacing: 0.02em !important;text-transform: uppercase !important;text-shadow: 0 0 0.15em #1da9cc !important;white-space: nowrap !important;filter: blur(0.007em) !important;}')38addStyleTag('h1 {font-weight: 700; font-size: 36px; color: #83ba52; }')39addStyleTag('h2 {font-weight: 600; font-size: 28px; color: #fff;')40addStyleTag('h3 {font-weight: 500; font-size: 24px; color: #fff;}')41addStyleTag('h4 {font-weight: 400; font-size: 20px; color: #fff;}')42addStyleTag('h1.page-title.font-size-24.mb-0, a.nav-link.navbar-avatar > span.username  {text-shadow:none;font-size:2.0rem!important;color: white; text-shadow: 0 0 0.05em #fff, 0 0 0.2em #fe05e1, 0 0 0.3em #fe05e1!important;} a.nav-link.navbar-avatar > span.username {font-weight:bold !important;text-transform:uppercase;font-size:1rem !important;} span.avatar{box-shadow:0 0 0.05em #fff, 0 0 0.2em #fe05e1, 0 0 0.3em #fe05e1!important;}')43// .pagelayout-course .course-content .sectionname a {44addStyleTag('.pagelayout-course .course-content .sectionname a { color: #83ba52 !important; font-weight: 600;letter-spacing: 0.02em !important;text-transform: uppercase !important;text-shadow: 0 0 0.15em #1da9cc !important;white-space: nowrap !important;filter: blur(0.007em) !important;}')45// left side nav46addStyleTag('#nav-drawer-container, [data-region="drawer"] .list-group-item.active {background:#3a4044;}')47addStyleTag('.list-group-item-action, .list-group-item {color: #B1FF91 !important;background:#3a4044 !important;text-shadow: 0 0 0.15em #1da9cc;white-space: nowrap !important;}')48addStyleTag('.list-group-item span.media-body,  {color: #fff !important;text-shadow:none;}')49addStyleTag('.list-group-item > a > span.instancename {font-size: 12px !important;}')50addStyleTag('[data-region="drawer"] .site-menubar-footer a {background:#3a4044 !important;} [data-region="drawer"] .site-menubar-footer a .fa{color:#B1FF91 !important;}')51addStyleTag('#activity-nav .list-group-item a {  padding: 8px 16px; }')52//h3.section-title53addStyleTag('h3.section-title {font-weight: 600;font-size: 32px;color: #fff !important;letter-spacing: 0.02em !important;text-shadow: 0 0 0.15em #1da9cc !important;white-space: nowrap !important;}')54addStyleTag('h3.section-title>a:hover {text-decoration: none;}')55// ul.section li56addStyleTag('ul.section > li {border-bottom: 1px #f8edeb solid;} ')57// code58addStyleTag('code {font-family: SFMono-Regular,Consolas, Arial, sans-serif;font-weight: bold ;background: #666;border-radius: 0.5em;white-space: pre;font-size: 16px!important;line-height: 1.75;}')59addStyleTag('.hljs {color: #fff}')60addStyleTag('span.hljs-keyword, span.hljs-number, span.hljs-string {color: #83ba52;}')61// [role="main"] TITLE62//background: linear-gradient(to right, crimson,pink,springgreen);63addStyleTag(' [role="main"] > h2 {filter:none !important;text-shadow: none !important; font-size: 32px; background: linear-gradient(to right, #A2D2FF,#272882,#FF865E,#FEE440);  background-size: 200% 200%;  animation: rainbow 10s ease-in-out infinite;  background-clip: text;  -webkit-background-clip:text;  color:rgba(0,0,0,0);   display:block;  text-align:center;  transition: color .2s ease-in-out;  text-transform:uppercase;  font-weight:900;}')64// card bg65addStyleTag('.pagelayout-course .course-content .section.main,.card, .pagelayout-course #section-0 {background: #262a2d !important;}')66addStyleTag('.hljs {background: #1b1b1b !important;}')67// check-box size68addStyleTag('.icon {width: 20px !important;height: 20px}')69// .instancename title70addStyleTag(' .instancename {font-size: 16px!important; color: rgba(255, 255, 255, 0.8) !important;text-shadow: 0 0 0.10em #1da9cc !important;white-space: nowrap !important;filter: blur(0.007em) !important;}')71addStyleTag(' .instancename:hover {font-size: 18px!important;color: rgba(255, 255, 255, 1);text-shadow: 0 0 0.2em #1da9cc;transition: font-size 0.4s ease;}')72addStyleTag(' .activityinstance>a:hover {text-decoration: none;}')73// a:link a:hover74addStyleTag('a:link{color: #fff important;} a:hover {color: #82d4f0;')75//.activity-count76addStyleTag('.course-content .section-summary .section-summary-activities .activity-count {color:#6db467 !important;}')77// question quiz78addStyleTag('.que .content {background: #26343f;} .que .qtext {    font-size: 1.25rem;background: #314250;} [data-region="blocks-column"], .bg-white {background: #3a4044 !important;} .nav-tabs .nav-link.active .fa {    color: #7eb654!important;}')79// nav80addStyleTag('.nav-tabs .nav-link { color: #5a6970!important;}')81// table82addStyleTag('table, table.generaltable {text-align: left; overflow: hidden; margin: 0 auto;  display: table; padding: 0 0 8em 0;} tr:nth-child(odd) { background-color: #323C50; } tr:nth-child(even) { background-color: #2C3446; } td:first-child { color: #FB667A; }')83addStyleTag('table.generaltable tr:nth-child(odd) {color:white; background-color: #277231  !important; } table.generaltable tr:nth-child(even) {color:white; background-color: #305621  !important; } table.quizreviewsummary td.cell,table.quizreviewsummary th.cell {color:inherit;background-color: inherit !important;}')84addStyleTag('tr.bestrow td {color: black !important; font-weight: 600 !important; font-size:1.15rem !important} tr.lastrow td {color: black !important;}')85// select id="jump-to-activity"86// ResetStyle87addStyleTag('#jump-to-activity.custom-select {  appearance: none;  outline: 0;  border: 0; box-shadow: none; flex: 1; padding: 0 1em; color: #fff; background-color: #2c3e50; background-image: none; cursor: pointer;}')88/* Remove IE arrow */89addStyleTag('#jump-to-activity.custom-select::-ms-expand {   display: none; }')90/* Custom Select wrapper */...

scrape.js

Source:scrape.js

...97  }98  await page.goto(url, gotoOptions);99  if (addStyleTag.length) {100    for (tag in addStyleTag) {101      await page.addStyleTag(addStyleTag[tag]);102    }103  }104  if (addScriptTag.length) {105    for (script in addScriptTag) {106      await page.addScriptTag(addScriptTag[script]);107    }108  }109  if (waitFor) {110    if (typeof waitFor === 'string') {111      const isSelector = await page.evaluate((s) => {112        try { document.createDocumentFragment().querySelector(s); }113        catch (e) { return false; }114        return true;115      }, waitFor);...

layout-generator-batch.js

Source:layout-generator-batch.js

...32                n.style.setProperty('text-shadow', 'none', 'important')33            }34        });35    });36    await page.addStyleTag({content: 'img{filter: brightness(0) !important; background: black !important}'});37    await page.addStyleTag({content: 'svg{filter: brightness(0) !important; background: black !important}'});38    // await page.addStyleTag({content: 'iframe{filter: brightness(0) !important}'}); // visibility: hidden may be better, iframes are very tricky39    await page.addStyleTag({content: 'iframe{visibility: hidden !important}'});40    await page.addStyleTag({content: '*{color: rgba(0, 0, 0, 0) !important; text-shadow: none !important}'});41    await page.addStyleTag({content: 'ul{list-style: none !important}'});42    await page.addStyleTag({content: '*{animation: none !important;'});43    await page.addStyleTag({content: '*{-webkit-animation: none !important;}'});44    await page.addStyleTag({content: '*{-moz-animation: none !important}'});45    await page.addStyleTag({content: '*{-o-animation: none !important}'});46    await page.waitForTimeout(500); // text/images are sometimes visible without this47    for (let config of info['configs']) {48        await page.setViewportSize({ width: config['width'], height: config['height']});49        await page.screenshot({path: config['layout'], fullPage: true});50    }51    return links;52};53(async () => {54    const uniqueLinks = {};55    for (let [browserName, groupedBatch] of utils.groupBatchByBrowser(batch).entries()) {56        let browserType;57        for (let type of [playwright.chromium, playwright.firefox, playwright.webkit]) {58            if (browserName === type.name()) {59                browserType = type;...

screenshot.js

Source:screenshot.js

...83    await page.goto('http://localhost', gotoOptions);84  }85  if (addStyleTag.length) {86    for (tag in addStyleTag) {87      await page.addStyleTag(addStyleTag[tag]);88    }89  }90  if (addScriptTag.length) {91    for (script in addScriptTag) {92      await page.addScriptTag(addScriptTag[script]);93    }94  }95  if (waitFor) {96    if (typeof waitFor === 'string') {97      const isSelector = await page.evaluate((s) => {98        try { document.createDocumentFragment().querySelector(s); }99        catch (e) { return false; }100        return true;101      }, waitFor);...

pdf.js

Source:pdf.js

...22async function main() {23	const browser = await puppeteer.launch();24	const page = await browser.newPage();25	await page.goto('http://localhost:3001/', {waitUntil: 'networkidle2'});26	await page.mainFrame().addStyleTag({content: css_first_page});27	await page.pdf({28		path: 'first.pdf',29		format: 'A4',30		pageRanges: '1',31		printBackground: true,32		displayHeaderFooter: false,33	});34	await page.mainFrame().addStyleTag({content: css_shrink});35	await page.mainFrame().addStyleTag({content: css_body_page});36	await page.pdf({37		path: 'body.pdf',38		format: 'A4',39		pageRanges: '2-',40		printBackground: true,41		displayHeaderFooter: false,42		/* Header/footer doesn't work properly, doesn't seem to style43		headerTemplate: '<div style="background: blue"></div>',44		footerTemplate,45		*/46		/* - clips content, doesn't rerender - inject css instead47		margin: {48			left:   '18mm',49			right:  '18mm',50			top:    '20mm',51			bottom: '20mm'52		}53		*/54	});55	await page.goto('http://localhost:3001/footer.html', {waitUntil: 'networkidle2'});56	await page.pdf({57		path: 'footer.pdf',58		format: 'A4',59		pageRanges: '1',60		printBackground: true,61		displayHeaderFooter: false,62	});63	await browser.close();64	spawnSync('pdftk', 'body.pdf background footer.pdf output bodybg.pdf'.split(' '));65	spawnSync('pdftk', 'first.pdf bodybg.pdf cat output david_tulloh.pdf'.split(' '));66	// Clean up67	spawnSync('rm', ['-f', 'first.pdf', 'body.pdf', 'footer.pdf', 'bodybg.pdf']);68	console.log("Generated david_tulloh.pdf");69}70async function us() {71	const browser = await puppeteer.launch();72	const page = await browser.newPage();73	await page.goto('http://localhost:3001/US', {waitUntil: 'networkidle2'});74	await page.mainFrame().addStyleTag({content: css_single_page});75	await page.pdf({76		path: 'david_tulloh_us.pdf',77		format: 'A4',78		pageRanges: '1',79		printBackground: true,80		displayHeaderFooter: false,81	});82	await browser.close();83	console.log("Generated david_tulloh_us.pdf");84}85// Chain, puppeteer seems to occasionally trip over itself in parellel86main()87.then(us)88.then(() => console.log("Generate complete"));

grabber.js

Source:grabber.js

...40        return;41    }42    let pdf_options = {displayHeaderFooter: true, margin: {top: '.75in', bottom: '.75in', left: '.5in', right: '.5in'}, printBackground: true, path: outdir + '/' + filename + '.pdf'}43    if (url.includes('dnainfo.com')) {44        await page.addStyleTag({path: 'tweaks/dnainfo.css'})45    }46    if (url.includes('laweekly.com')) {47        await page.setViewport({width: 500, height: 800})48        pdf_options.scale = .75;49        pdf_options.printBackground = false;50        await page.addStyleTag({path: 'tweaks/laweekly.css'})51    }52    if (url.includes('the-toast.net')) {53        await page.addStyleTag({path: 'tweaks/thetoast.css'})54		await page.setViewport({width:500, height:600});55    }56    if (url.includes('newsweek.com')) {57        await page.addStyleTag({path: 'tweaks/newsweek.css'});58        await page.setViewport({width:500, height: 600});59        pdf_options.scale = .75;60    }61    if (argv.k) {62        await page.addStyleTag({path: 'tweaks/kinja.css'});63        await page.setViewport({width:500, height: 600});64    }65    const height = await page.evaluate(() => document.documentElement.scrollHeight);66    const viewportHeight = await page.viewport().height;67    let viewportIncr = 0;68    while (viewportIncr + viewportHeight < height - 1000) {69        await page.evaluate(_viewportHeight => {70            window.scrollBy(0, _viewportHeight);71            console.log(_viewportHeight);72        }, viewportHeight);73        await timeout(1000);74        viewportIncr = viewportIncr + viewportHeight;75    }76    await timeout(3000);...

content.js

Source:content.js

...73    await page.goto('http://localhost', gotoOptions);74  }75  if (addStyleTag.length) {76    for (tag in addStyleTag) {77      await page.addStyleTag(addStyleTag[tag]);78    }79  }80  if (addScriptTag.length) {81    for (script in addScriptTag) {82      await page.addScriptTag(addScriptTag[script]);83    }84  }85  if (waitFor) {86    if (typeof waitFor === 'string') {87      const isSelector = await page.evaluate((s) => {88        try { document.createDocumentFragment().querySelector(s); }89        catch (e) { return false; }90        return true;91      }, waitFor);...

text-filter.js

Source:text-filter.js

...47                n.style.setProperty('background', 'none' , 'important')48                n.style.setProperty('box-shadow', 'none' , 'important')49            });50        });51        await page.addStyleTag({content: '*{background-color: black !important}'})52        await page.addStyleTag({content: 'svg{filter: brightness(0) !important; background: black !important}'});53        await page.addStyleTag({content: 'iframe{visibility: hidden !important}'});54        await page.addStyleTag({content: 'img{filter: brightness(0) !important; background: black !important}'})55        await page.addStyleTag({content: 'ul{list-style: none !important}'});56    }57    await page.waitForTimeout(1000);58    await page.screenshot({path: 'example.png', fullPage: true});59    await browser.close();...

Using AI Code Generation

1const puppeteer = require('puppeteer');2(async () => {3  const browser = await puppeteer.launch();4  const page = await browser.newPage();5  await page.addStyleTag({content: 'body {background-color: green;}'});6  await page.screenshot({path: 'example.png'});7  await browser.close();8})();9const puppeteer = require('puppeteer');10(async () => {11  const browser = await puppeteer.launch();12  const page = await browser.newPage();13  await page.screenshot({path: 'example.png'});14  await browser.close();15})();16const puppeteer = require('puppeteer');17(async () => {18  const browser = await puppeteer.launch();19  const page = await browser.newPage();20  await page.addScriptTag({path: 'jquery.js'});21  await page.screenshot({path: 'example.png'});22  await browser.close();23})();24const puppeteer = require('puppeteer');25(async () => {26  const browser = await puppeteer.launch();27  const page = await browser.newPage();28  await page.addScriptTag({content: 'console.log("Hello world!")'});29  await page.screenshot({path: 'example.png'});30  await browser.close();31})();32const puppeteer = require('puppeteer');33(async () => {34  const browser = await puppeteer.launch();35  const page = await browser.newPage();36  await page.evaluate(() => {37    $('body').css('background-color', 'green');38  });39  await page.screenshot({path: 'example.png'});40  await browser.close();41})();

Using AI Code Generation

1const puppeteer = require('puppeteer');2(async () => {3  const browser = await puppeteer.launch();4  const page = await browser.newPage();5  await page.addStyleTag({content: 'body {background-color: green;}'});6  await browser.close();7})();8const puppeteer = require('puppeteer');9(async () => {10  const browser = await puppeteer.launch();11  const page = await browser.newPage();12  await browser.close();13})();14const puppeteer = require('puppeteer');15(async () => {16  const browser = await puppeteer.launch();17  const page = await browser.newPage();18  await page.addScriptTag({content: 'console.log(123)'});19  await browser.close();20})();21const puppeteer = require('puppeteer');22(async () => {23  const browser = await puppeteer.launch();24  const page = await browser.newPage();25  await browser.close();26})();27const puppeteer = require('puppeteer');28(async () => {29  const browser = await puppeteer.launch();30  const page = await browser.newPage();31  await page.addScriptTag({path: './inject.js'});32  await browser.close();33})();34const puppeteer = require('puppeteer');35(async () => {36  const browser = await puppeteer.launch();37  const page = await browser.newPage();

Using AI Code Generation

1const puppeteer = require('puppeteer');2(async () => {3  const browser = await puppeteer.launch();4  const page = await browser.newPage();5  await page.addStyleTag({content: 'body {background-color: red;}'});6  await page.screenshot({path: 'example.png'});7  await browser.close();8})();9const puppeteer = require('puppeteer');10(async () => {11  const browser = await puppeteer.launch();12  const page = await browser.newPage();13  await page.evaluate(() => {14    $('body').append('<h1>Added by jQuery!</h1>');15  });16  await page.screenshot({path: 'example.png'});17  await browser.close();18})();19const puppeteer = require('puppeteer');20(async () => {21  const browser = await puppeteer.launch();22  const page = await browser.newPage();23  await page.addScriptTag({path: './jquery.js'});24  await page.evaluate(() => {25    $('body').append('<h1>Added by jQuery!</h1>');26  });27  await page.screenshot({path: 'example.png'});28  await browser.close();29})();30const puppeteer = require('puppeteer');31(async () => {32  const browser = await puppeteer.launch();33  const page = await browser.newPage();34  await page.addScriptTag({content: 'document.body.style.backgroundColor = "red";'});35  await page.screenshot({path: 'example.png'});36  await browser.close();37})();

Using AI Code Generation

1const puppeteer = require('puppeteer');2(async () => {3    const browser = await puppeteer.launch();4    const page = await browser.newPage();5    await page.addStyleTag({path: 'style.css'});6    await page.screenshot({path: 'google.png'});7    await browser.close();8})();9body {10  background-color: red;11}

Using AI Code Generation

1const puppeteer = require('puppeteer');2(async () => {3    const browser = await puppeteer.launch();4    const page = await browser.newPage();5    await page.addStyleTag({content: 'body {background-color: red;}'});6    await page.screenshot({path: 'screenshot.png'});7    await browser.close();8})();9const puppeteer = require('puppeteer');10(async () => {11    const browser = await puppeteer.launch();12    const page = await browser.newPage();13    await page.evaluate(() => {14        $('body').append('<h1>Test</h1>');15    });16    await page.screenshot({path: 'screenshot.png'});17    await browser.close();18})();19const puppeteer = require('puppeteer');20(async () => {21    const browser = await puppeteer.launch();22    const page = await browser.newPage();23    await page.addScriptTag({path: 'jquery.js'});24    await page.evaluate(() => {25        $('body').append('<h1>Test</h1>');26    });27    await page.screenshot({path: 'screenshot.png'});28    await browser.close();29})();30const puppeteer = require('puppeteer');31(async () => {32    const browser = await puppeteer.launch();33    const page = await browser.newPage();34    await page.addScriptTag({content: 'alert("hello world!")'});35    await page.screenshot({path: 'screenshot.png'});36    await browser.close();37})();38const puppeteer = require('puppeteer');39(async () => {40    const browser = await puppeteer.launch();41    const page = await browser.newPage();42    await page.addScriptTag({content: 'alert("hello world!")'});

Using AI Code Generation

1const puppeteer = require('puppeteer');2(async () => {3  const browser = await puppeteer.launch();4  const page = await browser.newPage();5  await page.addStyleTag({content: 'body {background-color: red;}'});6  await page.screenshot({path: 'screenshot.png'});7  await browser.close();8})();9Puppeteer addStyleTag() method

Using AI Code Generation

1const puppeteer = require('puppeteer');2const fs = require('fs');3(async () => {4  const browser = await puppeteer.launch();5  const page = await browser.newPage();6  await page.addStyleTag({path: './style.css'});7  await page.screenshot({path: 'google.png'});8  await browser.close();9})();10body {11  background-color: red;12}13Puppeteer is a Node library which provides a high-level API to control headless Chrome or Chromium over the DevTools Protocol. Puppeteer runs headless by default, but can be configured to run full (non-headless) Chrome or Chromium. Puppeteer is a Node library which provides a high-level API to control headless Chrome or Chromium over the DevTools Protocol. Puppeteer runs headless by default, but can be configured to run full (non-headless) Chrome

Using AI Code Generation

1(async () => {2  const browser = await puppeteer.launch();3  const page = await browser.newPage();4  await page.addStyleTag({content: 'body {background-color: red;}'});5  await browser.close();6})();7addScriptTag() method8(async () => {9  const browser = await puppeteer.launch();10  const page = await browser.newPage();11  await page.addScriptTag({content: 'document.body.style.background = "red"'});12  await browser.close();13})();14(async () => {15  const browser = await puppeteer.launch();16  const page = await browser.newPage();17  await browser.close();18})();

Automation Testing Tutorials

Learn to execute automation testing from scratch with LambdaTest Learning Hub. Right from setting up the prerequisites to run your first automation test, to following best practices and diving deeper into advanced test scenarios. LambdaTest Learning Hubs compile a list of step-by-step guides to help you be proficient with different test automation frameworks i.e. Selenium, Cypress, TestNG etc.