vuejs / devtools-v6

⚙️ Browser devtools extension for debugging Vue.js applications.
https://devtools-v6.vuejs.org/
MIT License
24.68k stars 4.15k forks source link

Migrating to Manifest V3 #1917

Open mondaychen opened 2 years ago

mondaychen commented 2 years ago

What problem does this feature solve?

Hi. This is Mengdi from React DevTools team. According to Chrome, all extensions must be migrated to Manifest V3 by end of this year. Otherwise Chrome will no longer run them https://developer.chrome.com/docs/extensions/mv3/mv2-sunset/

What does the proposed API look like?

Do Vue devtools team have a plan to migrate to V3 in near future?

Akryum commented 2 years ago

We already have a working branch: https://github.com/vuejs/devtools/tree/manifest-v3 We are waiting for Firefox to support it (+ some testing) to make the switch.

mondaychen commented 2 years ago

Awesome. Looks like it's already done then.

rendomnet commented 2 years ago

@mondaychen How to install and use it?

mondaychen commented 2 years ago

Hi @Akryum I had some trouble migrating React DevTools. After I took a closer look at your v3 branch, I think we took the same approach and you might encounter the same issue. In the past we both use a sync way to inject the hook, like this

const script = document.createElement('script')
script.textContent = source // code source as string
document.documentElement.appendChild(script)

Because this is no longer allowed in V3, we switch to using a pre-built JS file as src

const script = document.createElement('script')
script.src = chrome.runtime.getURL('build/hook-exec.js')

However, this is approach is async and can cause race condition. In my test, if react-dom is loaded fast enough (usually happens on cached production build), it failed to detect the hook and thus assume the browser does not have devtools installed.

Can you give it a test (load the V3 extension on a prod build small vue.js website) and see if this is an issue on your side too?

Coding-Kiwi commented 1 year ago

@Akryum What is the current status on this?

According to https://developer.chrome.com/blog/mv2-transition :

January 2023: The Chrome browser will no longer run Manifest V2 extensions. Developers may no longer push updates to existing Manifest V2 extensions

This even states

After January 2023, Chrome browser will no longer run Manifest V2 extensions and developers may no longer be able to push updates to existing Manifest V2 extensions. With the use of enterprise policy, the MV2 extensions can function on Chrome deployments till June 2023. It's recommended that you make sure all your Chrome extensions are Manifest V3 compliant before MV2 is completely deprecated.

Which does not seem to be true because vue devtools still works for me, but nevertheless it might be time to do something?

Akryum commented 1 year ago

They backed down on this, I don't think there is a date anymore, I need to check

mLiGuangYuan commented 10 months ago

Hi @Akryum I had some trouble migrating React DevTools. After I took a closer look at your v3 branch, I think we took the same approach and you might encounter the same issue. In the past we both use a sync way to inject the hook, like this

const script = document.createElement('script')
script.textContent = source // code source as string
document.documentElement.appendChild(script)

Because this is no longer allowed in V3, we switch to using a pre-built JS file as src

const script = document.createElement('script')
script.src = chrome.runtime.getURL('build/hook-exec.js')

However, this is approach is async and can cause race condition. In my test, if react-dom is loaded fast enough (usually happens on cached production build), it failed to detect the hook and thus assume the browser does not have devtools installed.

Can you give it a test (load the V3 extension on a prod build small vue.js website) and see if this is an issue on your side too?

I'm having the same problem with upgrading to mv3, how is google doing now? looks like an upgrade to mv3, a long way off!