WebForge Toolkit Help Center

JSON Formatter

1. Paste JSON into Input.
2. Select Format for indented output, Validate for syntax status, or Fix for repair plus formatting.
3. Review repaired output before production use and select Copy.

{name:'WebForge',enabled:true,}

{
  "name": "WebForge",
  "enabled": true
}

Fix is a convenience helper. Ambiguous or structurally incomplete JSON cannot always be repaired correctly.

XML Formatter

1. Paste XML.
2. Select Validate to locate syntax errors.
3. Select Format for readable indentation or Fix for a repair attempt.
4. Copy and review the result.

<order><id>391</id><active>true</active></order>

<order>
  <id>391</id>
  <active>true</active>
</order>

Examples include SOAP envelopes, configuration files, RSS fragments, SVG markup, and application payloads.

CSV / Excel Converter

1. Select a conversion direction.
2. Paste table data or a JSON array.
3. Select Convert.
4. Copy the generated result.

id,name,active
391,West,true
392,East,false

[
  {"id":"391","name":"West","active":"true"},
  {"id":"392","name":"East","active":"false"}
]

This is a paste-based converter. It does not parse native XLSX workbook files.

Webpage Export

1. Open the source webpage.
2. Select Webpage export and choose Markdown, Text, or PDF.
3. Select Capture current page.
4. Review the preview.
5. Select Export or Copy.

# Product Guide

Source: https://example.com/guide

## Installation
Install the package...

Product Guide
https://example.com/guide

Installation
Install the package...

Image Extractor

1. Open the source page.
2. Select Extract images.
3. Review thumbnail, dimensions, type, and URL.
4. Choose HTML Gallery, JSON, or CSV.
5. Select Export, or copy all image URLs.

The exporter records references and metadata. Cross-origin restrictions, lazy loading, authorization, or expired signed URLs can prevent later image access.

JWT Toolkit

1. Paste a three-part JWT.
2. Select Decode to inspect alg, claims, iat, nbf, and exp.
3. For an HS256 token, enter the secret and select Verify HS256.
4. Copy decoded JSON if needed.

Header:  {"alg":"HS256","typ":"JWT"}
Payload: {"sub":"user-391","role":"admin","exp":1783758600}

Decoding does not establish trust. Never accept authorization claims until the signature, expected algorithm, issuer, audience, and time constraints are verified by the receiving application.

URL Toolkit

1. Paste an absolute URL or text.
2. Select Parse URL, Encode component, or Decode component.
3. For UTM, provide source, medium, campaign, and optional content/term, then select Build UTM URL.

https://example.com/search?q=web+tools#results
origin: https://example.com
path: /search
query.q: web tools
hash: #results

Input: order id/391
Output: order%20id%2F391

https://example.com/launch?
utm_source=newsletter&
utm_medium=email&
utm_campaign=summer

Encoding & Crypto

1. Select an operation.
2. Enter input text.
3. For HMAC, enter a secret.
4. Select Run and copy the result.

Hashing is not encryption. Base64 is encoding, not security. Do not paste production secrets into devices you do not control.

Text / JSON Diff

1. Select Text diff or Semantic JSON diff.
2. Paste original and changed values.
3. Select Compare.
4. Read - removed, + added, and ~ changed lines.

~ $.user.role: "viewer" -> "admin"
+ $.user.permissions[0]: "write"
- $.legacyFlag: true

Regex Tester

1. Enter a pattern without surrounding slashes.
2. Enter flags such as g, i, m, or u.
3. Paste test text and optionally enter replacement text.
4. Select Test.

Pattern: order-(?<id>\d+)
Flags: gi
Text: Order-391 and order-449
Matches: 2; named group id = 391, 449
Replacement: ticket-$<id>

Code Formatter

1. Select language and action.
2. Paste source.
3. Select Run and review the output.
4. Use Copy output.

Secure Value Generator

1. Select output type.
2. Set length and count. UUID length is fixed by the format.
3. Select Generate and copy the values.

UUID:      0f4b54a0-15ae-45b0-9b2d-f9771fdd0d16
Hex:       9ca37f1034e2a9bf
Base64URL: GMN7qaRF8K5L8_2y
Password:  xA7@d9Q_m4P#2sL!

Performance

1. Reload the target page for complete performance entries.
2. Choose Performance and analyze.
3. Review blocking and duplicate signals first, then the longest/largest resources.

DOM nodes: 2,840
Resources: 118
Transfer: 3.2 MB
Blocking assets: 7
Duplicate: /assets/config.json requested 3 times

This is a quick browser snapshot, not a substitute for Chrome Lighthouse or a controlled lab/field performance study.

Accessibility Checker

1. Choose Accessibility.
2. Analyze the current rendered state.
3. Review high and medium findings and verify each manually with keyboard and assistive technology.

HIGH: Image missing alt
MEDIUM: Form control missing label
MEDIUM: Heading level skipped (H2 -> H4)
MEDIUM: Low text contrast (ratio 2.83:1)

Automated checks find only part of WCAG conformance. Manual keyboard, zoom, screen-reader, content, focus-order, and task-flow testing remains necessary.

Browser Storage

1. Choose Browser storage.
2. Analyze the active page.
3. Search the rendered records visually and export only when appropriate.

Cookie: session_id
Secure: true
HttpOnly: true
SameSite: lax
Expires: Session

Storage and cookies can contain authentication or personal data. Do not export or share values without authorization.

CSP & CORS

1. Reload the page so response headers can be observed.
2. Choose CSP & CORS and analyze.
3. Review missing and warning cards.

Content-Security-Policy:
default-src 'self'; script-src 'self' https://cdn.example.com

Access-Control-Allow-Origin:
https://admin.example.com

The main document's CORS headers do not describe every API response. Inspect the relevant API request in Network Inspector for endpoint-specific behavior.

HTML Table Extractor

1. Choose HTML tables and analyze.
2. Review each detected table.
3. Select Export for JSON plus CSV.

Store ID,Name,Status
391,West,Active
449,Central,Inactive

Virtualized grids built entirely from div elements are not HTML tables and may not be detected.

Link Checker

1. Choose Link checker.
2. Analyze and wait while selected destinations respond.
3. Review Failed, 4xx, and 5xx results and duplicate counts.

200 internal /account
301 external https://docs.example.com/old
404 internal /missing-page
Skipped mailto:support@example.com

A protected endpoint may reject extension-origin requests even when it works during normal navigation. Link checking makes real requests to the listed destinations.

Shared HTTP client behavior

1. Select REST, GraphQL, SOAP, Webhook, Kafka REST, Redis HTTP, or OpenAPI.
2. Enter name, method, URL, headers, authentication, variables, and body.
3. Use {{name}} placeholders in URL, headers, auth, or body.
4. Select Send, Generate cURL, or Save request.
5. Review status, duration, response size, headers, and formatted response body.

Header examples

{
  "Accept": "application/json",
  "X-Tenant": "west"
}

Accept: application/json
X-Tenant: west

Authentication examples

Variables

Variables: {"baseUrl":"https://api.example.com","storeId":391}
URL:       {{baseUrl}}/v2/stores/{{storeId}}
Resolved:  https://api.example.com/v2/stores/391

REST Client

Method: POST
URL: https://api.example.com/v2/orders
Headers: {"Content-Type":"application/json"}
Body: {"storeId":391,"items":[{"sku":"PIZZA-01","qty":1}]}

Common examples: health checks, CRUD APIs, configuration endpoints, test webhooks, and reproducing browser requests.

GraphQL Client

Query:
query Store($id: ID!) {
  store(id: $id) { id name active }
}

Variables:
{"id":"391"}

Use the shared Headers and Authentication fields for bearer tokens or custom tenant headers.

SOAP Client

<soap:Envelope xmlns:soap="http://schemas.xmlsoap.org/soap/envelope/">
  <soap:Body>
    <GetStore xmlns="https://example.com/store">
      <StoreId>391</StoreId>
    </GetStore>
  </soap:Body>
</soap:Envelope>

Add a SOAPAction header when required by the service.

Webhook Sender

URL: https://hooks.example.com/order
Auth: HMAC SHA-256
Auth value: X-Webhook-Signature: shared-secret
Body: {"event":"order.created","id":"ORD-391"}

The generated signature is the hexadecimal HMAC-SHA-256 of the exact body sent. Confirm the receiver expects the same encoding and signing format.

OpenAPI Client

1. Select OpenAPI.
2. Paste a JSON or YAML specification into the body area.
3. Select Parse OpenAPI.
4. Review discovered operations and use them to prepare saved requests.

{
  "openapi":"3.0.0",
  "info":{"title":"Store API","version":"1.0.0"},
  "paths":{"/stores/{id}":{"get":{"operationId":"getStore"}}}
}

The YAML scanner is intentionally basic and does not fully resolve references, schemas, security inheritance, examples, or every YAML construct.

WebSocket Client

1. Select WebSocket.
2. Enter the socket URL and select Connect.
3. Enter a message and select Send.
4. Review events, then Disconnect.

URL: wss://echo.example.com/socket
Message: {"type":"ping","sentAt":1720000000000}

RabbitMQ Client / STOMP

1. Enable RabbitMQ Web STOMP on the broker.
2. Enter WebSocket URL, login, passcode, and destination.
3. Connect, then Subscribe or Send.
4. Disconnect when finished.

URL: wss://broker.example.com/ws
Destination: /topic/orders
Message: {"orderId":"ORD-391","status":"READY"}

Native AMQP ports such as 5672 cannot be opened by a Chrome extension. A WebSocket STOMP endpoint is required.

Server-Sent Events

1. Choose GET stream when headers are required, or EventSource for a standard unauthenticated stream.
2. Enter URL and optional JSON headers.
3. Select Connect and review event name, ID, and data.
4. Select Disconnect to abort the stream.

event: order-status
id: 391
data: {"status":"READY"}

MQTT

1. Enter wss:// broker URL, client ID, and optional credentials.
2. Save the client if desired and select Connect.
3. Enter a topic and Subscribe.
4. Enter payload and Publish.
5. Disconnect when finished.

Broker: wss://broker.example.com:8084/mqtt
Topic: stores/391/orders
Payload: {"orderId":"ORD-391","status":"READY"}

The broker must expose MQTT over WebSocket and permit the extension origin. Native MQTT TCP ports cannot be used directly.

Elasticsearch

1. Enter and optionally save cluster base URL and auth.
2. Select Test for the root endpoint.
3. Choose method, enter path and optional JSON body.
4. Select Send and review formatted output.

GET /_cluster/health

POST /orders/_search
{"query":{"term":{"storeId":391}}}

Elasticsearch must permit direct browser/extension requests and provide a trusted TLS certificate.

Kafka REST Client

POST http://localhost:8082/topics/orders
Content-Type: application/vnd.kafka.json.v2+json

{"records":[{"key":"391","value":{"status":"READY"}}]}

Native Kafka protocol connections are not supported in Chrome. Configure and secure a REST proxy instead.

Redis HTTP Client

POST https://redis-gateway.example.com/command
Authorization: Bearer {{token}}

{"command":["GET","store:391:status"]}

Native Redis TCP connections are not supported. Endpoint path, authentication, and request shape depend on the selected gateway.

OAuth 2.0 Helper / PKCE

1. Enter authorization endpoint, client ID, redirect URI, scope, and state.
2. Select Generate PKCE.
3. Select Build authorization URL.
4. Review and select Open URL to navigate to the authorization server.

https://auth.example.com/authorize?
response_type=code&client_id=webforge-demo&
redirect_uri=https%3A%2F%2Fapp.example.com%2Fcallback&
scope=openid%20profile&code_challenge=...&
code_challenge_method=S256

The helper does not exchange codes using a confidential client secret. Token exchange requiring a secret belongs on a trusted backend.

Request Collections

1. Configure a request and select Save request.
2. Open Request collections to review saved entries.
3. Select Open to return to the request editor.
4. Export to JSON or import a WebForge collection file.

{
  "format":"webforge-request-collection",
  "version":1,
  "requests":[{"name":"Health","mode":"rest","method":"GET"}]
}

Authorization header values and the shared Auth value are redacted during export. Imported redacted credentials must be entered again.