fix: improve payment autofill and browser integration by hoangsvit · Pull Request #25 · ePlus-DEV/payment-sandbox-helper

hoangsvit · 2026-07-22T00:20:39Z

What changed

inject the autofill content script into matching payment iframes, including related about:blank, blob: and origin-fallback frames
support open shadow roots and additional Stripe/payment field selectors
improve expiry month/year select matching and React-compatible input events
target the exact iframe for context-menu field fills
use saved cardholder name and country for context-menu cards
replace the unreliable Chrome side-panel enable/disable toggle with the native action behavior
rebuild context menus safely when the extension background starts
replace Math.random() in generated card data with Web Crypto and unbiased rejection sampling
remove the duplicate Corepack step and validate both Chrome and Firefox builds in CI

Root causes

Payment providers commonly isolate card fields inside cross-origin iframes. The previous content script only ran in the top frame, so Stripe Elements and PayPal hosted fields were often skipped. Individual context-menu fills were also broadcast to every frame instead of the frame where the user clicked.

The Chrome toolbar action attempted to close the side panel by disabling and immediately re-enabling it, which is not a reliable close operation.

Validation

TypeScript type check: passed
Chrome WXT build: passed
Firefox WXT build: passed
CodeQL insecure-randomness feedback: fixed and review thread resolved

Summary by CodeRabbit

New Features
- Improved payment form filling across embedded frames, shadow-root fields, inputs, textareas, and varied layouts.
- Added cardholder name and country support, including context-menu updates.
- Enhanced expiry handling for separate month/year inputs and normalized select matching.
Bug Fixes
- Improved field validation, event dispatch, and handling of disabled or read-only fields.
- Increased reliability when targeting payment forms in different frames.
Chores
- Updated CI with separate Chrome/Firefox builds and downloadable type-check logs on failure.

coderabbitai · 2026-07-22T00:20:51Z

📝 Walkthrough

Walkthrough

The extension now supports persisted cardholder fields, frame- and shadow-root-aware autofill with structured results, cryptographically generated card data, and refactored context-menu handling. CI adds concurrency control, failure logs, and separate Chrome and Firefox builds.

Changes

Extension autofill behavior

Layer / File(s)	Summary
Cryptographic card-data generation `utils/cards.ts`, `entrypoints/sidepanel/App.tsx`	Card number, CVV, expiry, and Luhn filler generation now use cryptographic random integers and updated access methods.
Frame-aware form filling `entrypoints/content.ts`	Content scripts validate messages, traverse shadow roots, support inputs, textareas, and selects, and return filled-field results.
Context-menu card integration `entrypoints/background.ts`	Context-menu actions load persisted name and country values, target selected frames, persist name updates, and initialize menus and sidebar behavior.

CI workflow execution

Layer / File(s)	Summary
CI concurrency and build checkpoints `.github/workflows/ci.yml`	CI cancels superseded runs, uploads type-check logs on failure, and builds Chrome and Firefox separately.

Estimated code review effort: 4 (Complex) | ~45 minutes

Sequence Diagram(s)

sequenceDiagram
  participant BrowserContextMenus
  participant Background
  participant Storage
  participant ContentScript
  participant PaymentFrame
  BrowserContextMenus->>Background: select card action with frameId
  Background->>Storage: load cardholder name and country
  Background->>ContentScript: send fillCard to selected frame
  ContentScript->>PaymentFrame: find fields across document and shadow roots
  PaymentFrame-->>ContentScript: filled field count
  ContentScript-->>Background: structured FillResult

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly and concisely describes the pull request's main changes to payment autofill and browser integration.

✨ Finishing Touches

📝 Generate docstrings

Create stacked PR
Commit on current branch

🧪 Generate unit tests (beta)

Create PR with unit tests
Commit unit tests in branch agent/fix-autofill-and-sidepanel

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands.}

qodo-code-review · 2026-07-22T06:25:43Z

Qodo reviews are paused for this user.

Troubleshooting steps vary by plan Learn more →

On a Teams plan?
Reviews resume once this user has a paid seat and their Git account is linked in Qodo.
Link Git account →

Using GitHub Enterprise Server, GitLab Self-Managed, or Bitbucket Data Center?
These require an Enterprise plan - Contact us
Contact us →

coderabbitai

Actionable comments posted: 2

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In @.github/workflows/ci.yml:
- Around line 40-49: Update the typecheck step running yarn compile so failures
remain visible when output is piped through tee typecheck.log. Configure the
step with bash pipefail behavior, using shell: bash or an equivalent set -o
pipefail command, while preserving the existing log artifact upload flow.

In `@entrypoints/content.ts`:
- Around line 250-253: Normalize card.expiry to the combined input’s required
MM/YY format in the expiryEl branch before calling fillInputAsync. Use the
existing expiry value’s month and year components, reducing a four-digit year to
its final two digits while preserving already-normalized values, then pass the
normalized value to fillInputAsync and retain the existing filledFields
behavior.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

Push a commit to this branch (recommended)
Create a new PR with the fixes

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 6bb5cdbb-720b-4ce3-b176-11e09efb2049

📥 Commits

Reviewing files that changed from the base of the PR and between 169042d and e87cba0.

📒 Files selected for processing (4)

.github/workflows/ci.yml
entrypoints/background.ts
entrypoints/content.ts
utils/cards.ts

hoangsvit · 2026-07-30T13:12:43Z

Automation update:

Fixed the CI type-check step so yarn compile 2>&1 | tee typecheck.log preserves the compiler exit code (shell: bash, commit 921f65a).
Resolved the corresponding review thread.
The corrected CI now exposes pre-existing TypeScript errors that the previous pipeline masked:
- entrypoints/content.ts:170 — root is possibly undefined.
- entrypoints/sidepanel/App.tsx:94,133 — string | undefined passed where string is required.
- utils/cards.ts:20,22,30,68 — possible undefined array/string values.
CI run: https://github.com/ePlus-DEV/payment-sandbox-helper/actions/runs/30545806260

A separate unresolved review item remains in entrypoints/content.ts: normalize combined expiry values from MM/YYYY to MM/YY. No additional code was pushed in this run because the newly revealed type errors require a coordinated verification pass across three source files.

coderabbitai

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@entrypoints/sidepanel/App.tsx`:
- Line 132: Replace the local generateCardNumber()/generateLuhn() flow in the
side-panel card-row generation, JCB regeneration, and error-test-card copy paths
with the exported card-number helper from utils/cards.ts. Remove the duplicated
Math.random-based generator and reuse the shared helper consistently for all
generated card values.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

Push a commit to this branch (recommended)
Create a new PR with the fixes

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 93fb9005-9218-43e2-b0e9-d073e304f4e6

📥 Commits

Reviewing files that changed from the base of the PR and between 921f65a and 54cb7b5.

📒 Files selected for processing (3)

entrypoints/content.ts
entrypoints/sidepanel/App.tsx
utils/cards.ts

🚧 Files skipped from review as they are similar to previous changes (2)

utils/cards.ts
entrypoints/content.ts

hoangsvit added 4 commits July 22, 2026 07:18

fix: improve autofill across payment frames

a79248c

fix: stabilize side panel and context menu fills

bd768e6

ci: validate Chrome and Firefox builds

1b6e4ff

fix: keep background types browser-agnostic

2c1887a

github-advanced-security Bot found potential problems Jul 22, 2026

View reviewed changes

Comment thread entrypoints/background.ts Fixed

hoangsvit added 3 commits July 22, 2026 07:21

fix: avoid duplicate context menu initialization

9333807

ci: preserve typecheck errors for debugging

72deb87

fix: use secure randomness for generated card data

e87cba0

hoangsvit marked this pull request as ready for review July 22, 2026 06:25

coderabbitai Bot reviewed Jul 22, 2026

View reviewed changes

Comment thread .github/workflows/ci.yml

Comment thread entrypoints/content.ts

fix(ci): preserve typecheck failures through tee

921f65a

hoangsvit and others added 5 commits July 31, 2026 14:46

fix: normalize expiry and satisfy strict type checks

f3184b7

fix: make secure card helpers type-safe

96e9b02

chore: add temporary PR patch workflow

6d6a2c0

fix: satisfy strict sidepanel type checks

2fdff14

chore: remove temporary PR patch workflow

54cb7b5

coderabbitai Bot reviewed Jul 31, 2026

View reviewed changes

Comment thread entrypoints/sidepanel/App.tsx

Navigation Menu

Uh oh!

fix: improve payment autofill and browser integration - #25

fix: improve payment autofill and browser integration#25
hoangsvit wants to merge 13 commits into
mainfrom
agent/fix-autofill-and-sidepanel

hoangsvit commented Jul 22, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

coderabbitai Bot commented Jul 22, 2026 •

edited

Loading

Walkthrough

Changes

Sequence Diagram(s)

Uh oh!

Uh oh!

qodo-code-review Bot commented Jul 22, 2026

Uh oh!

coderabbitai Bot left a comment

Uh oh!

Uh oh!

Uh oh!

hoangsvit commented Jul 30, 2026

Uh oh!

coderabbitai Bot left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Conversation

hoangsvit commented Jul 22, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What changed

Root causes

Validation

Summary by CodeRabbit

Uh oh!

coderabbitai Bot commented Jul 22, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Sequence Diagram(s)

Uh oh!

Uh oh!

qodo-code-review Bot commented Jul 22, 2026

Qodo reviews are paused for this user.

Uh oh!

coderabbitai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

hoangsvit commented Jul 30, 2026

Uh oh!

coderabbitai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

hoangsvit commented Jul 22, 2026 •

edited by coderabbitai Bot

Loading

coderabbitai Bot commented Jul 22, 2026 •

edited

Loading