init
This commit is contained in:
wildtail
@@ -0,0 +1,2 @@
|
||||
node_modules
|
||||
dist
|
||||
Generated
+4172
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,12 @@
|
||||
{
|
||||
"name": "proxy-container",
|
||||
"version": "1.0.0",
|
||||
"description": "Firefox extension settings page only",
|
||||
"scripts": {
|
||||
"dev": "web-ext run --source-dir=src",
|
||||
"build": "web-ext build --source-dir=src --artifacts-dir=dist"
|
||||
},
|
||||
"devDependencies": {
|
||||
"web-ext": "^8.0.0"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,275 @@
|
||||
const STORAGE_KEY = "containerSettings";
|
||||
|
||||
const IGNORED_URL_PREFIXES = [
|
||||
"about:",
|
||||
"moz-extension:",
|
||||
"chrome:",
|
||||
"file:",
|
||||
"view-source:",
|
||||
"data:",
|
||||
"blob:",
|
||||
"javascript:"
|
||||
];
|
||||
|
||||
const redirectedTabIds = new Set();
|
||||
|
||||
browser.action.onClicked.addListener(() => {
|
||||
browser.runtime.openOptionsPage();
|
||||
});
|
||||
|
||||
async function getContainerSettingsMap() {
|
||||
const result = await browser.storage.local.get(STORAGE_KEY);
|
||||
return result[STORAGE_KEY] || {};
|
||||
}
|
||||
|
||||
function normalizeProxyType(type) {
|
||||
if (type === "socks5") {
|
||||
return "socks";
|
||||
}
|
||||
|
||||
const allowedTypes = ["http", "https", "socks", "socks4"];
|
||||
|
||||
if (allowedTypes.includes(type)) {
|
||||
return type;
|
||||
}
|
||||
|
||||
return "http";
|
||||
}
|
||||
|
||||
function shouldIgnoreUrl(url) {
|
||||
if (!url) {
|
||||
return true;
|
||||
}
|
||||
|
||||
return IGNORED_URL_PREFIXES.some((prefix) => url.startsWith(prefix));
|
||||
}
|
||||
|
||||
function escapeRegex(value) {
|
||||
return value.replace(/[|\\{}()[\]^$+?.*]/g, "\\$&");
|
||||
}
|
||||
|
||||
function globToRegex(glob) {
|
||||
let pattern = String(glob || "").trim();
|
||||
|
||||
if (!pattern) {
|
||||
return null;
|
||||
}
|
||||
|
||||
if (!pattern.includes("://")) {
|
||||
pattern = `*://${pattern}`;
|
||||
}
|
||||
|
||||
pattern = pattern.replace(
|
||||
/^(\*:\/\/|https?:\/\/)\*\./,
|
||||
"$1{SUBDOMAIN_OR_ROOT}"
|
||||
);
|
||||
|
||||
let regex = escapeRegex(pattern);
|
||||
|
||||
regex = regex
|
||||
.replaceAll("\\*", ".*")
|
||||
.replaceAll("\\?", ".");
|
||||
|
||||
regex = regex.replaceAll(
|
||||
"\\{SUBDOMAIN_OR_ROOT\\}",
|
||||
"([^/]+\\.)?"
|
||||
);
|
||||
|
||||
return new RegExp(`^${regex}(/.*)?$`, "i");
|
||||
}
|
||||
|
||||
function testUrlRule(rule, url) {
|
||||
try {
|
||||
const regex = globToRegex(rule);
|
||||
return regex ? regex.test(url) : false;
|
||||
} catch (error) {
|
||||
console.warn("Invalid URL rule skipped:", rule, error);
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
async function findContainerForUrl(url) {
|
||||
const settingsMap = await getContainerSettingsMap();
|
||||
|
||||
for (const [cookieStoreId, settings] of Object.entries(settingsMap)) {
|
||||
const urlRules = settings.urlRules || [];
|
||||
|
||||
console.log(urlRules)
|
||||
|
||||
for (const rule of urlRules) {
|
||||
if (testUrlRule(rule, url)) {
|
||||
return cookieStoreId;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
async function redirectTabToContainer(tabId, tab, targetCookieStoreId) {
|
||||
if (!targetCookieStoreId) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (!tab || !tab.url) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (tab.cookieStoreId === targetCookieStoreId) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (redirectedTabIds.has(tabId)) {
|
||||
return;
|
||||
}
|
||||
|
||||
redirectedTabIds.add(tabId);
|
||||
|
||||
try {
|
||||
await browser.tabs.create({
|
||||
url: tab.url,
|
||||
cookieStoreId: targetCookieStoreId,
|
||||
active: tab.active,
|
||||
index: tab.index
|
||||
});
|
||||
|
||||
await browser.tabs.remove(tabId);
|
||||
} catch (error) {
|
||||
console.error("Failed to redirect tab to container:", error);
|
||||
} finally {
|
||||
setTimeout(() => {
|
||||
redirectedTabIds.delete(tabId);
|
||||
}, 1500);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* URL routing:
|
||||
* пользователь открывает URL -> правило находит контейнер -> вкладка переоткрывается в контейнере.
|
||||
*/
|
||||
browser.tabs.onUpdated.addListener(
|
||||
async (tabId, changeInfo, tab) => {
|
||||
if (!changeInfo.url) {
|
||||
return;
|
||||
}
|
||||
|
||||
const url = changeInfo.url;
|
||||
|
||||
if (shouldIgnoreUrl(url)) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const targetCookieStoreId = await findContainerForUrl(url);
|
||||
|
||||
console.log("targetCookieStoreId", url)
|
||||
|
||||
if (!targetCookieStoreId) {
|
||||
return;
|
||||
}
|
||||
|
||||
await redirectTabToContainer(tabId, tab, targetCookieStoreId);
|
||||
} catch (error) {
|
||||
console.error("URL routing failed:", error);
|
||||
}
|
||||
},
|
||||
{
|
||||
properties: ["url"]
|
||||
}
|
||||
);
|
||||
|
||||
/**
|
||||
* Per-container proxy:
|
||||
* запрос из контейнера -> cookieStoreId -> proxy-настройка контейнера.
|
||||
*/
|
||||
browser.proxy.onRequest.addListener(
|
||||
async (requestDetails) => {
|
||||
console.log("proxy")
|
||||
const cookieStoreId = requestDetails.cookieStoreId;
|
||||
|
||||
if (!cookieStoreId || cookieStoreId === "firefox-default") {
|
||||
return { type: "direct" };
|
||||
}
|
||||
|
||||
const settingsMap = await getContainerSettingsMap();
|
||||
const containerSettings = settingsMap[cookieStoreId];
|
||||
|
||||
if (!containerSettings || !containerSettings.proxy) {
|
||||
return { type: "direct" };
|
||||
}
|
||||
|
||||
const proxy = containerSettings.proxy;
|
||||
|
||||
if (!proxy.enabled) {
|
||||
return { type: "direct" };
|
||||
}
|
||||
|
||||
if (!proxy.host || !proxy.port) {
|
||||
return { type: "direct" };
|
||||
}
|
||||
|
||||
const proxyInfo = {
|
||||
type: normalizeProxyType(proxy.type),
|
||||
host: proxy.host,
|
||||
port: Number(proxy.port)
|
||||
};
|
||||
|
||||
|
||||
if (
|
||||
proxy.proxyDNS === true &&
|
||||
(proxyInfo.type === "socks" || proxyInfo.type === "socks4")
|
||||
) {
|
||||
proxyInfo.proxyDNS = true;
|
||||
}
|
||||
|
||||
return proxyInfo;
|
||||
},
|
||||
{
|
||||
urls: ["<all_urls>"]
|
||||
}
|
||||
);
|
||||
|
||||
browser.proxy.onError.addListener((error) => {
|
||||
console.error("Proxy error:", error);
|
||||
});
|
||||
|
||||
/**
|
||||
* Proxy authentication.
|
||||
*/
|
||||
browser.webRequest.onAuthRequired.addListener(
|
||||
async (details) => {
|
||||
if (!details.isProxy) {
|
||||
return {};
|
||||
}
|
||||
|
||||
const cookieStoreId = details.cookieStoreId;
|
||||
|
||||
if (!cookieStoreId) {
|
||||
return {};
|
||||
}
|
||||
|
||||
const settingsMap = await getContainerSettingsMap();
|
||||
const containerSettings = settingsMap[cookieStoreId];
|
||||
|
||||
if (!containerSettings || !containerSettings.proxy) {
|
||||
return {};
|
||||
}
|
||||
|
||||
const proxy = containerSettings.proxy;
|
||||
|
||||
if (!proxy.enabled || !proxy.username) {
|
||||
return {};
|
||||
}
|
||||
|
||||
return {
|
||||
authCredentials: {
|
||||
username: proxy.username,
|
||||
password: proxy.password || ""
|
||||
}
|
||||
};
|
||||
},
|
||||
{
|
||||
urls: ["<all_urls>"]
|
||||
},
|
||||
["blocking"]
|
||||
);
|
||||
@@ -0,0 +1,42 @@
|
||||
{
|
||||
"manifest_version": 3,
|
||||
"name": "Proxy Container",
|
||||
"version": "1.0.0",
|
||||
"description": "Firefox containers with regex routing and per-container proxy",
|
||||
|
||||
"permissions": [
|
||||
"storage",
|
||||
"contextualIdentities",
|
||||
"proxy",
|
||||
"tabs",
|
||||
"cookies",
|
||||
"webRequest",
|
||||
"webRequestBlocking"
|
||||
],
|
||||
|
||||
"host_permissions": [
|
||||
"<all_urls>"
|
||||
],
|
||||
|
||||
"background": {
|
||||
"scripts": [
|
||||
"background.js"
|
||||
]
|
||||
},
|
||||
|
||||
"action": {
|
||||
"default_title": "Открыть настройки Proxy Container"
|
||||
},
|
||||
|
||||
"options_ui": {
|
||||
"page": "options.html",
|
||||
"open_in_tab": true
|
||||
},
|
||||
|
||||
"browser_specific_settings": {
|
||||
"gecko": {
|
||||
"id": "proxy-container@example.local",
|
||||
"strict_min_version": "91.1.0"
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,251 @@
|
||||
<!doctype html>
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>Proxy Container Settings</title>
|
||||
|
||||
<style>
|
||||
body {
|
||||
max-width: 1100px;
|
||||
margin: 40px auto;
|
||||
padding: 0 20px;
|
||||
font-family: Arial, sans-serif;
|
||||
line-height: 1.5;
|
||||
color: #222;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3 {
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.panel {
|
||||
border: 1px solid #ccc;
|
||||
padding: 16px;
|
||||
margin-bottom: 24px;
|
||||
border-radius: 6px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.container-card {
|
||||
border: 1px solid #ddd;
|
||||
padding: 16px;
|
||||
margin-bottom: 14px;
|
||||
border-radius: 6px;
|
||||
background: #fafafa;
|
||||
}
|
||||
|
||||
.field {
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
font-weight: 700;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 8px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
input[type="checkbox"] {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
textarea {
|
||||
min-height: 96px;
|
||||
font-family: Consolas, monospace;
|
||||
}
|
||||
|
||||
button {
|
||||
padding: 8px 12px;
|
||||
cursor: pointer;
|
||||
margin-right: 6px;
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
.container-title {
|
||||
font-weight: 700;
|
||||
font-size: 18px;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.small {
|
||||
font-size: 12px;
|
||||
color: #555;
|
||||
word-break: break-all;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.danger {
|
||||
color: #a40000;
|
||||
}
|
||||
|
||||
.success {
|
||||
color: #006800;
|
||||
}
|
||||
|
||||
#status {
|
||||
font-weight: 700;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
@media (max-width: 760px) {
|
||||
.grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.checkbox-label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.muted {
|
||||
color: #666;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
code {
|
||||
background: #eee;
|
||||
padding: 2px 4px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Proxy Container</h1>
|
||||
|
||||
<p id="status"></p>
|
||||
|
||||
<section class="panel">
|
||||
<h2>Создать контейнер</h2>
|
||||
|
||||
<div class="grid">
|
||||
<div class="field">
|
||||
<label for="name">Название контейнера</label>
|
||||
<input id="name" type="text" placeholder="Work" />
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label for="color">Цвет</label>
|
||||
<select id="color">
|
||||
<option value="blue">blue</option>
|
||||
<option value="turquoise">turquoise</option>
|
||||
<option value="green">green</option>
|
||||
<option value="yellow">yellow</option>
|
||||
<option value="orange">orange</option>
|
||||
<option value="red">red</option>
|
||||
<option value="pink">pink</option>
|
||||
<option value="purple">purple</option>
|
||||
<option value="toolbar">toolbar</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label for="icon">Иконка</label>
|
||||
<select id="icon">
|
||||
<option value="fingerprint">fingerprint</option>
|
||||
<option value="briefcase">briefcase</option>
|
||||
<option value="cart">cart</option>
|
||||
<option value="circle">circle</option>
|
||||
<option value="dollar">dollar</option>
|
||||
<option value="fence">fence</option>
|
||||
<option value="gift">gift</option>
|
||||
<option value="vacation">vacation</option>
|
||||
<option value="food">food</option>
|
||||
<option value="fruit">fruit</option>
|
||||
<option value="pet">pet</option>
|
||||
<option value="tree">tree</option>
|
||||
<option value="chill">chill</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label for="urlRules">URL-правила, по одному на строку</label>
|
||||
<textarea id="urlRules" placeholder="*.ru github.com/* https://*.example.com/*"></textarea>
|
||||
<div class="muted">
|
||||
Примеры: <code>*.ru</code>, <code>github.com/*</code>, <code>https://*.example.com/*</code>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>Proxy</h3>
|
||||
|
||||
<div class="field">
|
||||
<label class="checkbox-label">
|
||||
<input id="proxyEnabled" type="checkbox" />
|
||||
Использовать proxy для этого контейнера
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<div class="field">
|
||||
<label for="proxyType">Proxy type</label>
|
||||
<select id="proxyType">
|
||||
<option value="http">http</option>
|
||||
<option value="https">https</option>
|
||||
<option value="socks">socks</option>
|
||||
<option value="socks4">socks4</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label for="proxyPort">Proxy port</label>
|
||||
<input id="proxyPort" type="number" placeholder="8080" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label for="proxyHost">Proxy host</label>
|
||||
<input id="proxyHost" type="text" placeholder="127.0.0.1" />
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<div class="field">
|
||||
<label for="proxyUsername">Proxy username</label>
|
||||
<input id="proxyUsername" type="text" placeholder="необязательно" />
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label for="proxyPassword">Proxy password</label>
|
||||
<input id="proxyPassword" type="password" placeholder="необязательно" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label class="checkbox-label">
|
||||
<input id="proxyDNS" type="checkbox" />
|
||||
Proxy DNS через SOCKS
|
||||
</label>
|
||||
<div class="muted">
|
||||
Имеет смысл только для SOCKS/SOCKS4.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button id="createContainer">Создать контейнер</button>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2>Существующие контейнеры</h2>
|
||||
<div id="containers"></div>
|
||||
</section>
|
||||
|
||||
<script src="options.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
+418
@@ -0,0 +1,418 @@
|
||||
const STORAGE_KEY = "containerSettings";
|
||||
|
||||
const CONTAINER_COLORS = [
|
||||
"blue",
|
||||
"turquoise",
|
||||
"green",
|
||||
"yellow",
|
||||
"orange",
|
||||
"red",
|
||||
"pink",
|
||||
"purple",
|
||||
"toolbar"
|
||||
];
|
||||
|
||||
const CONTAINER_ICONS = [
|
||||
"fingerprint",
|
||||
"briefcase",
|
||||
"cart",
|
||||
"circle",
|
||||
"dollar",
|
||||
"fence",
|
||||
"gift",
|
||||
"vacation",
|
||||
"food",
|
||||
"fruit",
|
||||
"pet",
|
||||
"tree",
|
||||
"chill"
|
||||
];
|
||||
|
||||
const PROXY_TYPES = [
|
||||
"http",
|
||||
"https",
|
||||
"socks",
|
||||
"socks4"
|
||||
];
|
||||
|
||||
const DEFAULT_PROXY = {
|
||||
enabled: false,
|
||||
type: "http",
|
||||
host: "",
|
||||
port: 8080,
|
||||
username: "",
|
||||
password: "",
|
||||
proxyDNS: false
|
||||
};
|
||||
|
||||
const nameInput = document.getElementById("name");
|
||||
const colorInput = document.getElementById("color");
|
||||
const iconInput = document.getElementById("icon");
|
||||
const urlRulesInput = document.getElementById("urlRules");
|
||||
|
||||
const proxyEnabledInput = document.getElementById("proxyEnabled");
|
||||
const proxyTypeInput = document.getElementById("proxyType");
|
||||
const proxyHostInput = document.getElementById("proxyHost");
|
||||
const proxyPortInput = document.getElementById("proxyPort");
|
||||
const proxyUsernameInput = document.getElementById("proxyUsername");
|
||||
const proxyPasswordInput = document.getElementById("proxyPassword");
|
||||
const proxyDNSInput = document.getElementById("proxyDNS");
|
||||
|
||||
const createButton = document.getElementById("createContainer");
|
||||
const containersElement = document.getElementById("containers");
|
||||
const statusElement = document.getElementById("status");
|
||||
|
||||
function setStatus(message, isError = false) {
|
||||
statusElement.textContent = message;
|
||||
statusElement.className = isError ? "danger" : "success";
|
||||
|
||||
if (message) {
|
||||
setTimeout(() => {
|
||||
statusElement.textContent = "";
|
||||
statusElement.className = "";
|
||||
}, 3000);
|
||||
}
|
||||
}
|
||||
|
||||
function escapeHtml(value) {
|
||||
return String(value)
|
||||
.replaceAll("&", "&")
|
||||
.replaceAll("<", "<")
|
||||
.replaceAll(">", ">")
|
||||
.replaceAll('"', """);
|
||||
}
|
||||
|
||||
function parseUrlRules(text) {
|
||||
return text
|
||||
.split("\n")
|
||||
.map((line) => line.trim())
|
||||
.filter(Boolean);
|
||||
}
|
||||
|
||||
function validateUrlRules(rules) {
|
||||
for (const rule of rules) {
|
||||
if (rule.includes(" ")) {
|
||||
throw new Error(`URL-правило содержит пробел: ${rule}`);
|
||||
}
|
||||
|
||||
if (rule.length > 500) {
|
||||
throw new Error(`URL-правило слишком длинное: ${rule}`);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function validateProxy(proxy) {
|
||||
if (!proxy.enabled) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (!PROXY_TYPES.includes(proxy.type)) {
|
||||
throw new Error("Некорректный proxy type");
|
||||
}
|
||||
|
||||
if (!proxy.host) {
|
||||
throw new Error("Proxy host пустой");
|
||||
}
|
||||
|
||||
if (!Number.isInteger(proxy.port) || proxy.port < 1 || proxy.port > 65535) {
|
||||
throw new Error("Proxy port должен быть от 1 до 65535");
|
||||
}
|
||||
}
|
||||
|
||||
async function getSettingsMap() {
|
||||
const result = await browser.storage.local.get(STORAGE_KEY);
|
||||
return result[STORAGE_KEY] || {};
|
||||
}
|
||||
|
||||
async function saveSettingsMap(settingsMap) {
|
||||
await browser.storage.local.set({
|
||||
[STORAGE_KEY]: settingsMap
|
||||
});
|
||||
}
|
||||
|
||||
function readCreateFormProxy() {
|
||||
return {
|
||||
enabled: proxyEnabledInput.checked,
|
||||
type: proxyTypeInput.value,
|
||||
host: proxyHostInput.value.trim(),
|
||||
port: Number(proxyPortInput.value),
|
||||
username: proxyUsernameInput.value.trim(),
|
||||
password: proxyPasswordInput.value,
|
||||
proxyDNS: proxyDNSInput.checked
|
||||
};
|
||||
}
|
||||
|
||||
function clearCreateForm() {
|
||||
nameInput.value = "";
|
||||
colorInput.value = "blue";
|
||||
iconInput.value = "fingerprint";
|
||||
urlRulesInput.value = "";
|
||||
|
||||
proxyEnabledInput.checked = false;
|
||||
proxyTypeInput.value = "http";
|
||||
proxyHostInput.value = "";
|
||||
proxyPortInput.value = "";
|
||||
proxyUsernameInput.value = "";
|
||||
proxyPasswordInput.value = "";
|
||||
proxyDNSInput.checked = false;
|
||||
}
|
||||
|
||||
async function createContainer() {
|
||||
const name = nameInput.value.trim();
|
||||
const color = colorInput.value;
|
||||
const icon = iconInput.value;
|
||||
const urlRules = parseUrlRules(urlRulesInput.value);
|
||||
const proxy = readCreateFormProxy();
|
||||
|
||||
if (!name) {
|
||||
setStatus("Ошибка: название контейнера пустое", true);
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
validateUrlRules(urlRules);
|
||||
validateProxy(proxy);
|
||||
|
||||
const container = await browser.contextualIdentities.create({
|
||||
name,
|
||||
color,
|
||||
icon
|
||||
});
|
||||
|
||||
const settingsMap = await getSettingsMap();
|
||||
|
||||
settingsMap[container.cookieStoreId] = {
|
||||
urlRules,
|
||||
proxy
|
||||
};
|
||||
|
||||
await saveSettingsMap(settingsMap);
|
||||
|
||||
clearCreateForm();
|
||||
|
||||
setStatus("Контейнер создан");
|
||||
await renderContainers();
|
||||
} catch (error) {
|
||||
setStatus(error.message, true);
|
||||
}
|
||||
}
|
||||
|
||||
function createOptions(values, selectedValue) {
|
||||
return values
|
||||
.map((value) => {
|
||||
const selected = value === selectedValue ? "selected" : "";
|
||||
return `<option value="${escapeHtml(value)}" ${selected}>${escapeHtml(value)}</option>`;
|
||||
})
|
||||
.join("");
|
||||
}
|
||||
|
||||
function readCardProxy(card) {
|
||||
return {
|
||||
enabled: card.querySelector(".edit-proxy-enabled").checked,
|
||||
type: card.querySelector(".edit-proxy-type").value,
|
||||
host: card.querySelector(".edit-proxy-host").value.trim(),
|
||||
port: Number(card.querySelector(".edit-proxy-port").value),
|
||||
username: card.querySelector(".edit-proxy-username").value.trim(),
|
||||
password: card.querySelector(".edit-proxy-password").value,
|
||||
proxyDNS: card.querySelector(".edit-proxy-dns").checked
|
||||
};
|
||||
}
|
||||
|
||||
async function updateContainer(cookieStoreId) {
|
||||
const card = document.querySelector(`[data-cookie-store-id="${cookieStoreId}"]`);
|
||||
|
||||
if (!card) {
|
||||
setStatus("Ошибка: карточка контейнера не найдена", true);
|
||||
return;
|
||||
}
|
||||
|
||||
const name = card.querySelector(".edit-name").value.trim();
|
||||
const color = card.querySelector(".edit-color").value;
|
||||
const icon = card.querySelector(".edit-icon").value;
|
||||
const urlRules = parseUrlRules(card.querySelector(".edit-url-rules").value);
|
||||
const proxy = readCardProxy(card);
|
||||
|
||||
if (!name) {
|
||||
setStatus("Ошибка: название контейнера пустое", true);
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
validateUrlRules(urlRules);
|
||||
validateProxy(proxy);
|
||||
|
||||
await browser.contextualIdentities.update(cookieStoreId, {
|
||||
name,
|
||||
color,
|
||||
icon
|
||||
});
|
||||
|
||||
const settingsMap = await getSettingsMap();
|
||||
|
||||
settingsMap[cookieStoreId] = {
|
||||
urlRules,
|
||||
proxy
|
||||
};
|
||||
|
||||
await saveSettingsMap(settingsMap);
|
||||
|
||||
setStatus("Контейнер обновлён");
|
||||
await renderContainers();
|
||||
} catch (error) {
|
||||
setStatus(error.message, true);
|
||||
}
|
||||
}
|
||||
|
||||
async function removeContainer(cookieStoreId) {
|
||||
const confirmed = confirm("Удалить контейнер? Это удалит Firefox-контейнер и его настройки.");
|
||||
|
||||
if (!confirmed) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
await browser.contextualIdentities.remove(cookieStoreId);
|
||||
|
||||
const settingsMap = await getSettingsMap();
|
||||
delete settingsMap[cookieStoreId];
|
||||
|
||||
await saveSettingsMap(settingsMap);
|
||||
|
||||
setStatus("Контейнер удалён");
|
||||
await renderContainers();
|
||||
} catch (error) {
|
||||
setStatus(error.message, true);
|
||||
}
|
||||
}
|
||||
|
||||
function renderContainerCard(container, storedSettings) {
|
||||
const urlRules = storedSettings.urlRules || [];
|
||||
const proxy = {
|
||||
...DEFAULT_PROXY,
|
||||
...(storedSettings.proxy || {})
|
||||
};
|
||||
|
||||
const card = document.createElement("div");
|
||||
card.className = "container-card";
|
||||
card.dataset.cookieStoreId = container.cookieStoreId;
|
||||
|
||||
card.innerHTML = `
|
||||
<div class="container-title">${escapeHtml(container.name)}</div>
|
||||
<div class="small">cookieStoreId: ${escapeHtml(container.cookieStoreId)}</div>
|
||||
|
||||
<div class="grid">
|
||||
<div class="field">
|
||||
<label>Название</label>
|
||||
<input class="edit-name" type="text" value="${escapeHtml(container.name)}" />
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label>Цвет</label>
|
||||
<select class="edit-color">
|
||||
${createOptions(CONTAINER_COLORS, container.color)}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label>Иконка</label>
|
||||
<select class="edit-icon">
|
||||
${createOptions(CONTAINER_ICONS, container.icon)}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label>URL-правила</label>
|
||||
<textarea class="edit-url-rules">${escapeHtml(urlRules.join("\n"))}</textarea>
|
||||
<div class="muted">
|
||||
Примеры: <code>*.ru</code>, <code>github.com/*</code>, <code>https://*.example.com/*</code>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>Proxy</h3>
|
||||
|
||||
<div class="field">
|
||||
<label class="checkbox-label">
|
||||
<input class="edit-proxy-enabled" type="checkbox" ${proxy.enabled ? "checked" : ""} />
|
||||
Использовать proxy для этого контейнера
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<div class="field">
|
||||
<label>Proxy type</label>
|
||||
<select class="edit-proxy-type">
|
||||
${createOptions(PROXY_TYPES, proxy.type)}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label>Proxy port</label>
|
||||
<input class="edit-proxy-port" type="number" value="${escapeHtml(proxy.port)}" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label>Proxy host</label>
|
||||
<input class="edit-proxy-host" type="text" value="${escapeHtml(proxy.host)}" placeholder="127.0.0.1" />
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<div class="field">
|
||||
<label>Proxy username</label>
|
||||
<input class="edit-proxy-username" type="text" value="${escapeHtml(proxy.username)}" placeholder="необязательно" />
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label>Proxy password</label>
|
||||
<input class="edit-proxy-password" type="password" value="${escapeHtml(proxy.password)}" placeholder="необязательно" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label class="checkbox-label">
|
||||
<input class="edit-proxy-dns" type="checkbox" ${proxy.proxyDNS ? "checked" : ""} />
|
||||
Proxy DNS через SOCKS
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<button class="save-container">Сохранить</button>
|
||||
<button class="delete-container">Удалить</button>
|
||||
`;
|
||||
|
||||
card.querySelector(".save-container").addEventListener("click", () => {
|
||||
updateContainer(container.cookieStoreId);
|
||||
});
|
||||
|
||||
card.querySelector(".delete-container").addEventListener("click", () => {
|
||||
removeContainer(container.cookieStoreId);
|
||||
});
|
||||
|
||||
return card;
|
||||
}
|
||||
|
||||
async function renderContainers() {
|
||||
containersElement.innerHTML = "";
|
||||
|
||||
try {
|
||||
const containers = await browser.contextualIdentities.query({});
|
||||
const settingsMap = await getSettingsMap();
|
||||
|
||||
if (!containers.length) {
|
||||
containersElement.textContent = "Контейнеров пока нет.";
|
||||
return;
|
||||
}
|
||||
|
||||
for (const container of containers) {
|
||||
const storedSettings = settingsMap[container.cookieStoreId] || {};
|
||||
const card = renderContainerCard(container, storedSettings);
|
||||
containersElement.appendChild(card);
|
||||
}
|
||||
} catch (error) {
|
||||
setStatus(error.message, true);
|
||||
}
|
||||
}
|
||||
|
||||
createButton.addEventListener("click", createContainer);
|
||||
|
||||
renderContainers();
|
||||
Reference in New Issue
Block a user