☰

Web选择

由于Web选择太好用，微软就把他砍掉了。本脚本实现了Web选择的部分功能。按下Alt+S即可选择文本。

  1. // ==UserScript==
  2. // @name                Web选择
  3. // @name:en             Web Select
  4. // @name:zh-TW          Web捕獲
  5. // @namespace           http://howardzhangdqs.eu.org/
  6. // @source              https://github.com/Howardzhangdqs/web-select
  7. // @version             0.2.4
  8. // @description         由于Web选择太好用，微软就把他砍掉了。本脚本实现了Web选择的部分功能。按下Alt+S即可选择文本。
  9. // @description:en      Due to the ease with which the "web select" was used, Microsoft cut it off. This script implements some functions of "web select". Press Alt+S to select text.
  10. // @description:zh-TW   由於Web選擇功能非常實用，微軟就將它砍掉了。本腳本實現了Web選擇的部分功能。按下Alt+S即可選擇文本。
  11. // @author              HowardZhangdqs
  12. // @match               *://*/*
  13. // @license             MIT
  14. // @icon                data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAJcEhZcwAADsMAAA7DAcdvqGQAAABsUExURf///xYWFgMDAw4ODgICAh8fHw4ODQAAAA8PD9LS0gEBAR4eHgcHBwoKCgUFBQgICCAgICgoKCwsLB0dHSQkJCYmJvv7+vr6+ZiYlyMjIhwcHJaWlBsbGxgYGAYGBnV2dfz9/BAQEHR0cw0NDWBB0hYAAAFaSURBVFjD7VbZkoMgEARBwNvNsfed///HAJoUq3Ga1a0tH+ynQXragWmtYWzDelEopXzQmgu+/Jorxe9gOtceNjI6gF2X14hC0ic8MZYPBIJwGqonlSzIsHhkkQpu/xlVqKa3D3b7QJ+RLqHAlyRIisICaqkAXYE9YYKMAijYaTGU/0dWu+4+eL9DcjOm1J1DZZQP2jFF6qtARBvNiJK65FxK+TlTwOWnfXyaIZDZB9UvnHhT4HWpQLoJ/KGANcUH/h98EwJzvsSVCST6HiUMKT8EWtyFguyCWdrGxQJHLKCRkYDCzv2+yC644cCY7r78eCOEEd2aC+OHjh3lg2CIGI44TTh8TBupZx0nRxyBnFi4xGYw4rxc1uVKv4U9JGW0M96xeQiFHLoPnNLNtm+LrknTFWIBrgGhQm/oBoSUfAF9S1IjIKdUIF9iO5FF8ChL7it5EzVnG1aMM5cYFmmzQuXPAAAAAElFTkSuQmCC
  15. // @grant               none
  16. // ==/UserScript==
  17.  
  18. (() => {
  19.     var UnselectedBoxStyle = {
  20.         border: "1px solid #fff",
  21.         outline: "1px dashed #000",
  22.         outlineOffset: "-1px",
  23.         zIndex: "99999",
  24.     };
  25.     var SelectedBoxStyle = {
  26.         border: "1px solid #fff",
  27.         outline: "1px solid #000",
  28.         outlineOffset: "0",
  29.         zIndex: "99999",
  30.     };
  31.     var SelectBoxStyle = {
  32.         position: "fixed",
  33.         outline: "3px dashed white",
  34.         zIndex: "99999",
  35.     };
  36.     var addStylesheetRules = function (dom, decls) {
  37.         if (dom instanceof HTMLElement) dom = [dom];
  38.         for (var i in decls) {
  39.             for (var _i = 0, dom_1 = dom; _i < dom_1.length; _i++) {
  40.                 var j = dom_1[_i];
  41.                 j.style[i] = decls[i];
  42.             }
  43.         }
  44.     };
  45.  
  46.     var makeButton = function (top, left) {
  47.         var button = document.createElement("button");
  48.         button.innerText = "Web选择";
  49.         button.style.position = "fixed";
  50.         if (top) button.style.top = "".concat(top, "px");
  51.         else button.style.bottom = "10px";
  52.         if (left) button.style.left = "".concat(left, "px");
  53.         else button.style.right = "10px";
  54.         button.style.zIndex = "99999";
  55.         button.style.padding = "10px";
  56.         button.style.borderRadius = "10px";
  57.         button.style.background = "#fff";
  58.         button.style.color = "#000";
  59.         button.style.border = "1px solid #000";
  60.         button.style.cursor = "pointer";
  61.  
  62.         document.body.appendChild(button);
  63.         return button;
  64.     };
  65.  
  66.     var getElementsPosition = function () {
  67.         var elements = [];
  68.         var allElements = document.querySelectorAll("*");
  69.         allElements.forEach(function (element) {
  70.             var _a = element.getBoundingClientRect(),
  71.                 top = _a.top,
  72.                 left = _a.left,
  73.                 width = _a.width,
  74.                 height = _a.height;
  75.             if (top && left && width && height && element.innerText)
  76.                 elements.push({
  77.                     top: top,
  78.                     left: left,
  79.                     width: width,
  80.                     height: height,
  81.                     text: element.innerText,
  82.                     src: element,
  83.                 });
  84.         });
  85.         return elements;
  86.     };
  87.  
  88.     var makeDiv = function (_a) {
  89.         var top = _a.top,
  90.             left = _a.left,
  91.             width = _a.width,
  92.             height = _a.height,
  93.             text = _a.text,
  94.             src = _a.src;
  95.         var div = document.createElement("div");
  96.         div.style.position = "fixed";
  97.         div.style.top = "".concat(top, "px");
  98.         div.style.left = "".concat(left, "px");
  99.         div.style.width = "".concat(width, "px");
  100.         div.style.height = "".concat(height, "px");
  101.         addStylesheetRules(div, UnselectedBoxStyle);
  102.         div.style.zIndex = "99999";
  103.         document.body.appendChild(div);
  104.         return {
  105.             top: top,
  106.             left: left,
  107.             width: width,
  108.             height: height,
  109.             text: text,
  110.             el: div,
  111.             src: src,
  112.         };
  113.     };
  114.  
  115.     var dragSelect = function (allBoxes) {
  116.         return new Promise(function (resolve, reject) {
  117.             var div = document.createElement("div");
  118.             addStylesheetRules(div, SelectBoxStyle);
  119.             document.body.appendChild(div);
  120.             var mask = [];
  121.             var selectedBox = {
  122.                 _p1: [0, 0],
  123.                 _p2: [0, 0],
  124.                 set p1(val) {
  125.                     this._p1[0] = Math.floor(val[0]);
  126.                     this._p1[1] = Math.floor(val[1]);
  127.                     this.runwatch();
  128.                 },
  129.                 set p2(val) {
  130.                     this._p2[0] = Math.floor(val[0]);
  131.                     this._p2[1] = Math.floor(val[1]);
  132.                     this.runwatch();
  133.                 },
  134.                 get p1() {
  135.                     return this._p1;
  136.                 },
  137.                 get p2() {
  138.                     return this._p2;
  139.                 },
  140.                 get top() {
  141.                     return Math.min(this._p1[0], this._p2[0]);
  142.                 },
  143.                 get left() {
  144.                     return Math.min(this._p1[1], this._p2[1]);
  145.                 },
  146.                 get width() {
  147.                     return Math.abs(this._p1[1] - this._p2[1]);
  148.                 },
  149.                 get height() {
  150.                     return Math.abs(this._p1[0] - this._p2[0]);
  151.                 },
  152.                 watchfn: [],
  153.                 watch: function (callback) {
  154.                     this.watchfn.push(callback);
  155.                 },
  156.                 unwatch: function (callback) {
  157.                     this.watchfn = this.watchfn.filter(function (fn) {
  158.                         return fn !== callback;
  159.                     });
  160.                 },
  161.                 runwatch: function () {
  162.                     for (var _i = 0, _a = this.watchfn; _i < _a.length; _i++) {
  163.                         var fn = _a[_i];
  164.                         fn(this);
  165.                     }
  166.                 },
  167.             };
  168.  
  169.             var makeMask = function () {
  170.                 var mask1 = document.createElement("div");
  171.                 var mask2 = document.createElement("div");
  172.                 var mask3 = document.createElement("div");
  173.                 var mask4 = document.createElement("div");
  174.                 addStylesheetRules([mask1, mask2, mask3, mask4], {
  175.                     position: "fixed",
  176.                     top: "0",
  177.                     left: "0",
  178.                     background: "#0007",
  179.                     zIndex: "99997",
  180.                 });
  181.                 selectedBox.watch(function () {
  182.                     addStylesheetRules(mask1, {
  183.                         top: "0",
  184.                         left: "0",
  185.                         width: "".concat(selectedBox.left, "px"),
  186.                         height: "100%",
  187.                     });
  188.                     addStylesheetRules(mask2, {
  189.                         top: "0",
  190.                         left: "".concat(selectedBox.left, "px"),
  191.                         width: "".concat(selectedBox.width, "px"),
  192.                         height: "".concat(selectedBox.top, "px"),
  193.                     });
  194.                     addStylesheetRules(mask3, {
  195.                         top: "".concat(
  196.                             selectedBox.top + selectedBox.height,
  197.                             "px",
  198.                         ),
  199.                         left: "".concat(selectedBox.left, "px"),
  200.                         width: "".concat(selectedBox.width, "px"),
  201.                         height: "calc(100% - ".concat(
  202.                             selectedBox.top + selectedBox.height,
  203.                             "px)",
  204.                         ),
  205.                     });
  206.                     addStylesheetRules(mask4, {
  207.                         top: "0px",
  208.                         left: "".concat(
  209.                             selectedBox.left + selectedBox.width,
  210.                             "px",
  211.                         ),
  212.                         width: "calc(100% - ".concat(
  213.                             selectedBox.left + selectedBox.width,
  214.                             "px)",
  215.                         ),
  216.                         height: "100vh",
  217.                     });
  218.                 });
  219.                 document.body.appendChild(mask1);
  220.                 document.body.appendChild(mask2);
  221.                 document.body.appendChild(mask3);
  222.                 document.body.appendChild(mask4);
  223.                 return [mask1, mask2, mask3, mask4];
  224.             };
  225.             var mouseDown = function (e) {
  226.                 e.preventDefault();
  227.  
  228.                 mask.push.apply(mask, makeMask());
  229.                 div.style.display = "block";
  230.                 selectedBox.p1 = [e.clientY, e.clientX];
  231.                 selectedBox.p2 = [e.clientY, e.clientX];
  232.                 div.style.top = "".concat(selectedBox.top, "px");
  233.                 div.style.left = "".concat(selectedBox.left, "px");
  234.                 div.style.width = "0";
  235.                 div.style.height = "0";
  236.                 document.addEventListener("mousemove", mouseMove);
  237.                 document.addEventListener("mouseup", mouseUp);
  238.             };
  239.             var getSelectedElements = function () {
  240.                 return allBoxes.filter(function (el) {
  241.                     if (
  242.                         el.left < selectedBox.left ||
  243.                         el.top < selectedBox.top ||
  244.                         el.left + el.width >
  245.                             selectedBox.left + selectedBox.width ||
  246.                         el.top + el.height >
  247.                             selectedBox.top + selectedBox.height
  248.                     ) {
  249.                         return false;
  250.                     }
  251.                     return true;
  252.                 });
  253.             };
  254.             var mouseMove = function (e) {
  255.                 e.preventDefault();
  256.                 selectedBox.p2 = [e.clientY, e.clientX];
  257.                 div.style.top = "".concat(selectedBox.top, "px");
  258.                 div.style.left = "".concat(selectedBox.left, "px");
  259.                 div.style.width = "".concat(selectedBox.width, "px");
  260.                 div.style.height = "".concat(selectedBox.height, "px");
  261.                 var selectedElements = getSelectedElements();
  262.                 for (
  263.                     var _i = 0, allBoxes_1 = allBoxes;
  264.                     _i < allBoxes_1.length;
  265.                     _i++
  266.                 ) {
  267.                     var el = allBoxes_1[_i];
  268.                     if (selectedElements.includes(el)) {
  269.                         addStylesheetRules(el.el, SelectedBoxStyle);
  270.                     } else {
  271.                         addStylesheetRules(el.el, UnselectedBoxStyle);
  272.                     }
  273.                 }
  274.                 console.log(
  275.                     selectedElements
  276.                         .sort(function (a, b) {
  277.                             return b.left - a.left;
  278.                         })
  279.                         .sort(function (a, b) {
  280.                             return b.top - a.top;
  281.                         }),
  282.                 );
  283.             };
  284.             var mouseUp = function (e) {
  285.                 document.removeEventListener("mousemove", mouseMove);
  286.                 document.removeEventListener("mouseup", mouseUp);
  287.                 document.removeEventListener("mousedown", mouseDown);
  288.                 div.remove();
  289.                 for (var _i = 0, mask_1 = mask; _i < mask_1.length; _i++) {
  290.                     var i = mask_1[_i];
  291.                     i.remove();
  292.                 }
  293.                 addStylesheetRules(document.body, { pointerEvents: "" });
  294.                 resolve({
  295.                     top: parseInt(div.style.top),
  296.                     left: parseInt(div.style.left),
  297.                     width: parseInt(div.style.width),
  298.                     height: parseInt(div.style.height),
  299.                     el: getSelectedElements(),
  300.                 });
  301.             };
  302.             document.addEventListener("mousedown", mouseDown);
  303.             document.addEventListener("mouseup", mouseUp);
  304.             addStylesheetRules(document.body, { pointerEvents: "none" });
  305.         });
  306.     };
  307.  
  308.     var isChild = function (parent, child) {
  309.         var node = child.parentNode;
  310.         while (node !== null) {
  311.             if (node === parent) return true;
  312.             node = node.parentNode;
  313.         }
  314.         return false;
  315.     };
  316.  
  317.     var __awaiter =
  318.         (undefined && undefined.__awaiter) ||
  319.         function (thisArg, _arguments, P, generator) {
  320.             function adopt(value) {
  321.                 return value instanceof P
  322.                     ? value
  323.                     : new P(function (resolve) {
  324.                           resolve(value);
  325.                       });
  326.             }
  327.             return new (P || (P = Promise))(function (resolve, reject) {
  328.                 function fulfilled(value) {
  329.                     try {
  330.                         step(generator.next(value));
  331.                     } catch (e) {
  332.                         reject(e);
  333.                     }
  334.                 }
  335.                 function rejected(value) {
  336.                     try {
  337.                         step(generator["throw"](value));
  338.                     } catch (e) {
  339.                         reject(e);
  340.                     }
  341.                 }
  342.                 function step(result) {
  343.                     result.done
  344.                         ? resolve(result.value)
  345.                         : adopt(result.value).then(fulfilled, rejected);
  346.                 }
  347.                 step(
  348.                     (generator = generator.apply(
  349.                         thisArg,
  350.                         _arguments || [],
  351.                     )).next(),
  352.                 );
  353.             });
  354.         };
  355.     var __generator =
  356.         (undefined && undefined.__generator) ||
  357.         function (thisArg, body) {
  358.             var _ = {
  359.                     label: 0,
  360.                     sent: function () {
  361.                         if (t[0] & 1) throw t[1];
  362.                         return t[1];
  363.                     },
  364.                     trys: [],
  365.                     ops: [],
  366.                 },
  367.                 f,
  368.                 y,
  369.                 t,
  370.                 g;
  371.             return (
  372.                 (g = { next: verb(0), throw: verb(1), return: verb(2) }),
  373.                 typeof Symbol === "function" &&
  374.                     (g[Symbol.iterator] = function () {
  375.                         return this;
  376.                     }),
  377.                 g
  378.             );
  379.             function verb(n) {
  380.                 return function (v) {
  381.                     return step([n, v]);
  382.                 };
  383.             }
  384.             function step(op) {
  385.                 if (f) throw new TypeError("Generator is already executing.");
  386.                 while ((g && ((g = 0), op[0] && (_ = 0)), _))
  387.                     try {
  388.                         if (
  389.                             ((f = 1),
  390.                             y &&
  391.                                 (t =
  392.                                     op[0] & 2
  393.                                         ? y["return"]
  394.                                         : op[0]
  395.                                           ? y["throw"] ||
  396.                                             ((t = y["return"]) && t.call(y), 0)
  397.                                           : y.next) &&
  398.                                 !(t = t.call(y, op[1])).done)
  399.                         )
  400.                             return t;
  401.                         if (((y = 0), t)) op = [op[0] & 2, t.value];
  402.                         switch (op[0]) {
  403.                             case 0:
  404.                             case 1:
  405.                                 t = op;
  406.                                 break;
  407.                             case 4:
  408.                                 _.label++;
  409.                                 return { value: op[1], done: false };
  410.                             case 5:
  411.                                 _.label++;
  412.                                 y = op[1];
  413.                                 op = [0];
  414.                                 continue;
  415.                             case 7:
  416.                                 op = _.ops.pop();
  417.                                 _.trys.pop();
  418.                                 continue;
  419.                             default:
  420.                                 if (
  421.                                     !((t = _.trys),
  422.                                     (t = t.length > 0 && t[t.length - 1])) &&
  423.                                     (op[0] === 6 || op[0] === 2)
  424.                                 ) {
  425.                                     _ = 0;
  426.                                     continue;
  427.                                 }
  428.                                 if (
  429.                                     op[0] === 3 &&
  430.                                     (!t || (op[1] > t[0] && op[1] < t[3]))
  431.                                 ) {
  432.                                     _.label = op[1];
  433.                                     break;
  434.                                 }
  435.                                 if (op[0] === 6 && _.label < t[1]) {
  436.                                     _.label = t[1];
  437.                                     t = op;
  438.                                     break;
  439.                                 }
  440.                                 if (t && _.label < t[2]) {
  441.                                     _.label = t[2];
  442.                                     _.ops.push(op);
  443.                                     break;
  444.                                 }
  445.                                 if (t[2]) _.ops.pop();
  446.                                 _.trys.pop();
  447.                                 continue;
  448.                         }
  449.                         op = body.call(thisArg, _);
  450.                     } catch (e) {
  451.                         op = [6, e];
  452.                         y = 0;
  453.                     } finally {
  454.                         f = t = 0;
  455.                     }
  456.                 if (op[0] & 5) throw op[1];
  457.                 return { value: op[0] ? op[1] : void 0, done: true };
  458.             }
  459.         };
  460.  
  461.     var main = function () {
  462.         return __awaiter(void 0, void 0, void 0, function () {
  463.             var mask,
  464.                 quit,
  465.                 ElementPositions,
  466.                 allBoxes,
  467.                 _i,
  468.                 ElementPositions_1,
  469.                 position,
  470.                 selectedBox,
  471.                 _a,
  472.                 allBoxes_1,
  473.                 div,
  474.                 filtered;
  475.             return __generator(this, function (_b) {
  476.                 switch (_b.label) {
  477.                     case 0:
  478.                         mask = document.createElement("div");
  479.                         addStylesheetRules(mask, {
  480.                             position: "fixed",
  481.                             top: "0",
  482.                             left: "0",
  483.                             inlineSize: "100%",
  484.                             blockSize: "100%",
  485.                             zIndex: "99998",
  486.                             background: "#0007",
  487.                         });
  488.                         quit = function () {};
  489.                         ElementPositions = getElementsPosition();
  490.                         console.log(ElementPositions);
  491.                         allBoxes = [];
  492.                         for (
  493.                             _i = 0, ElementPositions_1 = ElementPositions;
  494.                             _i < ElementPositions_1.length;
  495.                             _i++
  496.                         ) {
  497.                             position = ElementPositions_1[_i];
  498.                             allBoxes.push(makeDiv(position));
  499.                         }
  500.                         return [4, dragSelect(allBoxes)];
  501.                     case 1:
  502.                         selectedBox = _b.sent();
  503.                         for (
  504.                             _a = 0, allBoxes_1 = allBoxes;
  505.                             _a < allBoxes_1.length;
  506.                             _a++
  507.                         ) {
  508.                             div = allBoxes_1[_a];
  509.                             div.el.remove();
  510.                         }
  511.                         filtered = selectedBox.el
  512.                             .filter(function (val, index, arr) {
  513.                                 console.log(val, index, arr);
  514.                                 for (
  515.                                     var _i = 0, arr_1 = arr;
  516.                                     _i < arr_1.length;
  517.                                     _i++
  518.                                 ) {
  519.                                     var i = arr_1[_i];
  520.                                     if (isChild(i.src, val.src)) return false;
  521.                                 }
  522.                                 return true;
  523.                             })
  524.                             .sort(function (a, b) {
  525.                                 return a.left - b.left;
  526.                             })
  527.                             .sort(function (a, b) {
  528.                                 return a.top - b.top;
  529.                             });
  530.                         console.log(
  531.                             filtered.map(function (el) {
  532.                                 return el.text;
  533.                             }),
  534.                         );
  535.                         navigator.clipboard.writeText(
  536.                             filtered
  537.                                 .map(function (el) {
  538.                                     return el.text;
  539.                                 })
  540.                                 .join("\n\n"),
  541.                         );
  542.                         return [2];
  543.                 }
  544.             });
  545.         });
  546.     };
  547.  
  548.     window.addEventListener("keydown", function (e) {
  549.         if (e.key === "s" && e.altKey && !e.ctrlKey && !e.shiftKey) main();
  550.     });
  551. })();

欢迎访问Greasy Fork镜像

土豆服务器，请按需使用

镜像地址随时可能被墙，建议加群获取最新地址

加入Q群

QingJ © 2025

镜像随时可能失效，请加Q群300939539或关注我们的公众号极客氢云获取最新地址