Vue devtools enabler

Enable Vue devtools on all websites

Dovrai installare un'estensione come Tampermonkey, Greasemonkey o Violentmonkey per installare questo script.

Dovrai installare un'estensione come Tampermonkey o Violentmonkey per installare questo script.

Dovrai installare un'estensione come Tampermonkey o Violentmonkey per installare questo script.

Dovrai installare un'estensione come Tampermonkey o Userscripts per installare questo script.

Dovrai installare un'estensione come ad esempio Tampermonkey per installare questo script.

Dovrai installare un gestore di script utente per installare questo script.

(Ho già un gestore di script utente, lasciamelo installare!)

Dovrai installare un'estensione come ad esempio Stylus per installare questo stile.

Dovrai installare un'estensione come ad esempio Stylus per installare questo stile.

Dovrai installare un'estensione come ad esempio Stylus per installare questo stile.

Dovrai installare un'estensione per la gestione degli stili utente per installare questo stile.

Dovrai installare un'estensione per la gestione degli stili utente per installare questo stile.

Dovrai installare un'estensione per la gestione degli stili utente per installare questo stile.

(Ho già un gestore di stile utente, lasciamelo installare!)

// ==UserScript==
// @name               Vue devtools enabler
// @name:zh-CN         启用 Vue devtools
// @namespace          https://greasyfork.org/users/667968-pyudng
// @version            0.1.2
// @description        Enable Vue devtools on all websites
// @description:zh-CN  为所有网站启用 Vue devtools
// @author             PY-DNG
// @license            GPL-3.0-or-later
// @match              http*://*/*
// @icon               https://cn.vuejs.org/logo.svg
// @grant              GM_log
// @run-at             document-start
// ==/UserScript==

/* eslint-disable no-multi-spaces */
/* eslint-disable no-return-assign */

(async function __MAIN__() {
    'use strict';

    // 获取window
    const win = typeof unsafeWindow !== 'undefined' ? unsafeWindow : window;

    // 监听和修改window.__VUE_DEVTOOLS_GLOBAL_HOOK__
    const VueDevtoolsGlobalHook = await (function() {
        const { promise, resolve } = Promise.withResolvers();
        check();
        return promise;

        function check() {
            if (win.hasOwnProperty('__VUE_DEVTOOLS_GLOBAL_HOOK__')) {
                const VHook = win.__VUE_DEVTOOLS_GLOBAL_HOOK__;
                VHook.enabled = true;
                resolve(VHook);
            } else {
                setTimeout(check);
            }
        }
    }) ();

    // Vue实例处理器
    const VueDealer = {
        roots: new Set(),

        vue2: {
            connect(app) {
                const root = app.$root;
                if (VueDealer.roots.has(root)) { return; }

                let Vue = root.constructor;
                while (Vue.super) { Vue = Vue.super; }
                Vue.config.devtools = true;
                VueDevtoolsGlobalHook.emit("init", Vue);

                VueDealer.roots.add(root);
            },
        },

        vue3: {
            connect(app) {
                if (VueDealer.roots.has(app)) { return; }
                if (!Array.isArray(VueDevtoolsGlobalHook.apps)) { return; }
                if (VueDevtoolsGlobalHook.apps.includes(app)) { return; }

                const version = app.version;
                const types = {
                    Fragment: undefined,
                    Text: undefined,
                    Comment: undefined,
                    Static: undefined
                };
                VueDevtoolsGlobalHook.emit("app:init", app, version, types);
                const unmount = app.unmount;
                app.unmount = function() {
                    VueDevtoolsGlobalHook.emit("app:unmount", app);
                    unmount.call(app);
                };

                VueDealer.roots.add(app);
            }
        }
    };

    // 每当DOM变化时,都遍历所有元素,寻找Vue实例
    const observer = new MutationObserver(() => {
        for (const element of document.querySelectorAll('*')) {
            if (element.__vue__?._isVue) {
                VueDealer.vue2.connect(element.__vue__);
            }
            if (element.__vue_app__?.version) {
                VueDealer.vue3.connect(element.__vue_app__);
            }
        }
    });
    observer.observe(document, {
        attributes: true,
        childList: true,
        subtree: true,
    });
}) ();