application

本地存储预览

当前为 2024-10-08 提交的版本,查看 最新版本

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