Vue devtools enabler

Enable Vue devtools on all websites

За да инсталирате този скрипт, трябва да имате инсталирано разширение като Tampermonkey, Greasemonkey или Violentmonkey.

За да инсталирате този скрипт, трябва да имате инсталирано разширение като Tampermonkey или Violentmonkey.

За да инсталирате този скрипт, трябва да имате инсталирано разширение като Tampermonkey или Violentmonkey.

За да инсталирате този скрипт, трябва да имате инсталирано разширение като Tampermonkey или Userscripts.

За да инсталирате скрипта, трябва да инсталирате разширение като Tampermonkey.

За да инсталирате този скрипт, трябва да имате инсталиран скриптов мениджър.

(Вече имам скриптов мениджър, искам да го инсталирам!)

За да инсталирате този стил, трябва да инсталирате разширение като Stylus.

За да инсталирате този стил, трябва да инсталирате разширение като Stylus.

За да инсталирате този стил, трябва да инсталирате разширение като Stylus.

За да инсталирате този стил, трябва да имате инсталиран мениджър на потребителски стилове.

За да инсталирате този стил, трябва да имате инсталиран мениджър на потребителски стилове.

За да инсталирате този стил, трябва да имате инсталиран мениджър на потребителски стилове.

(Вече имам инсталиран мениджър на стиловете, искам да го инсталирам!)

// ==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,
    });
}) ();