application

本地存储预览

当前为 2024-09-30 提交的版本,查看 最新版本

  1. // ==UserScript==
  2. // @name application
  3. // @namespace npm/vite-plugin-monkey
  4. // @version 1.0.14
  5. // @author monkey
  6. // @description 本地存储预览
  7. // @license MIT
  8. // @icon https://www.qianxin.com/favicon.ico
  9. // @match *://*/*
  10. // @grant GM_setClipboard
  11. // @grant GM_notification
  12. // @noframes
  13. // ==/UserScript==
  14.  
  15. (function() {
  16. 'use strict';
  17. class Application {
  18. constructor() {
  19. this.list = [];
  20. this.loading = false;
  21. }
  22. setHtml() {
  23. const container = document.createElement("div");
  24. container.className = "youhou-container";
  25. container.style.cssText =
  26. "position:fixed;bottom:40px;right:20px;z-index:999;font-family:Arial, Helvetica, sans-serif;font-size:12px;";
  27. const html = '<div class="youhou-box" style="height:16px;line-height:16px;cursor:pointer;width:fit-content;border-radius:5px;font-size:12px;color:#fff;background:#000;padding:5px 10px;" title="双击查看">查看数据</div>';
  28. container.innerHTML = html;
  29. document.body.appendChild(container);
  30. }
  31. showTip(x, y, content) {
  32. const div = document.createElement("div");
  33. div.style.cssText =
  34. "position:fixed;top:20px;z-index:9999;text-align:center;color:#fff;background:#000;width:fit-content;padding:5px 10px;border-radius:5px;";
  35. div.style.left = x + "px";
  36. div.style.top = y + "px";
  37. document.body.appendChild(div);
  38. div.innerText = "复制成功";
  39. const moveAndChangeColor = [
  40. {
  41. transform: "translateY(0)",
  42. },
  43. {
  44. offset: 0.6,
  45. transform: "translateY(-60px)",
  46. },
  47. {
  48. transform: "translateY(-100px)",
  49. },
  50. ];
  51. const animation = div.animate(moveAndChangeColor, {
  52. duration: 1000,
  53. fill: "forwards",
  54. easing: "ease-in-out",
  55. });
  56. setTimeout(() => {
  57. document.body.removeChild(div);
  58. this.loading = false;
  59. }, 1000);
  60. this.addNotice(content);
  61. }
  62.  
  63. addNotice(content) {
  64. try {
  65. GM_setClipboard(content);
  66. } catch (error) {
  67. console.log("error: ", error);
  68. }
  69. }
  70.  
  71. setEvent() {
  72. const box = document.querySelector(".youhou-box");
  73. box.addEventListener("dblclick", (e) => {
  74. const div = document.createElement("div");
  75. const _this = this;
  76. const trs = this.list
  77. .map((v) => {
  78. return `
  79. <div style="border-bottom:1px solid #f5f5f5;padding:10px;display:flex;align-items:center;" class="youhou-box-tr">
  80. <div style="width:120px">${v.type}</div>
  81. <div style="width:150px;display:flex;align-items:center;position:relative;">
  82. <div style="position:absolute;white-space:nowrap;width:-webkit-fill-available;overflow:hidden;text-overflow:ellipsis;" title='${v.key}'>
  83. ${v.key}
  84. </div>
  85. </div>
  86. <div style="flex:1;display:flex;align-items:center;position:relative;">
  87. <div style="position:absolute;white-space:nowrap;width:-webkit-fill-available;overflow:hidden;text-overflow:ellipsis;" title='${v.value}'>
  88. ${v.value}
  89. </div>
  90. </div>
  91. <div style="width:100px">
  92. <div class="youhou-box-copy" data-value='${v.value}' style="text-align:center;color:#fff;background:#000;cursor:pointer;border-radius:5px;padding:5px 10px;">复制</div>
  93. </div>
  94. </div>
  95. `;
  96. })
  97. .join("");
  98. div.innerHTML = `
  99. <div style="width:1200px;height:500px;background:#fff;padding:10px;overflow:auto;text-align:center;" class="youhou-box-table">
  100. <div id="table111">
  101. <div style="border-bottom:1px solid #f5f5f5;padding:10px;display:flex;align-items:center;font-weight:bold;">
  102. <div style="width:120px">类型</div>
  103. <div style="width:150px">键</div>
  104. <div style="flex:1;">值</div>
  105. <div style="width:100px">操作</div>
  106. </div>
  107. ${trs}
  108. </div>
  109. </div>
  110. `;
  111. div.style.cssText =
  112. "display:flex;justify-content:center;align-items:center;position:fixed;z-index:9999;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,0.5);";
  113. div.onclick = () => {
  114. this.loading = false;
  115. document.body.removeChild(div);
  116. };
  117. document.body.appendChild(div);
  118. div
  119. .querySelector(".youhou-box-table")
  120. .addEventListener("click", (e) => {
  121. e.stopPropagation();
  122. if (e.target.className === "youhou-box-copy" && !this.loading) {
  123. const content = e.target.dataset.value;
  124. console.log("content: ", content);
  125. const x = e.clientX;
  126. const y = e.clientY;
  127. console.log(x, y);
  128. this.loading = true;
  129. this.showTip(x, y, content);
  130. }
  131. });
  132. });
  133. this.setMove();
  134. }
  135. setMove() {
  136. const draggableElement = document.querySelector(".youhou-container");
  137. let isDragging = false;
  138. let offsetX, offsetY;
  139. let w = document.documentElement.clientWidth;
  140. let h = document.documentElement.clientHeight;
  141. let elementRect = draggableElement.getBoundingClientRect();
  142. draggableElement.addEventListener("mousedown", startDragging);
  143. document.addEventListener("mousemove", drag);
  144. document.addEventListener("mouseup", stopDragging);
  145.  
  146. function startDragging(event) {
  147. if (event.target.className == "youhou-box") {
  148. isDragging = true;
  149. offsetX = event.clientX - draggableElement.offsetLeft;
  150. offsetY = event.clientY - draggableElement.offsetTop;
  151. event.preventDefault();
  152. }
  153. }
  154.  
  155. function drag(event) {
  156. if (isDragging) {
  157. let x = event.clientX - offsetX;
  158. let y = event.clientY - offsetY;
  159.  
  160. // 限制在容器范围内
  161. x = Math.max(0, Math.min(x, w - elementRect.width));
  162. y = Math.max(0, Math.min(y, h - elementRect.height));
  163.  
  164. draggableElement.style.left = x + "px";
  165. draggableElement.style.top = y + "px";
  166. }
  167. }
  168.  
  169. function stopDragging() {
  170. isDragging = false;
  171. }
  172. }
  173. setData() {
  174. this.list = [];
  175. this.list.push({
  176. type: "cookie",
  177. key: "cookie",
  178. value: document.cookie,
  179. });
  180. Object.keys(localStorage).forEach((key) => {
  181. this.list.push({
  182. type: "localStorage",
  183. key: key,
  184. value: localStorage.getItem(key),
  185. });
  186. });
  187. Object.keys(sessionStorage).forEach((key) => {
  188. this.list.push({
  189. type: "sessionStorage",
  190. key: key,
  191. value: sessionStorage.getItem(key),
  192. });
  193. });
  194. }
  195. render() {
  196. this.setHtml();
  197. this.setEvent();
  198. this.setData();
  199. window.onresize = () => {
  200. const draggableElement = document.querySelector(".youhou-container");
  201. if (draggableElement) {
  202. draggableElement.remove();
  203. }
  204. this.setHtml();
  205. this.setEvent();
  206. this.setData();
  207. };
  208. }
  209. }
  210. const app = new Application();
  211. app.render();
  212. })();