Tampermonkey脚本创建HTML菜单不显示且document.write清空页面问题

问题原因 #

• 页面加载完成后调用document.write会自动触发document.open清空整个现有DOM树，再写入新内容，这就是你原有页面被清空的直接原因，油猴脚本插入自定义元素完全不应该使用这个方法。
• 你之前直接创建元素不显示，是因为只做了元素创建、设置了innerHTML，但没有把元素挂载到页面已有的DOM节点（比如body、头部、或者页面里已存在的容器）上，浏览器不会渲染未插入DOM树的元素。

修正后的完整脚本 #

// ==UserScript==
// @name         New Userscript
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        https://mtsl.dk/csgo/
// @icon         https://www.google.com/s2/favicons?domain=freefrontend.com
// @grant        none
// ==/UserScript==

(function() {
  'use strict';

  var menuWrapper = document.createElement('div')
  // 这里CSS选择器加了#menu前缀，只会作用于你自己的菜单元素，不会污染原页面的div样式
  menuWrapper.innerHTML = `<div id="menu">
  <style>
    #menu div {
      background-color: #fec5bb;
      color: #3A7CA5;
      border: 0px solid red;
      border-radius: 5px;
      margin: 10px;
      padding: 5px;
    }
  </style>
  <div>Inventory Editor:<button>Edit Inventory</button></div>
  <div>Autoclicker: <button>Auto Click</button></div>
</div>`
  // 把菜单插到页面body的末尾，不会影响原有内容
  document.body.append(menuWrapper)
})();

额外调整说明 #

• 原有代码里的CSS是全局匹配所有div，会把原页面所有div的样式全部改掉，这里加了#menu前缀做限定，只会作用于你自己的菜单元素，避免影响原页面展示。
• 如果你想让菜单固定在页面某个位置不跟随滚动，可以给#menu加position: fixed相关的样式，比如追加top: 10px; right: 10px; z-index: 99999就能让菜单固定在页面右上角，不会被其他元素挡住。

内容的提问来源于stack exchange，提问作者Thornily