Page MenuHomePhabricator

[Cashtab] Use typescript to build extension files instead of browserify
ClosedPublic

Authored by bytesofman on Jun 6 2025, 17:27.

Details

Summary

The extension is built with a legacy bundler, browserify, to preserve a file structure required for legacy extension dev. We can do the same thing with typescript, and we should, as it makes everything more maintainable.

Implement.

Test Plan

npm run extension builds, test extension locally

extension / browser interaction works as before, can test at https://components.cashtab.com/ (get address, open payments, etc)

Diff Detail

Repository
rABC Bitcoin ABC
Lint
Lint Not Applicable
Unit
Tests Not Applicable

Event Timeline

we do not need browserify installed globally to work on the extension

bytesofman published this revision for review.Jun 6 2025, 17:56
Fabien requested changes to this revision.Jun 6 2025, 22:24
Fabien added a subscriber: Fabien.
Fabien added inline comments.
cashtab/extension/src/service_worker.ts
137 ↗(On Diff #54388)

should be max(left, 0) ?

170 ↗(On Diff #54388)

same

This revision now requires changes to proceed.Jun 6 2025, 22:24
bytesofman added inline comments.
cashtab/extension/src/service_worker.ts
137 ↗(On Diff #54388)

one of the things that comes up from implementing typescript

getLastFocusedWindow() may return undefined, which was previously unhandled. In practice ... never seen it happen.

so the || 0 is handling an undefined case.

Here is what we are actually getting (when I perform an extension interaction)

console.log(lastFocused)
{
    "alwaysOnTop": false,
    "focused": true,
    "height": 972,
    "id": 1111000106,
    "incognito": false,
    "left": 1920,
    "state": "maximized",
    "top": 32,
    "type": "normal",
    "width": 1920
}

so, top is 32 and left works out to 3390

the result is cashtab extension opens on the right side of the screen, full height of the window, with width NOTIFICATION_WIDTH

We do not want 0 ever, it's just to make sure we get a valid number if for whatever reason getLastFocusedWindow() returns undefined. So in this case, we just get the window in the top left, instead of (maybe) a crash.

In general -- the extension stuff needs tests. But typescript at least catches this kind of thing.

...mb right:0 or some other way of locating the pop-up is better than the calculated left ... but unrelated to this diff. I remember fighting with this when I put it together, but it was years ago. prob a better way to do all of the extension stuff now.

170 ↗(On Diff #54388)

I think it's ok -- I'm seeing the same behavior as before the change when I build and use the extension

bytesofman marked 2 inline comments as done.

rebase

cashtab/extension/src/service_worker.ts
137 ↗(On Diff #54388)

also TIL in JS

image.png (53×178 px, 3 KB)

So in this case, we just get the window in the top left, instead of (maybe) a crash.

That's the point, you don't get the window in the top left but to some left negative offset that will make the window invisible. Clamping the left computation to zero (the max(left, 0) I suggested) will make it appear on the left.

use math.max to prevent left value less than zero

This revision is now accepted and ready to land.Jun 9 2025, 09:44