☰

将开发环境内嵌到线上页面中

当URL中匹配到某个标志后将开发环境内嵌到页面内

// ==UserScript==
// @name         将开发环境内嵌到线上页面中
// @namespace    http://yournamespace.example.com
// @version      1.0
// @description  当URL中匹配到某个标志后将开发环境内嵌到页面内
// @author       liliangrong777
// @include     *
// @grant        GM_addStyle
// @grant        GM_xmlhttpRequest
// @grant        GM_getResourceText
// @license MIT
// ==/UserScript==


(function () {
  'use strict';

  // 检测标识
  const MATCH_FLAG = 'env=dev'
  // 本地环境地址
  const LOCAL_URL = 'http://localhost:5173';
  // react挂载节点
  const ROOT_ID = 'root';
  // 要替换元素的选择器或返回dom节点的函数，如果未匹配上会挂载到document.body上
  const SELECTOR = `#${ROOT_ID}`



  // 获取当前页面的URL
  const currentURL = window.location.href;
  // 检查URL是否包含'env=dev'
  if (currentURL.includes(MATCH_FLAG)) {
      const newDiv = document.createElement('div'); newDiv.id = ROOT_ID;

      const isStrSelector = typeof SELECTOR === 'string' 
      const section = isStrSelector ? document.querySelector(SELECTOR) : SELECTOR()
      if (section) {
        section.insertAdjacentElement('afterend', newDiv);
        section.remove();
      } else {
        document.body.appendChild(newDiv);
      }
  

      // 创建第一个 script 元素
      const script1 = document.createElement('script');
      script1.type = 'module';
      script1.text = `
          import RefreshRuntime from '${LOCAL_URL}/@react-refresh';
          RefreshRuntime.injectIntoGlobalHook(window);
          window.$RefreshReg$ = () => {};
          window.$RefreshSig$ = () => (type) => type;
          window.__vite_plugin_react_preamble_installed__ = true;
      `;
      document.head.appendChild(script1);

      // 创建第二个 script 元素
      const script2 = document.createElement('script');
      script2.type = 'module';
      script2.src = `${LOCAL_URL}/@vite/client`;
      document.head.appendChild(script2);

      // 创建第三个 script 元素
      const script3 = document.createElement('script');
      script3.type = 'module';
      script3.src = `${LOCAL_URL}/src/main.tsx`;
      document.head.appendChild(script3);
  }
})();