CONFIGURATION_GUIDE.md

AWS Pricing Helper - Configuration Guide

This guide explains how to add new AWS service configurations to the extension.

Configuration Structure

Each AWS service configuration is defined in the config.js file with the following structure:

serviceKey: {
  name: "Service Display Name",
  location: {
    pattern: "URL pattern to match",
    hash: "URL hash to match (optional)"
  },
  pricing: {
    // Pricing information - can be any key-value pairs
    standardPrice: "$10/month",
    premiumPrice: "$50/month",
    source: "https://aws.amazon.com/service/pricing/"
  },
  action: {
    type: "click", // Currently only "click" is supported
    selectors: [
      // Array of CSS selectors to find the target element
      'button[data-testid="create-button"]',
      'input[type="checkbox"]'
    ],
    fallbackText: "create" // Optional: text to search for if selectors fail
  },
  message: {
    title: "💰 Cost of this service:",
    items: [
      { label: "Standard:", value: "standardPrice" },
      { label: "Premium:", value: "premiumPrice" }
    ]
  }
}

Adding a New Service

Step 1: Identify the Target Page

1. Navigate to the AWS console page where you want to show pricing
2. Note the URL pattern and any hash fragments
3. Identify the element that triggers the action (button, checkbox, etc.)

Step 2: Add Configuration

Add a new entry to the AWS_PRICING_CONFIG object in config.js:

// Example: Adding RDS database creation
rds: {
  name: "RDS Database",
  location: {
    pattern: "console.aws.amazon.com/rds/home",
    hash: "#database:create"
  },
  pricing: {
    dbInstance: "$0.017 per hour",
    storage: "$0.10 per GB-month",
    source: "https://aws.amazon.com/rds/pricing/"
  },
  action: {
    type: "click",
    selectors: [
      'button[data-testid="create-database"]',
      'button:contains("Create database")'
    ],
    fallbackText: "create database"
  },
  message: {
    title: "💰 Database costs:",
    items: [
      { label: "DB Instance:", value: "dbInstance" },
      { label: "Storage:", value: "storage" }
    ]
  }
}

Step 3: Update Manifest

Add the new URL pattern to the matches array in manifest.json:

"matches": [
  "https://*.console.aws.amazon.com/acm/home*",
  "https://*.console.aws.amazon.com/ec2/home*",
  "https://*.console.aws.amazon.com/rds/home*"
]

Configuration Options

Location Matching

• pattern: Required. String that must be present in the URL
• hash: Optional. URL hash fragment that must be present

Pricing Information

• Can contain any key-value pairs
• Values are displayed in the message using the items array
• Must include a source field with the pricing URL

Element Selection

• selectors: Array of CSS selectors to find the target element
• fallbackText: Optional text to search for in nearby elements if selectors fail
• The extension will try each selector in order until it finds a match

Message Customization

• title: The main heading for the pricing message
• items: Array of objects with label and value properties
• value must match a key in the pricing object

Examples

Simple Button Click

simpleService: {
  name: "Simple Service",
  location: {
    pattern: "console.aws.amazon.com/simple/home"
  },
  pricing: {
    cost: "$5/month",
    source: "https://aws.amazon.com/simple/pricing/"
  },
  action: {
    type: "click",
    selectors: ['button[data-testid="create"]']
  },
  message: {
    title: "💰 Service cost:",
    items: [
      { label: "Monthly cost:", value: "cost" }
    ]
  }
}

Multiple Pricing Tiers

tieredService: {
  name: "Tiered Service",
  location: {
    pattern: "console.aws.amazon.com/tiered/home"
  },
  pricing: {
    basic: "$10/month",
    pro: "$25/month",
    enterprise: "$100/month",
    source: "https://aws.amazon.com/tiered/pricing/"
  },
  action: {
    type: "click",
    selectors: ['button:contains("Start")']
  },
  message: {
    title: "💰 Pricing tiers:",
    items: [
      { label: "Basic:", value: "basic" },
      { label: "Pro:", value: "pro" },
      { label: "Enterprise:", value: "enterprise" }
    ]
  }
}

Testing

1. Add your configuration to config.js
2. Update manifest.json with the new URL pattern
3. Reload the extension in Chrome
4. Navigate to the target AWS page
5. Click the configured element to test the pricing message

Troubleshooting

• Check the browser console for debug messages
• Verify that the URL pattern matches exactly
• Ensure the CSS selectors are correct
• Test the selectors in the browser's developer tools
• Use the fallbackText option if selectors are unreliable