Thanks for taking the time. This is a small, dependency-free project and the bar for a good contribution is mostly "it is easy to review".
git clone https://github.com/css-scroll-driven/view-transition-debugger.git
cd view-transition-debugger
node --test "tests/*.test.js"That is the whole setup. There is no install step, no bundler, and no dependencies — Node is needed only to run the tests.
To try your change in the browser: load the folder unpacked from
chrome://extensions with Developer mode on, run the demo with
python3 -m http.server 8000 --directory test-page, and exercise the panel
against the pages there. After editing, press the reload icon on the extension's
card, then reload the inspected page and reopen DevTools.
Please include:
- Your Chrome version (from
chrome://version). - Whether the transition is same-document or cross-document.
- A minimal page that reproduces it, or the relevant part of the recorded transition from the panel.
- What the panel showed versus what you expected.
Missing or wrong findings are especially useful reports — the rules are heuristics and they will have blind spots.
- Open an issue first for anything larger than a bug fix, so we can agree on the approach before you write it.
- Branch from
master. - Keep the change focused. A pull request that fixes one thing gets merged; one that fixes one thing and reformats four files does not.
- Add tests. Any logic that can be a pure function in
lib/should be, and should come with cases intests/. - Run
node --test "tests/*.test.js"before pushing. All tests must pass. - Update
CHANGELOG.mdunder an Unreleased heading, and update the README if you changed behaviour, a threshold, a rule, or the message protocol.
These are the rules that are easy to break by accident:
- Content scripts must stay classic scripts.
injected/instrument.jsandcontent/bridge.jscannot useimportorexport— MV3 injects them as classic scripts. A test enforces this. Extension pages (panel/,devtools/) may use ES modules freely. lib/must stay pure. No DOM, nochrome.*, no globals beyond standard JavaScript, so everything there runs undernode --test.- The protocol constants are duplicated on purpose. If you change a message
type in
lib/protocol.js, change the matching literal inside the>>> PROTOCOLblock ininjected/instrument.js. A test fails if they drift. - The instrumentation must never break the page it observes. Wrap anything that can throw. Never change what a page-visible promise resolves or rejects with. The invariants are listed in the comment above the patch — read them before touching it.
- Never build DOM from strings in the panel. Record content comes from an
untrusted page. Use
textContentand element creation, as the existing helpers do. - Two-space indentation, semicolons, single quotes in JavaScript.
- Write the rule as a pure function in
lib/findings.jstaking a record and returning an array of findings. - Add its id to
RULE_IDS. TheRULE_IDS matches the rules that can actually firetest will fail until the rule can be triggered by a record. - Give it a
learnMoreURL from theDOCSmap. - Add tests: one case where it fires, one just under the threshold where it does not, and one for malformed input.
- Add a row to the finding-rule table in
README.md. - If possible, plant a reproduction in
test-page/broken.html.
By contributing you agree that your contribution is licensed under the MIT License.