Injecting CSS into site with Puppeteer

addStyleTag:

You can use page.addStyleTag to add some style which will either add a link or style tag based on your options which can be a url, path or some css content.

// url
await page.addStyleTag({url: 'http://example.com/style.css'})

// path, can be relative or absolute path
await page.addStyleTag({path: 'style.css'})

// content
await page.addStyleTag({content: '.body{background: red}'})

evaluateOnNewDocument:

If you want to apply on each page/navigation, you can use page.evaluateOnNewDocument with this snippet.

await page.evaluateOnNewDocument(()=>{
  var style = document.createElement('style');
  style.type="text/css";
  style.innerHTML = '.body{background: red}'; // the css content goes here
  document.getElementsByTagName('head')[0].appendChild(style);
});

Leave a Comment

Hata!: SQLSTATE[HY000] [1045] Access denied for user 'divattrend_liink'@'localhost' (using password: YES)