chore: initial sync
This commit is contained in:
fn-registry agent
@@ -0,0 +1,104 @@
|
||||
// web_proxy toggle — service worker.
|
||||
//
|
||||
// Mantiene el estado del proxy en chrome.storage.local y lo aplica a la
|
||||
// configuracion de red de Chromium con la API chrome.proxy. El popup solo
|
||||
// escribe el estado; este worker reacciona a los cambios y reconfigura el
|
||||
// proxy. Asi un unico punto aplica la configuracion (popup, arranque,
|
||||
// instalacion).
|
||||
//
|
||||
// Modelo de estado (chrome.storage.local key "state"):
|
||||
// {
|
||||
// enabled: boolean, // captura ON/OFF
|
||||
// activeProxy: string, // id del proxy activo
|
||||
// proxies: [
|
||||
// { id, name, scheme, host, port } // proxy simple
|
||||
// ]
|
||||
// }
|
||||
//
|
||||
// Encadenacion de proxies (futuro): un proxy podra declarar
|
||||
// `chain: [ {scheme,host,port}, ... ]` y se aplicara mediante un PAC script
|
||||
// generado aqui. El modelo de lista ya lo permite sin migracion.
|
||||
|
||||
const DEFAULT_STATE = {
|
||||
enabled: false,
|
||||
activeProxy: "capture",
|
||||
proxies: [
|
||||
{
|
||||
id: "capture",
|
||||
name: "Captura web_proxy",
|
||||
scheme: "http",
|
||||
host: "127.0.0.1",
|
||||
port: 8889,
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
async function getState() {
|
||||
const r = await chrome.storage.local.get("state");
|
||||
return r.state || DEFAULT_STATE;
|
||||
}
|
||||
|
||||
async function setState(state) {
|
||||
await chrome.storage.local.set({ state });
|
||||
}
|
||||
|
||||
function setBadge(on) {
|
||||
chrome.action.setBadgeText({ text: on ? "ON" : "" });
|
||||
chrome.action.setBadgeBackgroundColor({ color: on ? "#16a34a" : "#666666" });
|
||||
}
|
||||
|
||||
// Aplica el proxy activo si la captura esta encendida; si no, limpia la
|
||||
// configuracion para volver a la conexion directa del sistema.
|
||||
async function applyProxy() {
|
||||
const st = await getState();
|
||||
|
||||
if (!st.enabled) {
|
||||
await chrome.proxy.settings.clear({ scope: "regular" });
|
||||
setBadge(false);
|
||||
return;
|
||||
}
|
||||
|
||||
const p =
|
||||
st.proxies.find((x) => x.id === st.activeProxy) || st.proxies[0] || null;
|
||||
if (!p) {
|
||||
await chrome.proxy.settings.clear({ scope: "regular" });
|
||||
setBadge(false);
|
||||
return;
|
||||
}
|
||||
|
||||
// fixed_servers con un unico proxy. Sin "<-loopback>" en bypassList, de modo
|
||||
// que el trafico a loopback (incluida la propia UI del proxy) NO se proxea y
|
||||
// por tanto no se captura. El trafico a sitios externos si pasa por el proxy.
|
||||
const config = {
|
||||
mode: "fixed_servers",
|
||||
rules: {
|
||||
singleProxy: {
|
||||
scheme: p.scheme || "http",
|
||||
host: p.host,
|
||||
port: Number(p.port),
|
||||
},
|
||||
},
|
||||
};
|
||||
await chrome.proxy.settings.set({ value: config, scope: "regular" });
|
||||
setBadge(true);
|
||||
}
|
||||
|
||||
// Sembrar el estado por defecto la primera vez y aplicar.
|
||||
chrome.runtime.onInstalled.addListener(async () => {
|
||||
const r = await chrome.storage.local.get("state");
|
||||
if (!r.state) {
|
||||
await setState(DEFAULT_STATE);
|
||||
}
|
||||
applyProxy();
|
||||
});
|
||||
|
||||
// Reaplicar al arrancar el navegador (la configuracion de proxy de la sesion
|
||||
// no persiste entre arranques de Chromium).
|
||||
chrome.runtime.onStartup.addListener(applyProxy);
|
||||
|
||||
// El popup escribe el estado; aqui se reconfigura el proxy en consecuencia.
|
||||
chrome.storage.onChanged.addListener((changes, area) => {
|
||||
if (area === "local" && changes.state) {
|
||||
applyProxy();
|
||||
}
|
||||
});
|
||||
@@ -0,0 +1,15 @@
|
||||
{
|
||||
"manifest_version": 3,
|
||||
"name": "web_proxy toggle",
|
||||
"version": "0.1.0",
|
||||
"description": "Activa o desactiva la captura de trafico a traves del proxy de web_proxy con un clic. Gestiona varios proxies y deja preparada la futura encadenacion de proxies.",
|
||||
"permissions": ["proxy", "storage"],
|
||||
"host_permissions": ["<all_urls>"],
|
||||
"background": {
|
||||
"service_worker": "background.js"
|
||||
},
|
||||
"action": {
|
||||
"default_title": "web_proxy: activar/desactivar captura",
|
||||
"default_popup": "popup.html"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,200 @@
|
||||
<!doctype html>
|
||||
<html lang="es">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<style>
|
||||
:root {
|
||||
--accent: #7c3aed;
|
||||
--green: #16a34a;
|
||||
--bg: #ffffff;
|
||||
--fg: #1f2937;
|
||||
--muted: #6b7280;
|
||||
--border: #e5e7eb;
|
||||
}
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--bg: #1f2937;
|
||||
--fg: #f3f4f6;
|
||||
--muted: #9ca3af;
|
||||
--border: #374151;
|
||||
}
|
||||
}
|
||||
body {
|
||||
font-family: system-ui, sans-serif;
|
||||
background: var(--bg);
|
||||
color: var(--fg);
|
||||
width: 300px;
|
||||
margin: 0;
|
||||
padding: 14px;
|
||||
}
|
||||
header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
h1 {
|
||||
font-size: 14px;
|
||||
margin: 0;
|
||||
}
|
||||
.switch {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 46px;
|
||||
height: 26px;
|
||||
}
|
||||
.switch input {
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
.slider {
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
inset: 0;
|
||||
background: #9ca3af;
|
||||
border-radius: 26px;
|
||||
transition: 0.2s;
|
||||
}
|
||||
.slider::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
left: 3px;
|
||||
bottom: 3px;
|
||||
background: #fff;
|
||||
border-radius: 50%;
|
||||
transition: 0.2s;
|
||||
}
|
||||
input:checked + .slider {
|
||||
background: var(--green);
|
||||
}
|
||||
input:checked + .slider::before {
|
||||
transform: translateX(20px);
|
||||
}
|
||||
.status {
|
||||
font-size: 12px;
|
||||
color: var(--muted);
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
ul {
|
||||
list-style: none;
|
||||
margin: 0 0 10px;
|
||||
padding: 0;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 8px 10px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
li:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
li .meta {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
li .name {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
}
|
||||
li .addr {
|
||||
font-size: 11px;
|
||||
color: var(--muted);
|
||||
font-family: monospace;
|
||||
}
|
||||
li .del {
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--muted);
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
}
|
||||
details {
|
||||
font-size: 12px;
|
||||
}
|
||||
summary {
|
||||
cursor: pointer;
|
||||
color: var(--accent);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.form-row {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
input[type="text"],
|
||||
input[type="number"],
|
||||
select {
|
||||
font-size: 12px;
|
||||
padding: 5px 6px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
background: var(--bg);
|
||||
color: var(--fg);
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
button.add {
|
||||
width: 100%;
|
||||
padding: 7px;
|
||||
background: var(--accent);
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
}
|
||||
.hint {
|
||||
font-size: 11px;
|
||||
color: var(--muted);
|
||||
margin-top: 10px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>web_proxy</h1>
|
||||
<label class="switch">
|
||||
<input type="checkbox" id="toggle" />
|
||||
<span class="slider"></span>
|
||||
</label>
|
||||
</header>
|
||||
<div class="status" id="status">Captura desactivada</div>
|
||||
|
||||
<ul id="proxy-list"></ul>
|
||||
|
||||
<details>
|
||||
<summary>Anadir proxy</summary>
|
||||
<div class="form-row">
|
||||
<input type="text" id="f-name" placeholder="Nombre" />
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<select id="f-scheme">
|
||||
<option value="http">http</option>
|
||||
<option value="https">https</option>
|
||||
<option value="socks5">socks5</option>
|
||||
<option value="socks4">socks4</option>
|
||||
</select>
|
||||
<input type="text" id="f-host" placeholder="host (127.0.0.1)" />
|
||||
<input type="number" id="f-port" placeholder="puerto" />
|
||||
</div>
|
||||
<button class="add" id="f-add">Anadir</button>
|
||||
</details>
|
||||
|
||||
<div class="hint">
|
||||
El proxy activo se aplica a todo el navegador. El trafico a loopback no se
|
||||
proxea (la UI de registros no se captura a si misma).
|
||||
</div>
|
||||
|
||||
<script src="popup.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,131 @@
|
||||
// web_proxy toggle — popup logic.
|
||||
//
|
||||
// Lee y escribe el estado en chrome.storage.local. El service worker
|
||||
// (background.js) reacciona a cada cambio y reconfigura el proxy real, de modo
|
||||
// que el popup nunca llama directamente a chrome.proxy.
|
||||
|
||||
const DEFAULT_STATE = {
|
||||
enabled: false,
|
||||
activeProxy: "capture",
|
||||
proxies: [
|
||||
{
|
||||
id: "capture",
|
||||
name: "Captura web_proxy",
|
||||
scheme: "http",
|
||||
host: "127.0.0.1",
|
||||
port: 8889,
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
async function getState() {
|
||||
const r = await chrome.storage.local.get("state");
|
||||
return r.state || structuredClone(DEFAULT_STATE);
|
||||
}
|
||||
|
||||
async function setState(state) {
|
||||
await chrome.storage.local.set({ state });
|
||||
}
|
||||
|
||||
function newId() {
|
||||
return "p" + Math.random().toString(36).slice(2, 9);
|
||||
}
|
||||
|
||||
function render(state) {
|
||||
const toggle = document.getElementById("toggle");
|
||||
const status = document.getElementById("status");
|
||||
toggle.checked = !!state.enabled;
|
||||
|
||||
const active = state.proxies.find((p) => p.id === state.activeProxy);
|
||||
if (state.enabled && active) {
|
||||
status.textContent = `Capturando via ${active.host}:${active.port}`;
|
||||
status.style.color = "var(--green)";
|
||||
} else {
|
||||
status.textContent = "Captura desactivada";
|
||||
status.style.color = "var(--muted)";
|
||||
}
|
||||
|
||||
const list = document.getElementById("proxy-list");
|
||||
list.innerHTML = "";
|
||||
for (const p of state.proxies) {
|
||||
const li = document.createElement("li");
|
||||
|
||||
const radio = document.createElement("input");
|
||||
radio.type = "radio";
|
||||
radio.name = "active";
|
||||
radio.checked = p.id === state.activeProxy;
|
||||
radio.addEventListener("change", async () => {
|
||||
const s = await getState();
|
||||
s.activeProxy = p.id;
|
||||
await setState(s);
|
||||
render(s);
|
||||
});
|
||||
|
||||
const meta = document.createElement("div");
|
||||
meta.className = "meta";
|
||||
const name = document.createElement("div");
|
||||
name.className = "name";
|
||||
name.textContent = p.name || p.id;
|
||||
const addr = document.createElement("div");
|
||||
addr.className = "addr";
|
||||
addr.textContent = `${p.scheme}://${p.host}:${p.port}`;
|
||||
meta.append(name, addr);
|
||||
|
||||
li.append(radio, meta);
|
||||
|
||||
// El proxy de captura por defecto no se puede borrar.
|
||||
if (p.id !== "capture") {
|
||||
const del = document.createElement("button");
|
||||
del.className = "del";
|
||||
del.textContent = "✕";
|
||||
del.title = "Eliminar";
|
||||
del.addEventListener("click", async () => {
|
||||
const s = await getState();
|
||||
s.proxies = s.proxies.filter((x) => x.id !== p.id);
|
||||
if (s.activeProxy === p.id) {
|
||||
s.activeProxy = s.proxies[0] ? s.proxies[0].id : "capture";
|
||||
}
|
||||
await setState(s);
|
||||
render(s);
|
||||
});
|
||||
li.append(del);
|
||||
}
|
||||
|
||||
list.append(li);
|
||||
}
|
||||
}
|
||||
|
||||
async function init() {
|
||||
const state = await getState();
|
||||
render(state);
|
||||
|
||||
document.getElementById("toggle").addEventListener("change", async (e) => {
|
||||
const s = await getState();
|
||||
s.enabled = e.target.checked;
|
||||
await setState(s);
|
||||
render(s);
|
||||
});
|
||||
|
||||
document.getElementById("f-add").addEventListener("click", async () => {
|
||||
const name = document.getElementById("f-name").value.trim();
|
||||
const scheme = document.getElementById("f-scheme").value;
|
||||
const host = document.getElementById("f-host").value.trim();
|
||||
const port = parseInt(document.getElementById("f-port").value, 10);
|
||||
if (!host || !port) return;
|
||||
const s = await getState();
|
||||
s.proxies.push({
|
||||
id: newId(),
|
||||
name: name || `${host}:${port}`,
|
||||
scheme,
|
||||
host,
|
||||
port,
|
||||
});
|
||||
await setState(s);
|
||||
document.getElementById("f-name").value = "";
|
||||
document.getElementById("f-host").value = "";
|
||||
document.getElementById("f-port").value = "";
|
||||
render(s);
|
||||
});
|
||||
}
|
||||
|
||||
init();
|
||||
Reference in New Issue
Block a user