Feat/upgrade to manifest v3 #129

coolsoftwaretyler · 2024-10-28T00:39:08Z

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

Two big changes we have to make:

We can't do script evaluation anymore for security reasons
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 · 2024-10-28T00:39:38Z

Related to #120

andykog · 2024-10-28T07:09:17Z

@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 · 2024-10-28T14:18:29Z

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 · 2024-10-29T01:26:28Z

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 · 2024-10-29T07:21:01Z

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 · 2024-10-30T01:11:01Z

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 · 2024-10-30T02:40:42Z

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 · 2024-10-30T03:06:42Z

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 · 2024-10-30T07:08:39Z

Woo-hoo 🎉

grvdisco · 2024-10-30T19:08:47Z

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

coolsoftwaretyler · 2024-10-31T01:05:52Z

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:

Pulling the branch
Run npm run start-playground-plain
Open up the playground in Chrome
Run npm run build:chrome
Install the newly built Chrome extension
Open up devtools and go to MobX
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.
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 · 2024-10-31T11:05:56Z

src/shells/webextension/contentScript.js

+  setTimeout(() => {
+    const newPort = chrome.runtime.connect({ name: 'content-script' });
+    // Update port reference
+    port = newPort;


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

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

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

src/shells/webextension/background.js

coolsoftwaretyler · 2024-11-01T01:46:18Z

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 · 2024-11-01T06:57:46Z

Sounds good 👍

aul-igt · 2024-12-03T00:50:28Z

src/shells/webextension/injectGlobalHook.js

-const script = document.createElement('script');
-script.textContent = `;(${installGlobalHook.toString()}(window))`;
-document.documentElement.appendChild(script);
-script.parentNode.removeChild(script);
-


It looks like this change causes webpack to tree shake the hook from the build.

Are you seeing it fail to load? I tested this a bunch and things were working fine without it.

Yea I'm not seeing the mobx tab in dev tools using the build on chrome web store.

Super weird that it worked for some of us but not in web. Maybe the production build stripped it out and dev build didn't, although I thought I ran prod builds. It's been a few weeks.

Should be an easy fix, I think if we just export something here then Webpack will keep it in.

I'll try to reproduce and fix sometime soon.

Alrighty, something weird must have happened where the old hook injection got cached in my browser or something. I was able to reproduce the bug, and see it fixed in #133

Sorry for the inconvenience!

coolsoftwaretyler added 7 commits October 27, 2024 16:00

feat: upgrade to manifest v3 fields

e3f1786

feat: update manifest with service worker, csp

9a6a133

feat: install global hook without unsafe eval

1e36bac

fix: get panel loader working with executeScript

754a3c1

spike: no progress but placeholder before cursor help

6f6b07a

feat: app content is loaded, need to get connected

470e78d

fix: load backend script

dd3852a

feat: set up connection between backend and content script

802f47d

chore: add some more debugging

f8c4075

feat: add some more bugs for backend

f29824f

coolsoftwaretyler mentioned this pull request Oct 30, 2024

chore: update package.json #130

Closed

coolsoftwaretyler added 2 commits October 29, 2024 20:55

spike: more debuggin

18cbd77

fix: it finally works

c9f6338

coolsoftwaretyler added 5 commits October 30, 2024 18:43

chore: clean up console logs from debugging

d4302e4

feat: undo formatting changes in backend

643775d

chore: undo formatting in backend again

98b7342

chore: restore backend - no changes needed here

1ca02f8

fix: remove broken context menu option

1447b79

coolsoftwaretyler changed the title ~~draft: Feat/upgrade to manifest v3~~ Feat/upgrade to manifest v3 Oct 31, 2024

coolsoftwaretyler requested a review from andykog October 31, 2024 01:01

andykog approved these changes Oct 31, 2024

View reviewed changes

chore: remove unused function

3dcb0b3

coolsoftwaretyler merged commit 790f8b7 into master Nov 2, 2024
1 check passed

coolsoftwaretyler deleted the feat/upgrade-to-manifest-v3 branch November 2, 2024 21:06

This was referenced Nov 2, 2024

Update to Manifest v3 (at least for Chrome) #120

Closed

Separate window no longer works #131

Open

aul-igt reviewed Dec 3, 2024

View reviewed changes

coolsoftwaretyler mentioned this pull request Dec 4, 2024

fix: global hook not installing #133

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Feat/upgrade to manifest v3 #129

Feat/upgrade to manifest v3 #129

coolsoftwaretyler commented Oct 28, 2024

coolsoftwaretyler commented Oct 28, 2024

andykog commented Oct 28, 2024

coolsoftwaretyler commented Oct 28, 2024

coolsoftwaretyler commented Oct 29, 2024 •

edited

Loading

andykog commented Oct 29, 2024

coolsoftwaretyler commented Oct 30, 2024

coolsoftwaretyler commented Oct 30, 2024

coolsoftwaretyler commented Oct 30, 2024

andykog commented Oct 30, 2024

grvdisco commented Oct 30, 2024

coolsoftwaretyler commented Oct 31, 2024

andykog left a comment

andykog Oct 31, 2024

coolsoftwaretyler Nov 1, 2024

andykog Nov 1, 2024

coolsoftwaretyler commented Nov 1, 2024

andykog commented Nov 1, 2024

aul-igt Dec 3, 2024

coolsoftwaretyler Dec 3, 2024

aul-igt Dec 3, 2024

coolsoftwaretyler Dec 3, 2024

coolsoftwaretyler Dec 4, 2024 •

edited

Loading

Feat/upgrade to manifest v3 #129

Feat/upgrade to manifest v3 #129

Conversation

coolsoftwaretyler commented Oct 28, 2024

coolsoftwaretyler commented Oct 28, 2024

andykog commented Oct 28, 2024

coolsoftwaretyler commented Oct 28, 2024

coolsoftwaretyler commented Oct 29, 2024 • edited Loading

andykog commented Oct 29, 2024

coolsoftwaretyler commented Oct 30, 2024

coolsoftwaretyler commented Oct 30, 2024

coolsoftwaretyler commented Oct 30, 2024

andykog commented Oct 30, 2024

grvdisco commented Oct 30, 2024

coolsoftwaretyler commented Oct 31, 2024

andykog left a comment

Choose a reason for hiding this comment

andykog Oct 31, 2024

Choose a reason for hiding this comment

coolsoftwaretyler Nov 1, 2024

Choose a reason for hiding this comment

andykog Nov 1, 2024

Choose a reason for hiding this comment

coolsoftwaretyler commented Nov 1, 2024

andykog commented Nov 1, 2024

aul-igt Dec 3, 2024

Choose a reason for hiding this comment

coolsoftwaretyler Dec 3, 2024

Choose a reason for hiding this comment

aul-igt Dec 3, 2024

Choose a reason for hiding this comment

coolsoftwaretyler Dec 3, 2024

Choose a reason for hiding this comment

coolsoftwaretyler Dec 4, 2024 • edited Loading

Choose a reason for hiding this comment

coolsoftwaretyler commented Oct 29, 2024 •

edited

Loading

coolsoftwaretyler Dec 4, 2024 •

edited

Loading