208 lines
10 KiB
HTML
208 lines
10 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" data-bs-theme="dark">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>GreasyBoii</title>
|
|
<link rel="stylesheet" href="bootstrap.min.css">
|
|
<link rel="stylesheet" href="popup.css">
|
|
</head>
|
|
<body>
|
|
<div class="container-fluid p-3">
|
|
<div class="brand-row d-flex justify-content-between align-items-center mb-2">
|
|
<div class="d-flex align-items-center gap-2">
|
|
<img src="icon48.png" alt="" class="brand-icon">
|
|
<div>
|
|
<h4 class="mb-0 brand-title">GreasyBoii</h4>
|
|
<div class="brand-tagline">🐒 grease-monkey grade page tweaks</div>
|
|
</div>
|
|
</div>
|
|
<div class="form-check form-switch mb-0 power-switch" title="Master enable/disable (Ctrl+Shift+G)">
|
|
<input class="form-check-input" type="checkbox" id="masterToggle" checked>
|
|
<label class="form-check-label small" for="masterToggle" id="masterToggleLabel">On</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="hazard-strip mb-3"></div>
|
|
|
|
<div class="d-flex justify-content-between align-items-center mb-3 flex-wrap gap-2">
|
|
<ul class="nav nav-tabs" id="mainTabs" role="tablist">
|
|
<li class="nav-item" role="presentation">
|
|
<button class="nav-link active" id="rulesTabBtn" data-bs-toggle="tab" data-bs-target="#rulesPane" type="button" role="tab">Rules</button>
|
|
</li>
|
|
<li class="nav-item" role="presentation">
|
|
<button class="nav-link" id="toolsTabBtn" data-bs-toggle="tab" data-bs-target="#toolsPane" type="button" role="tab">Tools</button>
|
|
</li>
|
|
</ul>
|
|
<div class="d-flex gap-2">
|
|
<button class="btn btn-sm btn-outline-light" id="darkModeBtn" title="Add a dark-mode rule for this site">🌓</button>
|
|
<button class="btn btn-sm btn-outline-light" id="exportRulesBtn" title="Export rules to JSON">⬇ Export</button>
|
|
<button class="btn btn-sm btn-outline-light" id="importRulesBtn" title="Import rules from JSON">⬆ Import</button>
|
|
<input type="file" id="importFileInput" accept="application/json" hidden>
|
|
<button class="btn btn-primary btn-sm" id="addRuleBtn">+ Add Rule</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tab-content">
|
|
<div class="tab-pane fade show active" id="rulesPane" role="tabpanel">
|
|
<div id="rulesList" class="rules-list mb-3">
|
|
<!-- Rules will be dynamically inserted here -->
|
|
</div>
|
|
|
|
<div id="emptyState" class="text-center text-muted py-4" style="display: none;">
|
|
<p>No rules yet. Click "Add Rule" to get started.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tab-pane fade" id="toolsPane" role="tabpanel">
|
|
<div class="tool-card mb-3">
|
|
<h6>📥 Bulk Media Downloader</h6>
|
|
<div class="d-flex gap-2 mb-2">
|
|
<select class="form-select form-select-sm" id="mediaType" style="max-width: 150px;">
|
|
<option value="images">Images</option>
|
|
<option value="pdfs">PDFs</option>
|
|
<option value="videos">Videos</option>
|
|
<option value="custom">Custom extensions</option>
|
|
</select>
|
|
<input type="text" class="form-control form-control-sm" id="mediaExtensions" placeholder="jpg,png,zip" style="display: none;">
|
|
<button class="btn btn-sm btn-outline-light" id="scanMediaBtn">Scan Page</button>
|
|
</div>
|
|
<div id="mediaResults" class="tool-results small text-muted">No scan yet.</div>
|
|
<button class="btn btn-sm btn-primary mt-2" id="downloadMediaBtn" disabled>Download All (0)</button>
|
|
</div>
|
|
|
|
<div class="tool-card mb-3">
|
|
<h6>🔗 Link Harvester</h6>
|
|
<div class="d-flex gap-2 mb-2">
|
|
<input type="text" class="form-control form-control-sm" id="linkContainerSelector" placeholder="Container selector (blank = whole page)">
|
|
<button class="btn btn-sm btn-outline-light" id="harvestLinksBtn">Extract</button>
|
|
</div>
|
|
<div id="linkResults" class="tool-results small text-muted">No links extracted yet.</div>
|
|
<div class="d-flex gap-2 mt-2">
|
|
<button class="btn btn-sm btn-primary" id="openLinksBtn" disabled>Open Selected in Tabs</button>
|
|
<button class="btn btn-sm btn-outline-light" id="exportLinksBtn" disabled>Export .txt</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tool-card mb-3">
|
|
<h6>🧮 Page Data Scraper</h6>
|
|
<div class="d-flex gap-2 mb-2">
|
|
<input type="text" class="form-control form-control-sm" id="scrapeSelector" placeholder="CSS selector, e.g. .price">
|
|
<select class="form-select form-select-sm" id="scrapeAttribute" style="max-width: 120px;">
|
|
<option value="text">Text</option>
|
|
<option value="href">href</option>
|
|
<option value="src">src</option>
|
|
<option value="custom">Attribute…</option>
|
|
</select>
|
|
</div>
|
|
<input type="text" class="form-control form-control-sm mb-2" id="scrapeCustomAttr" placeholder="attribute name" style="display: none;">
|
|
<button class="btn btn-sm btn-outline-light" id="scrapeBtn">Scrape</button>
|
|
<div id="scrapeResults" class="tool-results small text-muted mt-2">No data scraped yet.</div>
|
|
<div class="d-flex gap-2 mt-2">
|
|
<button class="btn btn-sm btn-primary" id="exportCsvBtn" disabled>Export CSV</button>
|
|
<button class="btn btn-sm btn-outline-light" id="exportJsonBtn" disabled>Export JSON</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Add/Edit Rule Modal -->
|
|
<div class="modal fade" id="ruleModal" tabindex="-1">
|
|
<div class="modal-dialog modal-lg">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="modalTitle">Add Rule</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form id="ruleForm">
|
|
<div class="mb-3">
|
|
<label for="ruleName" class="form-label">Rule Name</label>
|
|
<input type="text" class="form-control" id="ruleName" required>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label for="matchType" class="form-label">Match Type</label>
|
|
<select class="form-select" id="matchType" required>
|
|
<option value="url">URL contains string</option>
|
|
<option value="element">Page contains element</option>
|
|
<option value="both">Both URL and element</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="mb-3" id="urlPatternGroup">
|
|
<label for="urlPattern" class="form-label">URL Pattern</label>
|
|
<input type="text" class="form-control" id="urlPattern" placeholder="e.g., example.com">
|
|
<small class="form-text text-muted">Enter a string to match in the URL</small>
|
|
</div>
|
|
|
|
<div class="mb-3" id="elementSelectorGroup" style="display: none;">
|
|
<label for="elementSelector" class="form-label">Element Selector</label>
|
|
<div class="input-group">
|
|
<input type="text" class="form-control" id="elementSelector" placeholder="e.g., #my-element or .my-class">
|
|
<button class="btn btn-outline-secondary" type="button" id="pickElementBtn" title="Pick element on the page">🎯 Pick</button>
|
|
</div>
|
|
<small class="form-text text-muted">Enter a CSS selector, or click Pick and select it on the page</small>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label for="javascript" class="form-label">JavaScript Code</label>
|
|
<textarea class="form-control font-monospace" id="javascript" rows="6" placeholder="console.log('Hello from GreasyBoii!');"></textarea>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label for="css" class="form-label">CSS Code</label>
|
|
<textarea class="form-control font-monospace" id="css" rows="6" placeholder="body { background-color: #000; }"></textarea>
|
|
</div>
|
|
|
|
<details class="mb-3" id="advancedSection">
|
|
<summary class="form-label">🔧 Advanced (auto-click, text replace, SPA re-apply)</summary>
|
|
<div class="border rounded p-2 mt-2">
|
|
<div class="mb-2">
|
|
<label for="autoClickSelector" class="form-label small">Auto-Click Selector</label>
|
|
<input type="text" class="form-control form-control-sm" id="autoClickSelector" placeholder="e.g., .cookie-banner .accept">
|
|
</div>
|
|
<div class="d-flex gap-2 mb-3">
|
|
<div class="flex-fill">
|
|
<label for="autoClickInterval" class="form-label small">Repeat every (sec, 0 = once)</label>
|
|
<input type="number" min="0" class="form-control form-control-sm" id="autoClickInterval" value="0">
|
|
</div>
|
|
<div class="flex-fill">
|
|
<label for="autoClickMax" class="form-label small">Max clicks (0 = unlimited)</label>
|
|
<input type="number" min="0" class="form-control form-control-sm" id="autoClickMax" value="0">
|
|
</div>
|
|
</div>
|
|
|
|
<label class="form-label small">Text Replacements</label>
|
|
<div id="textReplacementsList" class="mb-2"></div>
|
|
<button type="button" class="btn btn-sm btn-outline-light mb-3" id="addReplacementBtn">+ Add Replacement</button>
|
|
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" id="reapplyOnDomChanges">
|
|
<label class="form-check-label" for="reapplyOnDomChanges">Re-check on page changes (for SPAs)</label>
|
|
</div>
|
|
</div>
|
|
</details>
|
|
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" id="ruleEnabled" checked>
|
|
<label class="form-check-label" for="ruleEnabled">
|
|
Enabled
|
|
</label>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
|
|
<button type="button" class="btn btn-primary" id="saveRuleBtn">Save Rule</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="bootstrap.bundle.min.js"></script>
|
|
<script src="popup.js"></script>
|
|
</body>
|
|
</html>
|