Feat/upgrade to manifest v3

[coolsoftwaretyler]

This is a WIP branch to try and update to manifest v3.

Two big changes we have to make:

1. We can't do script evaluation anymore for security reasons
2. We have to migrate our background scripts to service workers.

And throughout the codebase, we'll need to update some API usage.

See Google v3 checklist here: https://developer.chrome.com/docs/extensions/develop/migrate/checklist

@andykog - I've made some progress here. I updated the manifest format, removed some of the unsafe inline scripts. Now I'm stuck on getting the content script to actually connect to the backend. If you're available, I could use your help.

Mostly I'm trying to trace through all of the logic of the v2 extension. But if you have it mapped out in your head (or written down somewhere), that might help me figure out what we need to change in order to be compliant with v3.

[coolsoftwaretyler]

Related to #120

[andykog]

@coolsoftwaretyler I don’t remember the exact logic, but I’d try to

• enable connection debugging here
• Check if contentScript tries to connect here
• this logic was similar to the logic of react-devtools a few years ago, so probably whatever they did to migrate we could do as well

let me know if it doesn’t help, I’ll try to take a look later

[coolsoftwaretyler]

Perfect, I think this is a great place to start. I mostly want to see the existing message passing, so I think even using connection debugging with the existing extension will help me figure out more of what needs to change. Will also peek at react-devtools migration.

Will check through the week/next weekend and let you know if I need anything else. I appreciate your time!

[coolsoftwaretyler]

Ok so for some reason, setting __DEBUG_CONNECTION__ to true does not enable the debugConnection function. But I dropped some console logs near those calls and I'm seeing the backend:ping and contentScript:pong messages passed around.

When I open it up, I get past the Loading... text but not Connecting...

I think this means that we aren't firing bridge.once('frontend:pong', ... as seen over in https://github.com/mobxjs/mobx-devtools/blob/master/src/frontend/App.jsx#L53, but I'm not exactly sure how to troubleshoot past that.

I took a look at the React devtools and most of the changes they made make sense to me, but don't answer the question of what has changed/broken in this extension.

I'll keep tracing the message passing around through the week. I think the main problem I have is that I don't understand enough of how the existing extension is intended to work, so I don't have the right instincts about what might be broken/not communicating.

Here's a video of what's happening on my end from this branch (I disabled the on-screen dev tools so I could reduce some noise in my console logs. But for what it's worth, embedding the in-app tools is working as expected)

Screen.Recording.2024-10-28.at.7.21.03.PM.mp4

[andykog]

I would also try to see logs in the background page (in the window that opens if you go to chrome://extensions and click “inspect views: background page”).
I’ll try to debug it as well later this week.

[coolsoftwaretyler]

Ah yeah, I did not show that because there were no logs in prior test runs. Checked again and still nothing. I will continue debugging as well!

[coolsoftwaretyler]

Ok, in f29824f, I added some logs to src/backend/index.js. It looks like we are getting to the line where we subscribe to backend:ping in disposables, but I do not see initBackend received backend:ping anywhere, so I'm guessing that connection to the backend isn't working.

Gonna drop a breakpoint there and see what's up.

[coolsoftwaretyler]

Yeehaw, I got it to work in c9f6338. I was missing the world: 'MAIN' config option in executeScript for the backend.

There are a ton of console logs in here I need to clean up, and I am sure there's some number of unnecessary changes. Now that I have a working commit, I am going to clean up the PR and try to pare it down to only the necessary changes.

Thanks for your help so far, @andykog! Check it out!

Screen.Recording.2024-10-29.at.9.05.32.PM.mp4

[andykog]

Woo-hoo 🎉

[grvdisco]

@coolsoftwaretyler we are almost done with "2024 Dev Readiness" 😄

[coolsoftwaretyler]

Hey @andykog - I've cleaned up the codebase here and as far as I can tell, the remaining changes are important for actually converting over to manifest v3.

There are some follow up items I'd like to do, but my goal is to merge this PR and have you ship it to the Chrome store so people can keep using the extension, even if it's still got some bugs here and there.

You can test this by:

1. Pulling the branch
2. Run npm run start-playground-plain
3. Open up the playground in Chrome
4. Run npm run build:chrome
5. Install the newly built Chrome extension
6. Open up devtools and go to MobX
7. Most of the old functionality works. I think there are a couple of things not working (like getting the HTMLElement target, and a couple of the example playgrounds maybe don't work), but it's possible those are existing issues. Since the bulk of this now works on Manifest v3, I'd rather fix them one at a time than bundle those changes with this PR.
8. I haven't tested this in Firefox, but they have no plans to require the manifest v3 change yet, so I think you can just leave that extension as-is.

If that plan works for you, let me know when you merge and ship it, and I can close out #120 and start working on other bug reports/finding other people to help out from a starting point of a v3 extension. I've been asking around and trying to find other interested folks to jump in.

[andykog]

Looking good! I would check if it works both as a panel (in chrome devtools) and a standalone window (when clicking on the extension icon), also edge cases like reconnecting after navigating to a different site and back to the site with mobx, reloading devtools

[andykog]

Should't we also listen for onDisconnect on this newPort?

[coolsoftwaretyler]

Maybe! I am not 100% sure how all of this is wired up. What should we be doing on port disconnection?

[andykog]

Not sure, I just see that you try reconnecting after the first disconnection here, thought it would make sense to do the same for the next disconnections

[coolsoftwaretyler]

For:

like reconnecting after navigating to a different site and back to the site with mobx, reloading devtools

I think this is working! Opened up devtools, saw some MobX changes, navigated away, devtools wiped itself, and then navigated back and saw the changes again.

As for opening in a separate window, there are some more deprecated APIs we have to replace to make that work. What do you think about merging this PR, and then maybe handling that as a separate PR?

[andykog]

Sounds good 👍