Page Proxy

Description

Proxy and restyle pages with an extension-based UI. Restyle and reskin webpages with a powerful set of developer tools. Page Proxy is an all-in-one userscript manager and creator with custom GUI tools and an API covering common use cases to convert page interactions to userscripts, making the process more beginner-friendly and less tedious. There's a help button in the extension which contains known issues and usage tips. Back up your scripts often! The extension is still very unstable. Supported browsers Tested on Chrome, Brave, Firefox Use other Chromium or Firefox-based browsers at your own risk Features: Select tool Click any element on the page to inspect it in the sidepanel. The tool shows the element's tag, id, class, selector path, and bounding box. From there you can: Navigate up to the parent element. Copy the element's selector as a pp API call or as a plain CSS selector. Apply a style to the element via a popup. Click, copy, cut, paste, or delete the element directly from the panel. Follow the DevTools-selected element when the browser DevTools panel is open. Record tool Record a timeline of interactions on the active tab, then convert them to code without writing anything by hand: Start recording — the tool captures events as a scrollable timeline. Select the events you want (click, drag-select, or select all). Open the review popup — your selection is converted to editable code. Save the result back to the code editor. Code editor A Monaco-powered editor for writing and running userscripts. Powered by tools that save to the editor, and also the pp scripting API. pp scripting API Scripts import from the pp library, which provides six modules covering usage patterns commonly found in userscripts: pa: Page-level helpers: in-page notifications with object viewer, markdown rendering, node movement pn: Network: fetch wrapper with optional response caching and method helpers (get, post, etc.) pq: DOM querying: reusable selector builders, match helpers (innerTextMatches, bboxMatches, etc.), parent traversal ps: Style helpers: applyStyle for inline styles, injectCSS for deduped stylesheet injection pt: Script-scoped storage: getItem/setItem backed by local storage, scoped per script pv: Events: DOM mutation observers, key-combo listeners (onKeyPressed), pressKey, sleep, awaitAnimation Other Layer custom CSS and JavaScript on top of any website without touching its source. Selectors tool: view, highlight matches for, and edit all active selectors from a single panel. Selector definitions are parsed directly from editor content and displayed in the tool window for convenience. Create tool (currently coming soon): insert new elements into the page from the sidepanel. Export tool: export the current script as a Page Proxy script, Tampermonkey userscript, or CSS-only stylesheet from the sidepanel.

Details & SEO