What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Use Puppeteer’s page.addStyleTag() to inject CSS into a page you have already loaded. Pass CSS as content for inline rules, or pass a stylesheet address as url. Await the method before taking a screenshot or relying on the new styles.
Add inline CSS to the main page
page.addStyleTag() inserts a style element into Puppeteer’s main frame. This runnable Node.js example loads a page, adds a rule, and then captures a screenshot:
const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch();
try {
const page = await browser.newPage();
await page.goto('https://example.com', { waitUntil: 'networkidle2' });
await page.addStyleTag({
content: 'body { background: papayawhip; }',
});
await page.screenshot({ path: 'page.png' });
} finally {
await browser.close();
}
})();The call resolves to a handle for the inserted element. Await it so insertion completes before a dependent action such as a screenshot. The Puppeteer Page.addStyleTag() API reference documents this method in Puppeteer 25.12.0.
Load a separate stylesheet by URL
When your CSS already lives in a hosted file, provide its address instead of a content string:
Free tools Windows power users keep installed
One-click scans. No signup required.
#1 Best Overall
await page.addStyleTag({ url: 'https://example.com/custom.css' });Puppeteer adds a stylesheet link to the main frame and returns a handle to that element. Ensure the URL is reachable by the browser session; whether a particular site’s policy, navigation sequence, or scripts affect your intended result depends on that site and setup.
Apply styles to a particular frame
The Page method is a shortcut for adding a style to the page’s main frame. If the content you need to style is inside a child frame, call the corresponding method on that frame instead:
Rank #2
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
const frame = page.frames().find((candidate) => candidate.url().includes('embedded.example'));
if (!frame) {
throw new Error('Target frame was not found');
}
await frame.addStyleTag({ content: '.notice { display: none; }' });The example checks for a matching frame before injecting CSS; change the URL test and selector to match your page. The Puppeteer Frame.addStyleTag() API reference documents frame-level injection.
Choose the right Puppeteer method
| Need | Use | Result |
|---|---|---|
| Insert a small or generated rule into an existing page | page.addStyleTag({ content: css }) |
Adds a style element to the main frame. |
| Load a separately hosted stylesheet | page.addStyleTag({ url: cssUrl }) |
Adds a stylesheet link to the main frame. |
| Style content in a child frame | frame.addStyleTag(...) |
Injects the style or link into that frame. |
| Run custom DOM operations in the browser | page.evaluate(fn) |
Executes a function in the page context; Puppeteer waits if it returns a promise. |
| Supply the document markup itself | page.setContent(html) |
Sets page content; it is not simply stylesheet injection into an existing document. |
For custom page-context work beyond adding CSS, Page.evaluate() is the lower-level option. For constructing a document from supplied markup, use Page.setContent(). These APIs serve different purposes from the dedicated stylesheet method.
Rank #3
Or skip the browser setup
If your goal is a screenshot rather than controlling a Puppeteer browser, ScreenshotNeo returns an image or PDF from one GET request. It is a screenshot API and MCP server for developers; its API parameters also work with names used by other screenshot APIs, which can make switching easier. Its screenshot endpoint does not expose a custom CSS parameter in the facts stated here, so use Puppeteer when injecting custom CSS is essential.
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://example.com -o shot.webpSee the ScreenshotNeo documentation for the endpoint and options. ScreenshotNeo removes cookie/consent banners, newsletter popups, and chat widgets before capture; bot checks, blank pages, and failed loads are never billed. Its MCP server lets AI agents take screenshots, and the free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000. Sign up for free.
Troubleshoot CSS injection
- The screenshot looks unchanged: confirm the awaited
addStyleTag()call happens after navigation and before the screenshot. Check that the selector matches elements in the target document. - The target is inside an iframe: the Page method targets the main frame. Find the correct child frame and call
frame.addStyleTag()on it. - The stylesheet URL does not take effect: verify the URL is accessible in the browser session and that it points to CSS. Site-specific policy and page scripts can affect outcomes; the API documentation does not establish a universal result for every site.
- You are replacing content rather than styling it: use
page.setContent(html)when you intend to supply document markup;addStyleTag()adds a stylesheet to the existing frame.
Frequently Asked Questions
What does Puppeteer’s addStyleTag() return?
It resolves to a handle for the inserted style or link element.
Rank #4
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
Does page.addStyleTag() style every iframe automatically?
No. It targets the main frame; call the Frame API for a child frame.
Recommended Free Tools
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
