Skip to content

Commit 813ffbd

Browse files
webfansplzwebfansplz
authoredOct 30, 2024··
feat(extension): vue2 migration guide popup page (#658)
·
v7.7.5v7.6.0
1 parent 82509c9 commit 813ffbd

File tree

9 files changed

+117
-11
lines changed

9 files changed

+117
-11
lines changed
 

‎packages/chrome-extension/popups/popup.css

+11
Original file line numberDiff line numberDiff line change
@@ -45,3 +45,14 @@ a {
4545
margin-right: 24px;
4646
box-shadow: 0 0 15px rgb(0 0 0 / 10%);
4747
}
48+
49+
.migration-guide {
50+
width: 300px;
51+
margin: 0;
52+
padding: 0;
53+
}
54+
55+
.migration-guide h2 {
56+
padding: 8px 0;
57+
margin: 0;
58+
}

‎packages/chrome-extension/popups/vue2-migration-guide.html

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<meta charset="utf-8" />
2+
<link rel="stylesheet" type="text/css" href="./popup.css" />
3+
4+
<div class="migration-guide">
5+
<h2>Migration Tips</h2>
6+
<p style="text-indent: 8px">
7+
Vue DevTools v7 detected in your Vue2 project. v7 only supports Vue3 and will not work.
8+
</p>
9+
<p style="text-indent: 8px">
10+
The legacy version that supports both Vue 2 and Vue 3 has been moved to
11+
<a target="_blank" href="https://chromewebstore.google.com/detail/vuejs-devtools/iaajmlceplecbljialhhkmedjlpdblhp"
12+
>here</a
13+
>, please install and enable only the legacy version for your Vue2 app. If you're still using v5 version, you can
14+
install it
15+
<a
16+
target="_blank"
17+
href="https://chromewebstore.google.com/detail/vuejs-devtools-v5/hkddcnbhifppgmfgflgaelippbigjpjo"
18+
>here</a
19+
>.
20+
</p>
21+
</div>

‎packages/chrome-extension/src/background.ts

+7
Original file line numberDiff line numberDiff line change
@@ -89,6 +89,13 @@ chrome.runtime.onConnect.addListener((port) => {
8989
})
9090

9191
chrome.runtime.onMessage.addListener((req, sender) => {
92+
if (sender.tab && req.vue2Detected) {
93+
chrome.action.setPopup({
94+
tabId: sender.tab.id,
95+
popup: chrome.runtime.getURL('popups/vue2-migration-guide.html'),
96+
})
97+
}
98+
9299
if (sender.tab && req.vueDetected) {
93100
let suffix = ''
94101

‎packages/chrome-extension/src/detector.ts

+16-3
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,20 @@ function detect(win: Window) {
1111
}
1212

1313
function runDetect() {
14-
// 1. check Nuxt
14+
// 1. check Vue2
15+
// @ts-expect-error skip type check
16+
if (window.__VUE_DEVTOOLS_VUE2_APP_DETECTED__) {
17+
sendMessage({
18+
devtoolsEnabled: false,
19+
vueDetected: false,
20+
nuxtDetected: false,
21+
vue2Detected: true,
22+
vitePluginDetected: false,
23+
vitePluginClientUrl: '',
24+
})
25+
}
26+
27+
// 2. check Nuxt
1528
// @ts-expect-error types
1629
const nuxtDetected = !!(window.__NUXT__)
1730

@@ -26,7 +39,7 @@ function detect(win: Window) {
2639
return
2740
}
2841

29-
// 2. check VitePress
42+
// 3. check VitePress
3043
// @ts-expect-error types
3144
const vitePressDetected = !!(window.__VITEPRESS__)
3245
if (vitePressDetected) {
@@ -40,7 +53,7 @@ function detect(win: Window) {
4053
return
4154
}
4255

43-
// 3. check Vue
56+
// 4. check Vue
4457
// @ts-expect-error types
4558
const vueDetected = !!(window.__VUE__)
4659
if (vueDetected) {

‎packages/devtools-kit/src/core/index.ts

+7-5
Original file line numberDiff line numberDiff line change
@@ -47,16 +47,18 @@ export function initDevTools() {
4747
// @ts-expect-error skip type check
4848
// Vue2 app detection
4949
target.__VUE_DEVTOOLS_GLOBAL_HOOK__.once('init', (Vue) => {
50-
console.log('%c[_____Vue DevTools v7 log_____]', 'color: red; font-bold: 700; font-size: 20px;')
50+
target.__VUE_DEVTOOLS_VUE2_APP_DETECTED__ = true
5151

52-
console.log('%cVue DevTools v7 detected in your Vue2 project. v7 only supports Vue3 and will not work.', 'font-bold: 700; font-size: 16px;')
52+
console.log('%c[_____Vue DevTools v7 log_____]', 'color: red; font-bold: 600; font-size: 16px;')
53+
54+
console.log('%cVue DevTools v7 detected in your Vue2 project. v7 only supports Vue3 and will not work.', 'font-bold: 500; font-size: 14px;')
5355

5456
const url = 'https://chromewebstore.google.com/detail/vuejs-devtools/iaajmlceplecbljialhhkmedjlpdblhp'
55-
console.log(`%cThe legacy version that supports both Vue 2 and Vue 3 has been moved to %c ${url}`, 'font-size: 16px;', 'text-decoration: underline; cursor: pointer;font-size: 16px;')
57+
console.log(`%cThe legacy version that supports both Vue 2 and Vue 3 has been moved to %c ${url}`, 'font-size: 14px;', 'text-decoration: underline; cursor: pointer;font-size: 14px;')
5658

57-
console.log('%cPlease install and enable only the legacy version for your Vue2 app.', 'font-bold: 700; font-size: 16px;')
59+
console.log('%cPlease install and enable only the legacy version for your Vue2 app.', 'font-bold: 500; font-size: 14px;')
5860

59-
console.log('%c[_____Vue DevTools v7 log_____]', 'color: red; font-bold: 700; font-size: 20px;')
61+
console.log('%c[_____Vue DevTools v7 log_____]', 'color: red; font-bold: 600; font-size: 16px;')
6062
})
6163

6264
hook.on.setupDevtoolsPlugin((pluginDescriptor, setupFn) => {

‎packages/firefox-extension/popups/popup.css

+11
Original file line numberDiff line numberDiff line change
@@ -45,3 +45,14 @@ a {
4545
margin-right: 24px;
4646
box-shadow: 0 0 15px rgb(0 0 0 / 10%);
4747
}
48+
49+
.migration-guide {
50+
width: 300px;
51+
margin: 0;
52+
padding: 0;
53+
}
54+
55+
.migration-guide h2 {
56+
padding: 8px 0;
57+
margin: 0;
58+
}

‎packages/firefox-extension/popups/vue2-migration-guide.html

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<meta charset="utf-8" />
2+
<link rel="stylesheet" type="text/css" href="./popup.css" />
3+
4+
<div class="migration-guide">
5+
<h2>Migration Tips</h2>
6+
<p style="text-indent: 8px">
7+
Vue DevTools v7 detected in your Vue2 project. v7 only supports Vue3 and will not work.
8+
</p>
9+
<p style="text-indent: 8px">
10+
The legacy version that supports both Vue 2 and Vue 3 has been moved to
11+
<a target="_blank" href="https://chromewebstore.google.com/detail/vuejs-devtools/iaajmlceplecbljialhhkmedjlpdblhp"
12+
>here</a
13+
>, please install and enable only the legacy version for your Vue2 app. If you're still using v5 version, you can
14+
install it
15+
<a
16+
target="_blank"
17+
href="https://chromewebstore.google.com/detail/vuejs-devtools-v5/hkddcnbhifppgmfgflgaelippbigjpjo"
18+
>here</a
19+
>.
20+
</p>
21+
</div>

‎packages/firefox-extension/src/background.ts

+7
Original file line numberDiff line numberDiff line change
@@ -87,6 +87,13 @@ chrome.runtime.onConnect.addListener((port) => {
8787
})
8888

8989
chrome.runtime.onMessage.addListener((req, sender) => {
90+
if (sender.tab && req.vue2Detected) {
91+
chrome.browserAction.setPopup({
92+
tabId: sender.tab.id,
93+
popup: 'popups/vue2-migration-guide.html',
94+
})
95+
}
96+
9097
if (sender.tab && req.vueDetected) {
9198
let suffix = ''
9299

‎packages/firefox-extension/src/detector.ts

+16-3
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,20 @@ function detect(win: Window) {
1111
}
1212

1313
function runDetect() {
14-
// 1. check Nuxt
14+
// 1. check Vue2
15+
// @ts-expect-error skip type check
16+
if (window.__VUE_DEVTOOLS_VUE2_APP_DETECTED__) {
17+
sendMessage({
18+
devtoolsEnabled: false,
19+
vueDetected: false,
20+
nuxtDetected: false,
21+
vue2Detected: true,
22+
vitePluginDetected: false,
23+
vitePluginClientUrl: '',
24+
})
25+
}
26+
27+
// 2. check Nuxt
1528
// @ts-expect-error types
1629
const nuxtDetected = !!(window.__NUXT__)
1730

@@ -26,7 +39,7 @@ function detect(win: Window) {
2639
return
2740
}
2841

29-
// 2. check VitePress
42+
// 3. check VitePress
3043
// @ts-expect-error types
3144
const vitePressDetected = !!(window.__VITEPRESS__)
3245
if (vitePressDetected) {
@@ -40,7 +53,7 @@ function detect(win: Window) {
4053
return
4154
}
4255

43-
// 3. check Vue
56+
// 4. check Vue
4457
// @ts-expect-error types
4558
const vueDetected = !!(window.__VUE__)
4659
if (vueDetected) {

0 commit comments

Comments
 (0)
Please sign in to comment.