Function modifyStyle

browse/src/cdp-inspector.ts:495–607

(
  page: Page,
  selector: string,
  property: string,
  value: string
)

 * Uses CSS.setStyleTexts in headed mode, falls back to inline style in headless.
 */
export async function modifyStyle(
  page: Page,
  selector: string,
  property: string,
  value: string
): Promise<StyleModification> {
  // Validate CSS property name
  if (!/^[a-zA-Z-]+$/.test(property)) {
    throw new Error(`Invalid CSS property name: ${property}. Only letters and hyphens allowed.`);
  }

  // Validate CSS value — block data exfiltration patterns
  const DANGEROUS_CSS = /url\s*\(|expression\s*\(|@import|javascript:|data:/i;
  if (DANGEROUS_CSS.test(value)) {
    throw new Error('CSS value rejected: contains potentially dangerous pattern.');
  }

  let oldValue = '';
  let source = 'inline';
  let sourceLine = 0;
  let method: 'setStyleTexts' | 'inline' = 'inline';

  try {
    // Try CDP approach first
    const session = await getOrCreateSession(page);
    const result = await inspectElement(page, selector);
    oldValue = result.computedStyles[property] || '';

    // Find the most-specific matching rule that has this property
    let targetRule: InspectorResult['matchedRules'][0] | null = null;
    for (const rule of result.matchedRules) {
      if (rule.userAgent) continue;
      const hasProp = rule.properties.some(p => p.name === property);
      if (hasProp && rule.styleSheetId && rule.range) {
        targetRule = rule;
        break;
      }
    }

    if (targetRule?.styleSheetId && targetRule.range) {
      // Modify via CSS.setStyleTexts
      const range = targetRule.range as any;

      // Get current style text
      const styleText = await session.send('CSS.getStyleSheetText', {
        styleSheetId: targetRule.styleSheetId,
      });

      // Build new style text by replacing the property value
      const currentProps = targetRule.properties;
      const newPropsText = currentProps
        .map(p => {
          if (p.name === property) {
            return `${p.name}: ${value}`;
          }
          return `${p.name}: ${p.value}`;
        })
        .join('; ');