application

本地存储预览

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