xixu-me
130eec751f
This update introduces full Firefox support using a new manifest-firefox.json (Manifest V2), adds a webext-compat.js compatibility layer for unified API usage, and refactors all extension scripts (background.js, content.js, popup.js) to use the new webext API. The build and development process is automated with new Python scripts (build.py, dev.py), and GitHub Actions workflows are updated to support multi-platform build, test, and release. Platform detection and capability abstraction are added, and all relevant files and manifests are updated for cross-browser compatibility.
583 lines
16 KiB
HTML
583 lines
16 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>Xget Now</title>
|
|
<style>
|
|
:root {
|
|
--primary-accent-color: #8a2be2;
|
|
--success-color: #4caf50;
|
|
--container-bg: rgba(255, 255, 255, 0.1);
|
|
--container-border: rgba(255, 255, 255, 0.2);
|
|
--text-color: white;
|
|
--text-secondary-color: rgba(255, 255, 255, 0.7);
|
|
--input-bg: rgba(0, 0, 0, 0.2);
|
|
--hover-bg: rgba(255, 255, 255, 0.2);
|
|
}
|
|
|
|
html {
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
overflow: hidden; /* Prevents scrollbars from appearing on the html element */
|
|
}
|
|
|
|
body {
|
|
width: 380px;
|
|
min-height: 400px;
|
|
margin: 0;
|
|
padding: 0;
|
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
|
|
sans-serif;
|
|
color: var(--text-color);
|
|
backdrop-filter: blur(10px);
|
|
-webkit-backdrop-filter: blur(10px);
|
|
background-color: rgba(40, 40, 40, 0.3);
|
|
border-radius: 16px;
|
|
overflow: hidden;
|
|
animation: fadeIn 0.5s ease-in-out;
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
from {
|
|
opacity: 0;
|
|
transform: scale(0.95);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
|
|
.header {
|
|
padding: 20px;
|
|
text-align: center;
|
|
border-bottom: 1px solid var(--container-border);
|
|
background: rgba(255, 255, 255, 0.05);
|
|
}
|
|
|
|
.header h1 {
|
|
margin: 0;
|
|
font-size: 20px;
|
|
font-weight: 600;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
.content {
|
|
padding: 20px;
|
|
max-height: calc(400px - 70px); /* Fixed height instead of viewport */
|
|
overflow-y: auto;
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
/* Enhanced Custom Scrollbar */
|
|
.content::-webkit-scrollbar,
|
|
.platforms::-webkit-scrollbar {
|
|
width: 6px;
|
|
}
|
|
|
|
.content::-webkit-scrollbar-track,
|
|
.platforms::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.content::-webkit-scrollbar-thumb,
|
|
.platforms::-webkit-scrollbar-thumb {
|
|
background: rgba(255, 255, 255, 0.2);
|
|
border-radius: 3px;
|
|
transition: background 0.2s ease;
|
|
}
|
|
|
|
.content::-webkit-scrollbar-thumb:hover,
|
|
.platforms::-webkit-scrollbar-thumb:hover {
|
|
background: rgba(255, 255, 255, 0.4);
|
|
}
|
|
|
|
.content::-webkit-scrollbar-thumb:active,
|
|
.platforms::-webkit-scrollbar-thumb:active {
|
|
background: rgba(255, 255, 255, 0.6);
|
|
}
|
|
|
|
/* Scrollbar corner for better appearance */
|
|
.content::-webkit-scrollbar-corner,
|
|
.platforms::-webkit-scrollbar-corner {
|
|
background: transparent;
|
|
}
|
|
|
|
/* Smooth scrolling support for Firefox */
|
|
.content,
|
|
.platforms {
|
|
scrollbar-width: thin;
|
|
scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
|
|
}
|
|
|
|
/* Auto-hide scrollbar behavior */
|
|
.content:not(:hover):not(:focus-within),
|
|
.platforms:not(:hover):not(:focus-within) {
|
|
scrollbar-width: none;
|
|
}
|
|
|
|
.content:not(:hover):not(:focus-within)::-webkit-scrollbar,
|
|
.platforms:not(:hover):not(:focus-within)::-webkit-scrollbar {
|
|
width: 0;
|
|
}
|
|
|
|
.setting-group {
|
|
margin-bottom: 25px;
|
|
padding: 15px;
|
|
background: var(--container-bg);
|
|
border: 1px solid var(--container-border);
|
|
border-radius: 12px;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.setting-group.compact {
|
|
padding: 10px 15px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.setting-group:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
.setting-label {
|
|
display: block;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
margin-bottom: 12px;
|
|
color: var(--text-secondary-color);
|
|
}
|
|
|
|
.setting-label.compact {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.toggle-switch {
|
|
position: relative;
|
|
display: inline-block;
|
|
width: 50px;
|
|
height: 28px;
|
|
}
|
|
|
|
.toggle-switch input {
|
|
opacity: 0;
|
|
width: 0;
|
|
height: 0;
|
|
}
|
|
|
|
.slider {
|
|
position: absolute;
|
|
cursor: pointer;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background-color: rgba(0, 0, 0, 0.3);
|
|
transition: 0.4s;
|
|
border-radius: 28px;
|
|
}
|
|
|
|
.slider:before {
|
|
position: absolute;
|
|
content: "";
|
|
height: 22px;
|
|
width: 22px;
|
|
left: 3px;
|
|
bottom: 3px;
|
|
background-color: white;
|
|
transition: 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);
|
|
border-radius: 50%;
|
|
}
|
|
|
|
input:checked + .slider {
|
|
background-color: var(--primary-accent-color);
|
|
}
|
|
|
|
input:checked + .slider:before {
|
|
transform: translateX(22px);
|
|
}
|
|
|
|
.domain-input {
|
|
width: 100%;
|
|
padding: 12px;
|
|
border: 1px solid transparent;
|
|
border-radius: 8px;
|
|
background: var(--input-bg);
|
|
color: var(--text-color);
|
|
font-size: 14px;
|
|
box-sizing: border-box;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.domain-input::placeholder {
|
|
color: var(--text-secondary-color);
|
|
}
|
|
|
|
.domain-input:focus {
|
|
outline: none;
|
|
border-color: var(--primary-accent-color);
|
|
background: rgba(0, 0, 0, 0.3);
|
|
box-shadow: 0 0 0 3px rgba(138, 43, 226, 0.3);
|
|
}
|
|
|
|
.platforms {
|
|
max-height: 200px;
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
margin-top: 8px;
|
|
padding: 5px;
|
|
border-radius: 8px;
|
|
background: rgba(0, 0, 0, 0.1);
|
|
scroll-behavior: smooth;
|
|
scrollbar-gutter: stable;
|
|
}
|
|
|
|
.platform-category {
|
|
padding: 8px 12px 0 12px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.category-title {
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
color: var(--text-secondary-color);
|
|
margin-bottom: 10px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.8px;
|
|
padding-left: 5px;
|
|
}
|
|
|
|
.platform-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 8px;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.platform-item {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
background: rgba(255, 255, 255, 0.05);
|
|
padding: 8px 12px;
|
|
border-radius: 8px;
|
|
font-size: 13px;
|
|
border: 1px solid transparent;
|
|
transition: all 0.2s ease-in-out;
|
|
}
|
|
|
|
.platform-item:hover {
|
|
background: rgba(255, 255, 255, 0.1);
|
|
border-color: rgba(255, 255, 255, 0.2);
|
|
}
|
|
|
|
.status {
|
|
margin-top: 15px;
|
|
padding: 12px;
|
|
border-radius: 8px;
|
|
font-size: 13px;
|
|
text-align: center;
|
|
border: 1px solid transparent;
|
|
animation: status-pop-in 0.3s ease;
|
|
}
|
|
|
|
@keyframes status-pop-in {
|
|
from {
|
|
opacity: 0;
|
|
transform: scale(0.9);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
|
|
.status.hiding {
|
|
animation: fadeOut 0.3s ease forwards;
|
|
}
|
|
|
|
@keyframes fadeOut {
|
|
to {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
.status.success {
|
|
background: rgba(76, 175, 80, 0.25);
|
|
border-color: rgba(76, 175, 80, 0.4);
|
|
}
|
|
|
|
.status.error {
|
|
background: rgba(244, 67, 54, 0.25);
|
|
border-color: rgba(244, 67, 54, 0.4);
|
|
}
|
|
|
|
.mini-toggle {
|
|
width: 36px;
|
|
height: 20px;
|
|
}
|
|
|
|
.mini-toggle .slider {
|
|
border-radius: 20px;
|
|
}
|
|
|
|
.mini-toggle .slider:before {
|
|
height: 14px;
|
|
width: 14px;
|
|
left: 3px;
|
|
bottom: 3px;
|
|
}
|
|
|
|
.mini-toggle input:checked + .slider:before {
|
|
transform: translateX(16px);
|
|
}
|
|
|
|
.links {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
}
|
|
|
|
.link-item {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 12px 15px;
|
|
background: var(--container-bg);
|
|
border-radius: 8px;
|
|
text-decoration: none;
|
|
color: var(--text-color);
|
|
transition: all 0.2s ease;
|
|
border: 1px solid var(--container-border);
|
|
}
|
|
|
|
.link-item:hover {
|
|
background: var(--hover-bg);
|
|
border-color: rgba(255, 255, 255, 0.3);
|
|
transform: translateY(-2px) scale(1.02);
|
|
}
|
|
|
|
.link-icon {
|
|
margin-right: 12px;
|
|
font-size: 18px;
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.link-text {
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="header">
|
|
<h1>Xget Now</h1>
|
|
</div>
|
|
|
|
<div class="content">
|
|
<div class="setting-group compact">
|
|
<label class="setting-label compact">
|
|
<div
|
|
style="
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
min-height: 28px;
|
|
"
|
|
>
|
|
<span>启用扩展</span>
|
|
<label class="toggle-switch">
|
|
<input type="checkbox" id="enabledToggle" />
|
|
<span class="slider"></span>
|
|
</label>
|
|
</div>
|
|
</label>
|
|
</div>
|
|
|
|
<div class="setting-group">
|
|
<label class="setting-label" for="domainInput">Xget 域名（必填）</label>
|
|
<input
|
|
type="text"
|
|
id="domainInput"
|
|
class="domain-input"
|
|
placeholder="your-xget-domain.com"
|
|
/>
|
|
</div>
|
|
|
|
<div class="setting-group">
|
|
<label class="setting-label">启用的平台</label>
|
|
<div class="platforms">
|
|
<div class="platform-category">
|
|
<div class="category-title">代码托管</div>
|
|
<div class="platform-grid">
|
|
<div class="platform-item">
|
|
<span>GitHub</span>
|
|
<label class="toggle-switch mini-toggle">
|
|
<input type="checkbox" id="ghToggle" />
|
|
<span class="slider"></span>
|
|
</label>
|
|
</div>
|
|
<div class="platform-item">
|
|
<span>GitLab</span>
|
|
<label class="toggle-switch mini-toggle">
|
|
<input type="checkbox" id="glToggle" />
|
|
<span class="slider"></span>
|
|
</label>
|
|
</div>
|
|
<div class="platform-item">
|
|
<span>Gitea</span>
|
|
<label class="toggle-switch mini-toggle">
|
|
<input type="checkbox" id="giteaToggle" />
|
|
<span class="slider"></span>
|
|
</label>
|
|
</div>
|
|
<div class="platform-item">
|
|
<span>Codeberg</span>
|
|
<label class="toggle-switch mini-toggle">
|
|
<input type="checkbox" id="codebergToggle" />
|
|
<span class="slider"></span>
|
|
</label>
|
|
</div>
|
|
<div class="platform-item">
|
|
<span>SourceForge</span>
|
|
<label class="toggle-switch mini-toggle">
|
|
<input type="checkbox" id="sfToggle" />
|
|
<span class="slider"></span>
|
|
</label>
|
|
</div>
|
|
<div class="platform-item">
|
|
<span>AOSP</span>
|
|
<label class="toggle-switch mini-toggle">
|
|
<input type="checkbox" id="aospToggle" />
|
|
<span class="slider"></span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="platform-category">
|
|
<div class="category-title">AI/ML</div>
|
|
<div class="platform-grid">
|
|
<div class="platform-item">
|
|
<span>Hugging Face</span>
|
|
<label class="toggle-switch mini-toggle">
|
|
<input type="checkbox" id="hfToggle" />
|
|
<span class="slider"></span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="platform-category">
|
|
<div class="category-title">包管理</div>
|
|
<div class="platform-grid">
|
|
<div class="platform-item">
|
|
<span>npm</span>
|
|
<label class="toggle-switch mini-toggle">
|
|
<input type="checkbox" id="npmToggle" />
|
|
<span class="slider"></span>
|
|
</label>
|
|
</div>
|
|
<div class="platform-item">
|
|
<span>PyPI</span>
|
|
<label class="toggle-switch mini-toggle">
|
|
<input type="checkbox" id="pypiToggle" />
|
|
<span class="slider"></span>
|
|
</label>
|
|
</div>
|
|
<div class="platform-item">
|
|
<span>Conda</span>
|
|
<label class="toggle-switch mini-toggle">
|
|
<input type="checkbox" id="condaToggle" />
|
|
<span class="slider"></span>
|
|
</label>
|
|
</div>
|
|
<div class="platform-item">
|
|
<span>Maven</span>
|
|
<label class="toggle-switch mini-toggle">
|
|
<input type="checkbox" id="mavenToggle" />
|
|
<span class="slider"></span>
|
|
</label>
|
|
</div>
|
|
<div class="platform-item">
|
|
<span>RubyGems</span>
|
|
<label class="toggle-switch mini-toggle">
|
|
<input type="checkbox" id="rubygemsToggle" />
|
|
<span class="slider"></span>
|
|
</label>
|
|
</div>
|
|
<div class="platform-item">
|
|
<span>Crates.io</span>
|
|
<label class="toggle-switch mini-toggle">
|
|
<input type="checkbox" id="cratesToggle" />
|
|
<span class="slider"></span>
|
|
</label>
|
|
</div>
|
|
<div class="platform-item">
|
|
<span>NuGet</span>
|
|
<label class="toggle-switch mini-toggle">
|
|
<input type="checkbox" id="nugetToggle" />
|
|
<span class="slider"></span>
|
|
</label>
|
|
</div>
|
|
<div class="platform-item">
|
|
<span>Go Modules</span>
|
|
<label class="toggle-switch mini-toggle">
|
|
<input type="checkbox" id="golangToggle" />
|
|
<span class="slider"></span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="platform-category">
|
|
<div class="category-title">其他</div>
|
|
<div class="platform-grid">
|
|
<div class="platform-item">
|
|
<span>arXiv</span>
|
|
<label class="toggle-switch mini-toggle">
|
|
<input type="checkbox" id="arxivToggle" />
|
|
<span class="slider"></span>
|
|
</label>
|
|
</div>
|
|
<div class="platform-item">
|
|
<span>F-Droid</span>
|
|
<label class="toggle-switch mini-toggle">
|
|
<input type="checkbox" id="fdroidToggle" />
|
|
<span class="slider"></span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="setting-group">
|
|
<div class="links">
|
|
<a
|
|
href="https://github.com/xixu-me/Xget"
|
|
target="_blank"
|
|
class="link-item"
|
|
>
|
|
<span class="link-icon">🚀</span>
|
|
<span class="link-text">Xget 存储库</span>
|
|
</a>
|
|
<a
|
|
href="https://github.com/xixu-me/Xget-Now"
|
|
target="_blank"
|
|
class="link-item"
|
|
>
|
|
<span class="link-icon">📖</span>
|
|
<span class="link-text">扩展存储库</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="status" class="status" style="display: none"></div>
|
|
</div>
|
|
|
|
<script src="webext-compat.js"></script>
|
|
<script src="popup.js"></script>
|
|
</body>
|
|
</html>
|