☰

GitHub Project Filter Formatter with Saved Filters

Adds fuzzy search button inside input and frequently used filters toolbar above GitHub project filter input.

  1. // ==UserScript==
  2. // @name         GitHub Project Filter Formatter with Saved Filters
  3. // @namespace    http://tampermonkey.net/
  4. // @version      2.4
  5. // @description  Adds fuzzy search button inside input and frequently used filters toolbar above GitHub project filter input.
  6. // @author       xiaohaoxing
  7. // @match        https://github.com/orgs/.*/projects/.*
  8. // @match        https://github.com/*/*/projects/*
  9. // @grant        none
  10. // @icon         https://github.githubassets.com/favicons/favicon.svg
  11. // @license      MIT
  12. // ==/UserScript==
  13.  
  14. (function() {
  15.     'use strict';
  16.  
  17.     const INPUT_ID = 'filter-bar-component-input';
  18.     const BUTTON_ID = 'tampermonkey-format-title-button';
  19.     const BUTTON_TEXT = '模糊';
  20.     const SAVE_BUTTON_ID = 'tampermonkey-save-filter-button';
  21.     const SAVE_BUTTON_TEXT = '⭐';
  22.     const DROPDOWN_ID = 'tampermonkey-saved-filters-dropdown';
  23.     const TOOLBAR_ID = 'tampermonkey-filter-toolbar';
  24.     const WRAPPER_CLASS = 'tampermonkey-input-wrapper';
  25.     const MIN_INPUT_TEXT_AREA_WIDTH = 50;
  26.     const STORAGE_KEY = 'github-project-saved-filters';
  27.  
  28.     let filterInput = null;
  29.     let formatButton = null;
  30.     let saveButton = null;
  31.     let savedFiltersDropdown = null;
  32.     let toolbar = null;
  33.     let inputWrapper = null;
  34.     let resizeObserver = null;
  35.  
  36.     function getSavedFilters() {
  37.         const saved = localStorage.getItem(STORAGE_KEY);
  38.         return saved ? JSON.parse(saved) : [];
  39.     }
  40.  
  41.     function saveFilter(name, value) {
  42.         const filters = getSavedFilters();
  43.         const newFilter = { name, value, id: Date.now() };
  44.         filters.push(newFilter);
  45.         localStorage.setItem(STORAGE_KEY, JSON.stringify(filters));
  46.         updateDropdown();
  47.         return newFilter;
  48.     }
  49.  
  50.     function deleteFilter(id) {
  51.         const filters = getSavedFilters();
  52.         const updated = filters.filter(f => f.id !== id);
  53.         localStorage.setItem(STORAGE_KEY, JSON.stringify(updated));
  54.         updateDropdown();
  55.     }
  56.  
  57.     function showManageFiltersDialog() {
  58.         const filters = getSavedFilters();
  59.         if (filters.length === 0) {
  60.             alert('没有保存的筛选条件');
  61.             return;
  62.         }
  63.  
  64.         let message = '已保存的筛选条件：\n\n';
  65.         filters.forEach((filter, index) => {
  66.             message += `${index + 1}. ${filter.name}\n   值: ${filter.value}\n\n`;
  67.         });
  68.         message += '\n输入要删除的筛选条件编号（1-' + filters.length + '），或点击取消：';
  69.  
  70.         const input = prompt(message);
  71.         if (input) {
  72.             const index = parseInt(input) - 1;
  73.             if (index >= 0 && index < filters.length) {
  74.                 const filterToDelete = filters[index];
  75.                 if (confirm(`确定要删除"${filterToDelete.name}"吗？`)) {
  76.                     deleteFilter(filterToDelete.id);
  77.                     alert('筛选条件已删除');
  78.                 }
  79.             } else {
  80.                 alert('无效的编号');
  81.             }
  82.         }
  83.     }
  84.  
  85.     function applyFilter(value) {
  86.         const currentDomInput = document.getElementById(INPUT_ID);
  87.         if (!currentDomInput) return;
  88.         filterInput = currentDomInput;
  89.         
  90.         const valueSetter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, 'value')?.set ||
  91.                             Object.getOwnPropertyDescriptor(window.HTMLTextAreaElement.prototype, 'value')?.set;
  92.         if (valueSetter) {
  93.             valueSetter.call(filterInput, value);
  94.         } else {
  95.             filterInput.value = value;
  96.         }
  97.         const inputEvent = new Event('input', { bubbles: true, cancelable: true });
  98.         filterInput.dispatchEvent(inputEvent);
  99.         filterInput.focus();
  100.     }
  101.  
  102.     function createSaveButton() {
  103.         const existingButton = document.getElementById(SAVE_BUTTON_ID);
  104.         if (existingButton) {
  105.             return existingButton;
  106.         }
  107.  
  108.         const button = document.createElement('button');
  109.         button.id = SAVE_BUTTON_ID;
  110.         button.textContent = SAVE_BUTTON_TEXT;
  111.         button.type = 'button';
  112.         button.title = '保存当前筛选条件';
  113.         button.className = 'btn btn-sm';
  114.         button.style.fontSize = '12px';
  115.         button.style.lineHeight = '18px';
  116.         button.style.height = '28px';
  117.  
  118.         // Override specific styles to ensure consistency
  119.         button.style.display = 'inline-flex';
  120.         button.style.alignItems = 'center';
  121.         button.style.gap = '4px';
  122.         button.style.marginLeft = '0';
  123.         button.style.padding = '4px 8px';
  124.         button.style.minWidth = 'auto';
  125.         button.style.fontWeight = '500';
  126.  
  127.         // Add hover effects
  128.         button.addEventListener('mouseenter', () => {
  129.             button.classList.add('btn-hover');
  130.         });
  131.         button.addEventListener('mouseleave', () => {
  132.             button.classList.remove('btn-hover');
  133.         });
  134.  
  135.         button.addEventListener('click', (event) => {
  136.             event.preventDefault();
  137.             event.stopPropagation();
  138.             
  139.             const currentDomInput = document.getElementById(INPUT_ID);
  140.             if (!currentDomInput) return;
  141.             filterInput = currentDomInput;
  142.             
  143.             if (filterInput.value.trim() !== '') {
  144.                 const filterName = prompt('请输入筛选条件的名称：', filterInput.value.substring(0, 20));
  145.                 if (filterName && filterName.trim()) {
  146.                     saveFilter(filterName.trim(), filterInput.value);
  147.                     alert('筛选条件已保存！');
  148.                 }
  149.             } else {
  150.                 alert('请先输入筛选条件');
  151.             }
  152.         });
  153.  
  154.         return button;
  155.     }
  156.  
  157.     function createDropdown() {
  158.         const existingDropdown = document.getElementById(DROPDOWN_ID);
  159.         if (existingDropdown) {
  160.             return existingDropdown;
  161.         }
  162.  
  163.         const dropdown = document.createElement('select');
  164.         dropdown.id = DROPDOWN_ID;
  165.         dropdown.className = 'form-select select-sm';
  166.         
  167.         // Override specific styles
  168.         dropdown.style.minWidth = '120px';
  169.         dropdown.style.maxWidth = '200px';
  170.         dropdown.style.marginRight = '8px'; // Small gap between dropdown and button
  171.         dropdown.style.height = '28px';
  172.         dropdown.style.fontSize = '12px';
  173.         dropdown.style.lineHeight = '18px';
  174.         dropdown.style.paddingLeft = '12px';
  175.         dropdown.style.paddingRight = '32px';
  176.         dropdown.style.border = '1px solid var(--color-border-default, rgba(31, 35, 40, 0.15))';
  177.         dropdown.style.borderRadius = '6px';
  178.         dropdown.style.backgroundColor = 'var(--color-canvas-default, #ffffff)';
  179.         dropdown.style.color = 'var(--color-fg-default, #24292f)';
  180.         dropdown.style.backgroundImage = 'url("data:image/svg+xml,%3Csvg width=\'16\' height=\'16\' viewBox=\'0 0 16 16\' fill=\'%23586069\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cpath d=\'M4.427 7.427l3.396 3.396a.25.25 0 00.354 0l3.396-3.396A.25.25 0 0011.396 7H4.604a.25.25 0 00-.177.427z\'/%3E%3C/svg%3E")';
  181.         dropdown.style.backgroundRepeat = 'no-repeat';
  182.         dropdown.style.backgroundPosition = 'right 8px center';
  183.         dropdown.style.backgroundSize = '16px';
  184.         dropdown.style.appearance = 'none';
  185.         dropdown.style.cursor = 'pointer';
  186.  
  187.         // Add hover effect
  188.         dropdown.addEventListener('mouseenter', () => {
  189.             dropdown.style.borderColor = 'var(--color-border-muted, rgba(31, 35, 40, 0.3))';
  190.             dropdown.style.backgroundColor = 'var(--color-canvas-subtle, #f6f8fa)';
  191.         });
  192.         dropdown.addEventListener('mouseleave', () => {
  193.             dropdown.style.borderColor = 'var(--color-border-default, rgba(31, 35, 40, 0.15))';
  194.             dropdown.style.backgroundColor = 'var(--color-canvas-default, #ffffff)';
  195.         });
  196.  
  197.         // Add focus styles
  198.         dropdown.addEventListener('focus', () => {
  199.             dropdown.style.outline = '2px solid var(--color-accent-fg, #0969da)';
  200.             dropdown.style.outlineOffset = '-1px';
  201.         });
  202.         dropdown.addEventListener('blur', () => {
  203.             dropdown.style.outline = 'none';
  204.         });
  205.  
  206.         dropdown.addEventListener('change', (event) => {
  207.             const selectedValue = event.target.value;
  208.             if (!selectedValue) return;
  209.  
  210.             if (selectedValue === 'manage') {
  211.                 // Show management dialog
  212.                 showManageFiltersDialog();
  213.             } else {
  214.                 const selectedId = parseInt(selectedValue);
  215.                 const filters = getSavedFilters();
  216.                 const filter = filters.find(f => f.id === selectedId);
  217.                 
  218.                 if (filter) {
  219.                     applyFilter(filter.value);
  220.                 }
  221.             }
  222.             
  223.             dropdown.value = '';
  224.         });
  225.  
  226.         updateDropdown(dropdown);
  227.         return dropdown;
  228.     }
  229.  
  230.     function updateDropdown(dropdown) {
  231.         dropdown = dropdown || document.getElementById(DROPDOWN_ID);
  232.         if (!dropdown) return;
  233.  
  234.         const filters = getSavedFilters();
  235.         dropdown.innerHTML = '';
  236.  
  237.         const defaultOption = document.createElement('option');
  238.         defaultOption.value = '';
  239.         defaultOption.textContent = filters.length > 0 ? '常用筛选...' : '无保存的筛选';
  240.         dropdown.appendChild(defaultOption);
  241.  
  242.         filters.forEach(filter => {
  243.             const option = document.createElement('option');
  244.             option.value = filter.id;
  245.             option.textContent = filter.name;
  246.             option.title = filter.value;
  247.             dropdown.appendChild(option);
  248.         });
  249.  
  250.         // Add manage option if there are saved filters
  251.         if (filters.length > 0) {
  252.             const separator = document.createElement('option');
  253.             separator.disabled = true;
  254.             separator.textContent = '────────';
  255.             dropdown.appendChild(separator);
  256.  
  257.             const manageOption = document.createElement('option');
  258.             manageOption.value = 'manage';
  259.             manageOption.textContent = '🗑️ 管理筛选条件';
  260.             manageOption.style.fontStyle = 'italic';
  261.             dropdown.appendChild(manageOption);
  262.         }
  263.  
  264.         dropdown.style.display = filters.length > 0 ? 'block' : 'none';
  265.     }
  266.  
  267.     function createFormatButton() {
  268.         const existingButton = document.getElementById(BUTTON_ID);
  269.         if (existingButton) {
  270.             return existingButton;
  271.         }
  272.  
  273.         const button = document.createElement('button');
  274.         button.id = BUTTON_ID;
  275.         button.textContent = BUTTON_TEXT;
  276.         button.type = 'button';
  277.         button.title = '转换为模糊搜索格式';
  278.         button.className = 'btn-sm';
  279.  
  280.         // Style for button inside input with GitHub native look
  281.         button.style.position = 'absolute';
  282.         button.style.top = '50%';
  283.         button.style.right = '28px';
  284.         button.style.transform = 'translateY(-50%)';
  285.         button.style.zIndex = '10';
  286.         button.style.padding = '3px 8px';
  287.         button.style.fontSize = '12px';
  288.         button.style.height = '24px';
  289.         button.style.lineHeight = '1';
  290.         button.style.display = 'inline-flex';
  291.         button.style.alignItems = 'center';
  292.         button.style.justifyContent = 'center';
  293.         button.style.border = '1px solid var(--color-border-default, rgba(31, 35, 40, 0.15))';
  294.         button.style.borderRadius = '6px';
  295.         button.style.backgroundColor = 'var(--color-btn-bg, #f6f8fa)';
  296.         button.style.color = 'var(--color-fg-default, #24292f)';
  297.         button.style.cursor = 'pointer';
  298.         button.style.fontWeight = '500';
  299.         button.style.whiteSpace = 'nowrap';
  300.         button.style.transition = 'background-color 0.2s, border-color 0.2s';
  301.  
  302.         button.addEventListener('mouseenter', () => {
  303.             button.style.backgroundColor = 'var(--color-btn-hover-bg, #f3f4f6)';
  304.             button.style.borderColor = 'var(--color-border-muted, rgba(31, 35, 40, 0.3))';
  305.         });
  306.         button.addEventListener('mouseleave', () => {
  307.             button.style.backgroundColor = 'var(--color-btn-bg, #f6f8fa)';
  308.             button.style.borderColor = 'var(--color-border-default, rgba(31, 35, 40, 0.15))';
  309.         });
  310.  
  311.         button.addEventListener('click', (event) => {
  312.             event.preventDefault();
  313.             event.stopPropagation();
  314.             const currentDomInput = document.getElementById(INPUT_ID);
  315.             if (!currentDomInput) return;
  316.             filterInput = currentDomInput;
  317.  
  318.             if (filterInput.value.trim() !== '') {
  319.                 const originalValue = filterInput.value;
  320.                 const newValue = `title:*${originalValue}*`;
  321.                 applyFilter(newValue);
  322.             }
  323.         });
  324.         return button;
  325.     }
  326.  
  327.     function createToolbar() {
  328.         const existingToolbar = document.getElementById(TOOLBAR_ID);
  329.         if (existingToolbar) {
  330.             return existingToolbar;
  331.         }
  332.  
  333.         const toolbar = document.createElement('div');
  334.         toolbar.id = TOOLBAR_ID;
  335.         toolbar.style.display = 'flex';
  336.         toolbar.style.alignItems = 'center';
  337.         toolbar.style.marginBottom = '4px';
  338.         toolbar.style.gap = '0';
  339.         toolbar.style.paddingLeft = '0';
  340.         toolbar.style.paddingRight = '0';
  341.         toolbar.style.width = 'auto';
  342.  
  343.         return toolbar;
  344.     }
  345.  
  346.     function adjustLayout() {
  347.         if (!filterInput || !inputWrapper || !formatButton) return;
  348.  
  349.         // Ensure input fills the wrapper and has box-sizing: border-box
  350.         filterInput.style.width = '100%';
  351.         filterInput.style.boxSizing = 'border-box';
  352.  
  353.         // Temporarily show button to measure its width if it was hidden
  354.         const wasButtonHidden = formatButton.style.display === 'none';
  355.         if (wasButtonHidden) {
  356.             formatButton.style.visibility = 'hidden';
  357.             formatButton.style.display = 'inline-flex';
  358.         }
  359.  
  360.         const buttonActualWidth = formatButton.offsetWidth;
  361.  
  362.         if (wasButtonHidden) {
  363.             formatButton.style.display = 'none';
  364.             formatButton.style.visibility = 'visible';
  365.         }
  366.  
  367.         const wrapperInnerWidth = inputWrapper.clientWidth -
  368.                                  (parseFloat(getComputedStyle(inputWrapper).paddingLeft) || 0) -
  369.                                  (parseFloat(getComputedStyle(inputWrapper).paddingRight) || 0);
  370.  
  371.         const spaceForButtonAndGap = buttonActualWidth + 16; // Button width + gap from right edge
  372.  
  373.         // Check if there's enough space for the button AND a minimum text area
  374.         if (buttonActualWidth > 0 && (wrapperInnerWidth - spaceForButtonAndGap) >= MIN_INPUT_TEXT_AREA_WIDTH) {
  375.             filterInput.style.paddingRight = `${spaceForButtonAndGap}px`;
  376.             formatButton.style.display = 'inline-flex';
  377.         } else {
  378.             // Not enough space, hide button and reset padding
  379.             filterInput.style.paddingRight = '8px';
  380.             formatButton.style.display = 'none';
  381.         }
  382.     }
  383.  
  384.     function setupInputAndButton() {
  385.         const currentDomInput = document.getElementById(INPUT_ID);
  386.  
  387.         if (!currentDomInput) {
  388.             // Input disappeared, cleanup
  389.             if (resizeObserver && inputWrapper) {
  390.                 resizeObserver.unobserve(inputWrapper);
  391.             }
  392.             if (formatButton && formatButton.parentNode) formatButton.parentNode.removeChild(formatButton);
  393.             if (toolbar && toolbar.parentNode) toolbar.parentNode.removeChild(toolbar);
  394.             if (inputWrapper && inputWrapper.parentNode && inputWrapper.classList.contains(WRAPPER_CLASS)) {
  395.                 const originalParent = inputWrapper.parentNode;
  396.                 if (filterInput && document.body.contains(filterInput) && filterInput.parentElement !== originalParent) {
  397.                     originalParent.insertBefore(filterInput, inputWrapper);
  398.                     filterInput.style.paddingRight = '';
  399.                     filterInput.style.width = '';
  400.                 }
  401.                 originalParent.removeChild(inputWrapper);
  402.             }
  403.             filterInput = null;
  404.             inputWrapper = null;
  405.             formatButton = null;
  406.             toolbar = null;
  407.             saveButton = null;
  408.             savedFiltersDropdown = null;
  409.             return;
  410.         }
  411.  
  412.         filterInput = currentDomInput;
  413.  
  414.         // Setup input wrapper for fuzzy button
  415.         if (filterInput.parentElement && filterInput.parentElement.classList.contains(WRAPPER_CLASS)) {
  416.             inputWrapper = filterInput.parentElement;
  417.         } else {
  418.             inputWrapper = document.createElement('div');
  419.             inputWrapper.classList.add(WRAPPER_CLASS);
  420.             inputWrapper.style.position = 'relative';
  421.  
  422.             // Mimic original input's display
  423.             const originalInputComputedStyle = getComputedStyle(filterInput);
  424.             inputWrapper.style.display = originalInputComputedStyle.display;
  425.             
  426.             if (originalInputComputedStyle.display === 'block' || originalInputComputedStyle.display === 'flex') {
  427.                 inputWrapper.style.width = '100%';
  428.             } else if (originalInputComputedStyle.display === 'inline-block') {
  429.                 if (originalInputComputedStyle.width !== 'auto' && !originalInputComputedStyle.width.includes('%')) {
  430.                     inputWrapper.style.width = originalInputComputedStyle.width;
  431.                 }
  432.             }
  433.             
  434.             if (filterInput.parentElement && getComputedStyle(filterInput.parentElement).display.includes('flex')) {
  435.                 inputWrapper.style.flexGrow = originalInputComputedStyle.flexGrow;
  436.                 inputWrapper.style.flexShrink = originalInputComputedStyle.flexShrink;
  437.                 inputWrapper.style.flexBasis = originalInputComputedStyle.flexBasis;
  438.             }
  439.  
  440.             if (filterInput.parentNode) {
  441.                 filterInput.parentNode.insertBefore(inputWrapper, filterInput);
  442.                 inputWrapper.appendChild(filterInput);
  443.             } else {
  444.                 console.warn("[Tampermonkey] Filter input has no parent, cannot wrap.");
  445.                 return;
  446.             }
  447.         }
  448.  
  449.         // Add fuzzy button to input wrapper
  450.         if (!formatButton || !inputWrapper.contains(formatButton)) {
  451.             formatButton = createFormatButton();
  452.             inputWrapper.appendChild(formatButton);
  453.         }
  454.  
  455.         // Setup toolbar above input
  456.         // Find the filter-bar-module__Filter_0--v8FnK div which is the form container
  457.         let formContainer = filterInput.closest('[id="filter-bar-component"]');
  458.         if (!formContainer) {
  459.             console.warn("[Tampermonkey] Could not find filter-bar-component");
  460.             return;
  461.         }
  462.  
  463.         // Find the parent that contains the entire filter section
  464.         let filterContainer = formContainer.closest('.tokenized-filter-input-module__Box--w5A7b');
  465.         if (!filterContainer) {
  466.             // Try alternative selector for the filter container
  467.             filterContainer = formContainer.parentElement;
  468.             if (!filterContainer) {
  469.                 console.warn("[Tampermonkey] Could not find tokenized filter container");
  470.                 return;
  471.             }
  472.         }
  473.  
  474.         // Create or find toolbar
  475.         if (!toolbar || !document.body.contains(toolbar)) {
  476.             toolbar = createToolbar();
  477.             
  478.             // Insert toolbar before the filter container
  479.             if (filterContainer.parentNode) {
  480.                 filterContainer.parentNode.insertBefore(toolbar, filterContainer);
  481.             } else {
  482.                 console.warn("[Tampermonkey] Could not insert toolbar");
  483.                 return;
  484.             }
  485.         }
  486.  
  487.         // Add dropdown and save button to toolbar
  488.         if (!savedFiltersDropdown || !toolbar.contains(savedFiltersDropdown)) {
  489.             savedFiltersDropdown = createDropdown();
  490.             toolbar.appendChild(savedFiltersDropdown);
  491.         }
  492.  
  493.         if (!saveButton || !toolbar.contains(saveButton)) {
  494.             saveButton = createSaveButton();
  495.             toolbar.appendChild(saveButton);
  496.         }
  497.  
  498.         // Initial layout adjustment
  499.         adjustLayout();
  500.  
  501.         // Observe wrapper for size changes
  502.         if (typeof ResizeObserver !== 'undefined') {
  503.             if (resizeObserver) {
  504.                 resizeObserver.disconnect();
  505.             }
  506.             resizeObserver = new ResizeObserver(entries => {
  507.                 requestAnimationFrame(adjustLayout);
  508.             });
  509.             if (inputWrapper) {
  510.                 resizeObserver.observe(inputWrapper);
  511.             }
  512.         }
  513.  
  514.         // Update dropdown visibility
  515.         updateDropdown();
  516.     }
  517.  
  518.     const mutationObserver = new MutationObserver(() => {
  519.         const currentInput = document.getElementById(INPUT_ID);
  520.         if (currentInput) {
  521.             if (!inputWrapper || !inputWrapper.contains(currentInput) || !formatButton || !inputWrapper.contains(formatButton) || !toolbar || !document.body.contains(toolbar)) {
  522.                 setupInputAndButton();
  523.             }
  524.         } else if (filterInput) {
  525.             setupInputAndButton(); // This will trigger the cleanup logic
  526.         }
  527.     });
  528.  
  529.     mutationObserver.observe(document.body, { childList: true, subtree: true });
  530.  
  531.     setTimeout(setupInputAndButton, 1000);
  532.  
  533. })();

欢迎访问Greasy Fork镜像

土豆服务器，请按需使用

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

加入Q群

QingJ © 2025

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