Chrome Tricks: Hide Specific Files on GitHub RepositoriesKeeping your GitHub repository view clean and focused helps you and collaborators navigate code faster. While GitHub doesn’t provide a built-in way to hide specific files in the repository UI, you can use Chrome extensions, browser developer tools, and custom user styles to hide files visually from the repository listing. This article explains why and when you might want to hide files, several reliable methods to do it in Chrome, step-by-step setups, examples, and tips to avoid pitfalls.
Why hide files in a repository view?
- Reduce visual clutter: Large repositories often contain generated files (build artifacts, compiled assets), configuration files, or documentation that can overwhelm the file list when you’re scanning code.
- Focus on relevant files: Hiding less relevant files helps reviewers and contributors concentrate on source files or modules being modified.
- Improve demos and screenshots: When showing a repo during presentations or in tutorials, hiding certain files makes examples cleaner.
- Protect casual exposure of sensitive-looking files: Although hiding files in the UI does not change repository contents or permissions, it can reduce the chance of accidental clicks on files that look sensitive (but are not truly secret).
Note: Hiding files using client-side methods only affects your local browser view. It does not remove files from GitHub or change repository permissions. Do not rely on these methods for security or privacy.
Methods overview
- Chrome extension: Tampermonkey (user scripts) — flexible, programmable hiding.
- Chrome extension: Stylus (user styles / CSS) — simple pattern-based hiding with CSS.
- Native Chrome Developer Tools (temporary) — quick one-off hiding using the console or CSS.
- Browser-based userscript managers other than Tampermonkey (e.g., Violentmonkey) — similar to Tampermonkey.
Method 1 — Tampermonkey userscript (recommended for flexibility)
Tampermonkey lets you run JavaScript on specific pages. With a userscript you can query the DOM of GitHub’s file list and hide rows that match patterns (filename, extension, path).
Step-by-step:
- Install Tampermonkey from the Chrome Web Store.
- Click the Tampermonkey icon → Create a new script.
- Replace the default template with a script like the example below, then save.
// ==UserScript== // @name GitHub: Hide specific files // @namespace https://github.com/ // @version 1.0 // @description Hide files in GitHub repo file listings by pattern // @match https://github.com/*/* // @grant none // ==/UserScript== (function() { 'use strict'; // Patterns to hide. Supports simple glob-style patterns: // *.log, build/, node_modules/, SECRET.txt const hidePatterns = [ 'node_modules/', 'dist/', '*.log', 'secret-*.json' ]; // Convert glob to RegExp function globToRegExp(glob) { const esc = glob.replace(/[.+^${}()|[]\]/g, '\$&'); const regex = esc.replace(/*/g, '.*'); return new RegExp('^' + regex + '$', 'i'); } const regs = hidePatterns.map(globToRegExp); function shouldHide(name) { return regs.some(r => r.test(name)); } function hideMatchingRows() { // GitHub file rows under .js-navigation-item or .Box-row in newer UI const rows = document.querySelectorAll('.js-navigation-item, .Box-row'); rows.forEach(row => { const link = row.querySelector('a.js-navigation-open, a.Link--primary'); if (!link) return; const filename = link.textContent.trim(); const pathEl = row.querySelector('a[href*="/tree/"], a[href*="/blob/"]'); // For folders, GitHub sometimes shows trailing / if (shouldHide(filename) || (pathEl && shouldHide(pathEl.textContent.trim()))) { row.style.display = 'none'; } }); } // Observe for SPA navigations and dynamic updates const obs = new MutationObserver(hideMatchingRows); obs.observe(document.body, { childList: true, subtree: true }); // Run once on load window.addEventListener('load', hideMatchingRows); })(); How to customize:
- Edit hidePatterns array to add or remove filename patterns.
- Use exact filenames (README.md), extensions (*.log), or directories (build/).
Pros:
- Highly flexible (can match paths, change behavior, add toggles).
- Runs automatically for repositories you visit.
Cons:
- Requires basic JS editing for advanced customization.
Method 2 — Stylus user styles (CSS-only)
Stylus applies custom CSS to pages. Hiding files by filename or extension is possible by selecting file rows and matching their text via attribute selectors or structural selectors. This method is simpler but less powerful for complex patterns.
Setup:
- Install Stylus extension from the Chrome Web Store.
- Create a new style for URLs matching https://github.com/*/*.
- Paste CSS like:
/* Hide node_modules and dist directories and .log files in GitHub file lists */ .js-navigation-item a.js-navigation-open[href$="/node_modules/"], .js-navigation-item a.js-navigation-open[href$="/dist/"], .js-navigation-item a.js-navigation-open[href$".log"] { display: none !important; } /* Newer GitHub UI selectors */ .Box-row a.Link--primary[href$="/node_modules/"], .Box-row a.Link--primary[href$"/dist/"], .Box-row a.Link--primary[href$".log"] { display: none !important; } Notes:
- CSS attribute selectors [href$=“…”] match URL endings; adjust to match your repo’s paths.
- CSS can’t do advanced glob matching or regex on visible text; rely on link hrefs.
Pros:
- Easy to set up, no programming required.
- Fast and low-maintenance.
Cons:
- Less flexible; brittle to GitHub UI changes and limited pattern matching.
Method 3 — Chrome Developer Tools (temporary)
For a quick, one-off hide during a session, open DevTools (F12), find the file list rows, and add inline styles or remove nodes.
Example console snippet to run in DevTools Console:
document.querySelectorAll('.js-navigation-item, .Box-row').forEach(row => { const a = row.querySelector('a.js-navigation-open, a.Link--primary'); if (!a) return; const name = a.textContent.trim(); if (name.endsWith('.log') || name === 'node_modules') { row.style.display = 'none'; } }); This change is temporary and will reset on navigation or reload.
Tips, variations, and examples
- Toggle visibility: Add a small UI button injected by your userscript to toggle hiding on/off.
- Per-repo settings: Store patterns in localStorage keyed by repository path so different repos can have different hide lists.
- Use regular expressions: If comfortable with JS, replace globToRegExp with custom regex rules.
- Hiding files in PR diffs: You can extend the script to hide diffs by matching filename selectors in PR pages (look for .file-info or .file-header elements).
- Share settings: Export patterns as a JSON snippet to share with teammates (they’ll need to install the same userscript/style).
Pitfalls and cautions
- Not a security measure: Hiding only affects the UI in your browser. Files remain in the repository and accessible by anyone with access.
- GitHub UI changes: Selectors and class names may change; expect to update scripts/styles occasionally.
- Over-hiding: Be cautious when hiding files in shared screens or during code review; collaborators may miss important files.
Example: Toggle button userscript (compact)
If you want a simple toggle button for hiding node_modules and dist:
// ==UserScript== // @name GitHub Hide Toggle // @match https://github.com/*/* // @grant none // ==/UserScript== (function(){ const patterns = ['node_modules/', 'dist/']; function hide() { document.querySelectorAll('.js-navigation-item, .Box-row').forEach(r=>{ const a = r.querySelector('a.js-navigation-open, a.Link--primary'); if(!a) return; const n = a.textContent.trim(); if(patterns.some(p=>n.endsWith(p) || n===p || n.endsWith(p.replace('/','')))) r.style.display='none'; }); } function show(){ document.querySelectorAll('.js-navigation-item, .Box-row').forEach(r=>r.style.display=''); } const btn = document.createElement('button'); btn.textContent='Toggle hide'; btn.style.position='fixed'; btn.style.right='10px'; btn.style.bottom='10px'; btn.onclick=()=>{ if(btn.dataset.state==='on'){ show(); btn.dataset.state='off'} else { hide(); btn.dataset.state='on'} }; document.body.appendChild(btn); new MutationObserver(()=>{ if(document.body.contains(btn) && btn.dataset.state==='on') hide(); }).observe(document.body,{childList:true,subtree:true}); })(); Final notes
Client-side hiding is a lightweight way to tailor the GitHub UI for your workflow. For repository-wide control (e.g., preventing files from being checked in), use .gitignore, branch protection, or repository settings. For visually hiding files in Chrome, Tampermonkey + a small userscript is the most flexible approach; Stylus offers a simpler CSS-only option.
Leave a Reply