Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
49 changes: 49 additions & 0 deletions .github/workflows/ci.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
name: CI

on:
pull_request:
push:
branches:
- main

permissions:
contents: read

concurrency:
group: ci-${{ github.event.pull_request.number || github.ref }}
cancel-in-progress: true

jobs:
validate:
runs-on: ubuntu-latest

steps:
- name: Check out repository
uses: actions/checkout@v4

- name: Set up Node
uses: actions/setup-node@v4
with:
node-version: "22"

- name: Run tests
run: npm test

- name: Run release checks
run: npm run check

- name: Package extension
run: npm run package

- name: Verify package artifact
run: npm run verify:package

- name: Upload verified package
if: github.event_name == 'push'
uses: actions/upload-artifact@v4
with:
name: dev-feedback-capture-${{ github.sha }}
path: |
dist/*.zip
dist/*.sha256
if-no-files-found: error
6 changes: 3 additions & 3 deletions .github/workflows/release.yml
Original file line number Diff line number Diff line change
Expand Up @@ -49,12 +49,12 @@ jobs:
run: npm run package

- name: Verify package artifact
run: test -f "$ZIP_PATH"
run: npm run verify:package -- "$ZIP_PATH"

- name: Publish GitHub Release
env:
GH_TOKEN: ${{ github.token }}
run: |
gh release create "$GITHUB_REF_NAME" "$ZIP_PATH" \
gh release create "$GITHUB_REF_NAME" "$ZIP_PATH" "$ZIP_PATH.sha256" \
--title "Dev Feedback Capture $GITHUB_REF_NAME" \
--notes-file CHANGELOG.md
--generate-notes
6 changes: 6 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,11 @@
# Changelog

## 1.3.0 (Unreleased)

- Added an extension-owned History page with filtering, item deletion, site clearing, and access to feedback from PDFs and non-injectable surfaces.
- Added downloadable JSON and self-contained HTML reports with embedded region images alongside copyable Markdown and AI Prompt exports.
- Updated public install and release metadata to reflect the published `v1.2.0` release.

## 1.2.0

- Added region capture for pages and browser-rendered PDFs.
Expand Down
13 changes: 9 additions & 4 deletions QUICKSTART.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,8 @@

Get Dev Feedback Capture running in a few minutes.

The latest published ZIP is v1.2.0. The extension-owned History page described below is currently available from the unreleased v1.3 source checkout.

## 1. Load the extension

1. Download the latest `dev-feedback-capture-v<version>.zip` asset from GitHub Releases.
Expand Down Expand Up @@ -34,11 +36,14 @@ Optional for local PDFs:

## 4. Export saved feedback

From the in-page history panel on injectable pages, you can copy:
Open the extension popup and select `Open History & Export`. This extension-owned page works for captures from normal pages, PDFs, and other surfaces where the in-page panel is unavailable. From History, you can:

- Download `JSON` for full payloads including crop image data
- Download a self-contained `HTML Report` with embedded region images
- Copy `Markdown` for issue trackers or docs
- Copy `AI Prompt` for ready-to-paste implementation instructions based on saved text and source context

- `JSON` for full payloads including crop image data
- `Markdown` for issue trackers or docs
- `AI Prompt` for a ready-to-paste numbered summary
AI Prompt is text-only. Its numbered crop references correspond to the embedded images in the companion HTML or JSON download.

## Need Help?

Expand Down
32 changes: 17 additions & 15 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,27 +2,28 @@

Dev Feedback Capture is a Chromium extension for collecting structured UI feedback from live pages, PDFs, and other browser-visible surfaces. It supports two capture modes:

> The source checkout contains the unreleased v1.3 History & Reliability work. The latest published download remains v1.2.0 until the v1.3 manual browser gate and release are complete.

- `Element` mode injects a lightweight in-page UI so you can click DOM elements and save selectors, styles, and notes.
- `Region` mode captures the visible viewport, opens a screenshot editor, and lets you draw a crop around any area, including browser-rendered PDFs.

All feedback stays local in extension storage and can be re-exported later as JSON, Markdown, or an AI-oriented prompt.
All feedback stays local in extension storage. Open the extension-owned History page from the popup to review captures, copy Markdown or implementation instructions, and download JSON or a self-contained HTML report.

## Features

- Element capture with selector, text, styles, and note metadata
- Region capture with cropped screenshot, viewport rectangle, and note metadata
- Works on arbitrary sites through explicit user-triggered activation
- PDF-friendly screenshot workflow for local and hosted PDFs
- Local history with re-export support
- JSON, Markdown, and AI prompt clipboard exports
- Draggable in-page history panel for injected pages
- Extension-owned History page that works even when the source page cannot accept injected UI
- Downloadable JSON and self-contained HTML reports with embedded region images
- Copyable Markdown and implementation-prompt exports
- Draggable in-page history panel for quick review on injectable pages

## Installation

### Latest Release ZIP

Use this path after the first GitHub Release has been published. Until then, use the source checkout path below.

1. Download the latest `dev-feedback-capture-v<version>.zip` asset from [GitHub Releases](https://github.com/StoneHub/webDevFeedbackExt/releases).
2. Unzip the file.
3. Open `chrome://extensions/` or `edge://extensions/`.
Expand Down Expand Up @@ -57,7 +58,7 @@ Use this path when developing the extension or reviewing source changes:
4. In the editor tab, drag a box over the screenshot.
5. Add your note and save it.

The cropped image, viewport rectangle, and source context are saved into the same page history as element captures.
The cropped image, viewport rectangle, and source context are saved into the same local history as element captures. Open `History` from the popup to review captures from any supported source, including PDFs and pages where Element mode is unavailable.

## Data Model

Expand All @@ -70,9 +71,10 @@ Older element-only captures are still loaded and normalized automatically.

## Export Formats

- `Copy JSON` includes the full saved payload, including region image data URLs.
- `Copy Markdown` creates a readable review document for issues or docs.
- `Copy AI Prompt` creates numbered instructions that refer to the saved crops in extension history.
- `Download JSON` includes the full saved payload, including region image data URLs.
- `Download HTML Report` creates a self-contained review with embedded region images.
- `Copy Markdown` creates a readable text review for issues or docs.
- `Copy AI Prompt` creates numbered, copy-ready implementation instructions from the saved text and source context. The numbered crop images are available in the companion HTML or JSON download.

## Permissions

Expand All @@ -96,9 +98,10 @@ The extension does not use static host permissions, always-on content scripts, t

- `manifest.json`: Manifest V3 configuration
- `background.js`: runtime injection and region-capture session orchestration
- `content.js`: in-page panel, element capture, exports, and history rendering
- `content.js`: in-page panel and element capture
- `capture.html` / `capture.js`: screenshot region selection editor
- `popup.html` / `popup.js`: mode switch and current-tab actions
- `popup.html` / `popup.js`: mode switch, current-tab actions, and History entry point
- `history.html` / `history.js`: extension-owned history review and exports
- `shared.js`: shared helpers, normalization, and export formatting
- `styles.css`: injected in-page UI styles

Expand All @@ -112,7 +115,7 @@ The extension does not use static host permissions, always-on content scripts, t

1. Confirm `package.json` and `manifest.json` versions match.
2. Run `npm test`, `npm run check`, and `npm run package`.
3. Create and push a matching tag such as `v1.2.0`.
3. Create and push a matching tag such as `v1.3.0`.
4. The release workflow builds `dist/dev-feedback-capture-v<version>.zip` and publishes it as a GitHub Release asset.

See [CHANGELOG.md](CHANGELOG.md) for release notes.
Expand All @@ -126,9 +129,8 @@ See [CHANGELOG.md](CHANGELOG.md) for release notes.

## Roadmap

- Export region crops as files instead of only embedding them in JSON
- Add full-page or multi-step PDF region capture
- Add import/export for saved histories
- Add import for saved histories
- Add optional provider-specific AI handoff after the provider/auth shape is defined

## License
Expand Down
Loading
Loading