diff --git a/README.md b/README.md index 67aba0e80..34f949660 100644 --- a/README.md +++ b/README.md @@ -24,7 +24,7 @@ To enable this feature, follow [this guide](./docs/open-in-editor.md). ### Manual Installation -This is only necessary when you want to build the extension yourself from source to get not-yet-released features. +This is only necessary when you want to build the extension with the source repo to get not-yet-released features. **Make sure you are using Node 6+ and NPM 3+** @@ -32,10 +32,10 @@ This is only necessary when you want to build the extension yourself from source 2. `cd vue-devtools` the newly created folder 2. run `yarn install` 3. then run `yarn run build` -4. Open the Chrome extension page (currently under Menu > More Tools > Extensions) +4. Open the Chrome extension page (currently under `Menu` > `More Tools` > `Extensions`) 5. Check "developer mode" on the top-right corner 6. Click the "load unpacked" button on the left, and choose the folder: `vue-devtools/packages/shell-chrome/` -7. Alternatilvely to step 3, you can also use `yarn dev:chrome` to build & watch the unpacked extension +7. Alternatively to step 3, you can also use `yarn dev:chrome` to build & watch the unpacked extension ### Development diff --git a/package.json b/package.json index 220acb779..37b45e619 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "vue-devtools", - "version": "5.3.3", + "version": "5.3.4", "description": "devtools for Vue.js!", "private": true, "workspaces": [ diff --git a/packages/shell-chrome/manifest.json b/packages/shell-chrome/manifest.json index 905bee0c1..3237aaa5e 100644 --- a/packages/shell-chrome/manifest.json +++ b/packages/shell-chrome/manifest.json @@ -1,7 +1,7 @@ { "name": "Vue.js devtools", - "version": "5.3.3", - "version_name": "5.3.3", + "version": "5.3.4", + "version_name": "5.3.4", "description": "Chrome and Firefox DevTools extension for debugging Vue.js applications.", "manifest_version": 2, "icons": { diff --git a/packages/shell-chrome/src/devtools-background.js b/packages/shell-chrome/src/devtools-background.js index 17b87ec98..ca7aafb4c 100644 --- a/packages/shell-chrome/src/devtools-background.js +++ b/packages/shell-chrome/src/devtools-background.js @@ -46,7 +46,7 @@ chrome.runtime.onMessage.addListener(request => { if (request === 'vue-panel-load') { onPanelLoad() } else if (request.vueToast) { - toast(request.vueToast.message, request.vueToast.type) + toast(request.vueToast) } else if (request.vueContextMenu) { onContextMenu(request.vueContextMenu) } @@ -65,10 +65,10 @@ function onContextMenu ({ id }) { if (typeof res !== 'undefined' && res) { panelAction(() => { chrome.runtime.sendMessage('vue-get-context-menu-target') - }, 'Open Vue devtools to see component details') + }, 'open-devtools') } else { pendingAction = null - toast('No Vue component was found', 'warn') + toast('component-not-found') } }) } @@ -113,7 +113,16 @@ function onPanelHidden () { // Toasts -function toast (message, type = 'normal') { +const toastMessages = { + 'open-devtools': { message: 'Open Vue devtools to see component details', type: 'normal' }, + 'component-not-found': { message: 'No Vue component was found', type: 'warn' } +} + +function toast (id) { + if (!Object.keys(toastMessages).includes(id)) return + + const { message, type } = toastMessages[id] + const src = `(function() { __VUE_DEVTOOLS_TOAST__(\`${message}\`, '${type}'); })()` diff --git a/packages/shell-electron/package.json b/packages/shell-electron/package.json index 74b463f9a..8dc74457a 100644 --- a/packages/shell-electron/package.json +++ b/packages/shell-electron/package.json @@ -1,6 +1,6 @@ { "name": "@vue/devtools", - "version": "5.3.3", + "version": "5.3.4", "description": "StandAlone vue-devtools", "repository": { "url": "https://github.com/vuejs/vue-devtools.git",