GreaseMonkeyScripts/CocosCreatorPreviewScript.ts at master · SherryYueChiu/GreaseMonkeyScripts · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
// ==UserScript==
// @name:zh-tw   Cocos 滿版錯誤訊息屏蔽器
// @name         Cocos Fullscreen Error Blocker
// @namespace       com.sherryyue.cocoscreatorpreviewtool
// @version         0.6
// @description:zh-tw 此腳本在 Cocos 遊戲引擎的瀏覽器預覽模板中添加了一個按鈕，用於關閉錯誤訊息覆蓋層。當發生滿版的嚴重錯誤彈出時，只需點擊按鈕即可關閉覆蓋層，讓您能夠繼續使用遊戲而不受干擾。
// @description  This script adds a button to close the error message overlay in the Cocos game engine's browser preview template. When a fullscreen fatal error hint pops, the overlay can be closed with a single click, allowing you to continue using the game without interruption.
// @author          SherryYue
// @copyright       SherryYue
// @license         MIT
// @match           http://*:7456/*
// @contributionURL https://sherryyuechiu.github.io/card
// @supportURL      sherryyue.c@protonmail.com
// @icon            https://sherryyuechiu.github.io/card/images/logo/maskable_icon_x96.png
// @supportURL      "https://github.com/sherryyuechiu/GreasyMonkeyScripts/issues"
// @homepage        "https://github.com/sherryyuechiu/GreasyMonkeyScripts"
// @grant           none
// ==/UserScript==

(function () {

  let injectPanel = () => {
    let el = document.body,
      html = `
<div class="toolkit">
  <button class="hideError">Hide error</button>
</div>
<style>
.toolkit {
  position: fixed;
  right: 2rem;
  bottom: 2rem;
  z-index: 99999;
}
.toolkit .hideError{
  display: none;
  opacity: 0.4;
  padding: .5rem;
  border: 2px aliceblue solid;
  color: aliceblue;
  background: darkgray;
  border-radius: .5rem;
}
#error {
    background: blue;
    border-radius: .5rem;
    max-height: 100vh;
    padding: 1rem;
    opacity: 0.6;
    pointer-events: none;
}
#error .error-main {
    word-break: break-word;
    max-height: 70vh;
}
</style>
      `;

    // Internet Explorer, Opera, Chrome, Firefox 8+ and Safari
    if (el.insertAdjacentHTML)
      el.insertAdjacentHTML("beforebegin", html);
    else {
      let range = document.createRange();
      let frag = range.createContextualFragment(html);
      el.parentNode.insertBefore(frag, el);
    }
    bindEvent();
  }

  let errorOccur = () => {
    let $hideErrorBtn = document.querySelector<HTMLElement>('.hideError');
    $hideErrorBtn.style.display = "block";
    $hideErrorBtn.style.opacity = '1';
  }

  let hideErrorBlock = () => {
    let $hideErrorBtn = document.querySelector<HTMLElement>('.hideError');
    $hideErrorBtn.style.display = 'block';
    $hideErrorBtn.style.opacity = '0.4';
    let $errorBlock = document.getElementById('error');
    $errorBlock.style.display = "none";
  }

  let showErrorBlock = () => {
    let $hideErrorBtn = document.querySelector<HTMLElement>('.hideError');
    $hideErrorBtn.style.display = 'block';
    $hideErrorBtn.style.opacity = '1';
    let $errorBlock = document.getElementById('error');
    $errorBlock.style.display = "block";
  }

  let showErrorBtn = () => {
    let $hideErrorBtn = document.querySelector<HTMLElement>('.hideError');
    $hideErrorBtn.style.display = "block";
  }

  let hideErrorBtn = () => {
    let $hideErrorBtn = document.querySelector<HTMLElement>('.hideError');
    $hideErrorBtn.style.display = "none";
  }

  let toggleHideErrorBlock = () => {
    let $hideErrorBtn = document.querySelector<HTMLElement>('.hideError');
    if ($hideErrorBtn.style.opacity == '1') hideErrorBlock();
    else showErrorBlock();
  }

  let bindEvent = () => {
    let $hideErrorBtn = document.querySelector<HTMLElement>('.hideError');
    $hideErrorBtn.addEventListener("click", () => {
      toggleHideErrorBlock();
    });
  }

  let errorBlockObserver = new MutationObserver((mutations, obs) => {
    const $errorContent = document.querySelector<HTMLElement>('.error .error-main');
    if ($errorContent && $errorContent.innerHTML != "") {
      errorOccur();
      return;
    } else {
      hideErrorBtn();
      return;
    }
  });

  errorBlockObserver.observe(document.getElementById("GameDiv"), {
    childList: true,
    subtree: true
  });

  injectPanel();
})();