Did a huge storage refactor.

The main problem with the current code is that upon any action that changes options, a callback must be called to update the field in storage. A similar callback must be implemented for each option upon load. This process is quite tedious, and it also makes the codebase littered with storage calls.

I fixed this by using one central appState variable that defines a schema for the save format, and used a $effect to sync the storage whenever certain variables in appState changed.

But this kinda broke everything, so I had to go around fixing bugs for multiple hours.

Anyway, if you’re reading this, here’s a short userscript to add spacing between the paragraphs of a devlog:

import { pa, pn, pq, ps, pt, pv } from "@page-proxy/pp";

// ==Page Proxy==
// @title Add space after paragraph
// @website https://*.hackclub.com/projects/*
// @description Add space after paragraph to devlogs and ship messages
// @author orangishcat
// @grant run-on-page-load
// ==/Page Proxy==

// ==Selectors==
ps.injectCSS(`
div.post__body p
{
margin: 0.85rem 0;
}
div.post__body li
{
  margin: 0.5rem 0;
}
`);
 
// ==/Selectors==

And here it is in Tampermonkey format:

// ==UserScript==
// @name Add space after paragraph
// @match https://*.hackclub.com/projects/*
// @description Add space after paragraph to devlogs and ship messages
// @version 0.1.0
// @author orangishcat
// @run-at document-start
// @require https://orangishcat.github.io/page-proxy/pp/pp.min.js
// ==/UserScript==

// ==Selectors==
ps.injectCSS(`
div.post__body p
{
margin: 0.85rem 0;
}
div.post__body li
{
  margin: 0.5rem 0;
}
`);
// ==/Selectors==

I’ve attached a side-by-side comparison.(left = before, right = after).

Added a settings tool panel.

This controls settings for scripts running on the current tab (top) and also extension settings (bottom). Currently the only extension setting is showing the help tool. Since I’m running out of space and the help tool isn’t all that useful once you’ve used the extension for more than like 5 minutes, it’s the first one to be able to be turned off.

The keybinds are now a bit weird though. Originally it was Shift+1 to Shift+5 from left to right, and now it still is, but the help tool has no keybind since it can’t be turned off, and shifting the keybinds based on whether the help tool appears or not would be a bad idea.

I also want to add some labels differentiating tab settings vs extension settings, but right now I still haven’t figured out how to make them look good.

I also added a @version metadata field that is preserved upon Tampermonkey export. Defaults to 0.1.0 if not present.

Released v0.3.8 today. Just some polish and QOL features.

• Script minification (using terser and css-tree) to minify exported scripts
• Disable all grants button: prevents all scripts from using grants temporarily (basically preventing any scripts from running on page load, as that’s the only grant)
• Export tool UI polish. There’s only a small difference but I think it makes the UI clearer.
• More internal refactors, again. I have to do this often as AI writes code pretty quickly, but I think that’s just a byproduct of faster development. If I wrote everything by hand, I would still have to do refactors anyway, but instead I would just put them off for eternity.

I released v0.3.7, making some convenient API changes, bug fixes, and most importantly, finally getting export to Tampermonkey to work. The current setup is to get Tampermonkey to load the pp library from a url hosted on the demo page for my extension.

The pp library is built into JS via a script which I run manually every time I release a version, and it literally just injects globals into the script. The setup is mildly cursed but I can’t think of anything better right now. Surely this won’t just remain in the codebase forever, just like all my other temporary fixes…

Look! I’m running a Page Proxy script in Tampermonkey!

Painfully updated documentation 😭

This involved manually screenshotting each component and cropping them and filling the unwanted edges in with transparency.

And no, “Capture node screenshot” in DevTools does not set the contents behind the node to transparent, so the background is captured inside of the screenshot. And it doesn’t work in an extension’s sidepanel either.

Did a lot of polish to the website. Also added a nice undo button that pops from the recording stack and selects the element that was selected in the previous stack.

Finally added support for multiple scripts running on the same tab! Previously, the editor would just load the script that was created earlier, which was really annoying as you would have to navigate to a different tab to edit another script. Now there is just a nice dropdown.

Of course, I also updated the documentation and fixed bugs, as usual.

Added a feature list to the demo! (which took forever, as usual.) Also made a lot of fixes to the website UI, enforcing consistent margins and padding and whatnot, also cleaning up some of the website code.

I finally have a landing page demo now. It took forever but hopefully it was worth it?

Recording tool, probably the most important of them all. Allows you to convert actions you would normally do in DevTools into code.

Also reorganized the entire project, splitting many files.

Lots and lots of polishing and fixes. There’s much more documentation and help links now, so hopefully the product will be a lot easier to use.

Made a few tweaks to documentation and UI.

I worked on documentation, export tool, demo website, and lots more; mostly polishing and stuff for the past few days.

This was supposed to be an easy project, and now I have 40 hours on it…

Just a few more final tests, and I’ll get a first ship out to get some payout. Features are limited but I don’t have time for everything.

The extension is mostly ready for a first ship. Also Monaco editor yay!

The website still has a long way to go, though…

Added this panel that allows you to match elements in many ways

UI implementation is finally done, I can finally begin implementing functionality

Only took nearly 20 hours

I wanted most of the functionality to be in the website, but CORS just doesn’t work like that. Oh well, I guess I’m developing a Chrome/Firefox extension now (using WXT).

Here’s the design.

Main app layout implemented and finalized, would look something like this

Designed the main app in Figma. Progress is slow, but I hope I’ll get better at it.

Designing is actually kinda fun. Previously I made websites by jumping straight into the coding without planning, and the end result was not what I had imagined at all. Using Figma though, this design already looks way better than what I had originally planned, and unlike before, I am actually excited this time to implement this design in code.

Haven’t written much code yet, but I have created some basic wireframes and components