Page Content Enhancer

A utility that enhances web pages by injecting custom scripts and styles during browser automation.

Description

Build a module that injects custom JavaScript and CSS into web pages. The module should support injecting scripts that run before page scripts load, adding external script files, injecting inline JavaScript code, and applying custom CSS styles to pages.

Requirements

Script Injection

The module must support injecting JavaScript code into pages in multiple ways:

1. Pre-page Script Injection: Inject JavaScript code that runs before any page scripts execute. This code should persist across page navigations.

2. External Script Loading: Add external JavaScript files from URLs into the page by creating script tags.

3. Inline Script Injection: Add inline JavaScript code to the page by creating script tags with embedded content.

Style Injection

The module must support injecting CSS styles into pages:

1. Custom Styles: Add CSS style rules to pages by creating style tags with the provided CSS content.

Implementation

@generates

The module should export a class PageEnhancer with the following methods:

• injectPrePageScript(page, scriptFunction): Injects a JavaScript function that will run before page scripts load. The function should persist across navigations.
• injectExternalScript(page, scriptUrl): Adds an external script from the given URL to the page.
• injectInlineScript(page, scriptContent): Adds inline JavaScript code to the page.
• injectStyles(page, cssContent): Adds CSS styles to the page.

Test Cases

Pre-page Script Injection

• Given a browser page, when a global variable is set via pre-page script injection before navigating to a page, then the variable should be accessible in the page context @test

External Script Injection

• Given a browser page, when an external script URL is injected, then a script tag with that URL should exist in the page DOM @test

Inline Script Injection

• Given a browser page, when inline JavaScript code is injected that defines a function, then that function should be callable from the page context @test

Style Injection

• Given a browser page, when CSS styles are injected that change the background color, then the computed style should reflect the injected color @test

API

/**
 * A utility for enhancing web pages with custom scripts and styles.
 */
class PageEnhancer {
  /**
   * Injects a JavaScript function that runs before any page scripts load.
   * This injection persists across page navigations.
   *
   * @param {Page} page - The Puppeteer page object
   * @param {Function} scriptFunction - The function to inject
   * @returns {Promise<void>}
   */
  async injectPrePageScript(page, scriptFunction) {
    // IMPLEMENTATION HERE
  }

  /**
   * Adds an external JavaScript file to the page by creating a script tag.
   *
   * @param {Page} page - The Puppeteer page object
   * @param {string} scriptUrl - The URL of the external script
   * @returns {Promise<void>}
   */
  async injectExternalScript(page, scriptUrl) {
    // IMPLEMENTATION HERE
  }

  /**
   * Adds inline JavaScript code to the page by creating a script tag.
   *
   * @param {Page} page - The Puppeteer page object
   * @param {string} scriptContent - The JavaScript code to inject
   * @returns {Promise<void>}
   */
  async injectInlineScript(page, scriptContent) {
    // IMPLEMENTATION HERE
  }

  /**
   * Adds CSS styles to the page by creating a style tag.
   *
   * @param {Page} page - The Puppeteer page object
   * @param {string} cssContent - The CSS rules to inject
   * @returns {Promise<void>}
   */
  async injectStyles(page, cssContent) {
    // IMPLEMENTATION HERE
  }
}

module.exports = { PageEnhancer };

Dependencies { .dependencies }

puppeteer-core { .dependency }

Provides browser automation and page manipulation capabilities.