mirror of
https://github.com/yaklang/yaklang-chrome-extension.git
synced 2026-09-22 03:10:43 +08:00
553 lines
16 KiB
JavaScript
553 lines
16 KiB
JavaScript
console.log("Content script starting...");
|
||
|
||
// 代理操作类型常量
|
||
const ProxyActionType = {
|
||
SET_PROXY_CONFIG: 'SET_PROXY_CONFIG',
|
||
CLEAR_PROXY_CONFIG: 'CLEAR_PROXY_CONFIG',
|
||
GET_PROXY_STATUS: 'GET_PROXY_STATUS',
|
||
GET_PROXY_CONFIGS: 'GET_PROXY_CONFIGS',
|
||
UPDATE_PROXY_CONFIG: 'UPDATE_PROXY_CONFIG'
|
||
};
|
||
|
||
// 在文件顶部添加常量声明
|
||
const YAK_ICON_URL = chrome.runtime.getURL('/images/yak.svg');
|
||
|
||
// 添加一个通用的消息发送函数
|
||
async function sendMessageWithRetry(message, maxRetries = 3) {
|
||
for (let i = 0; i < maxRetries; i++) {
|
||
try {
|
||
const response = await chrome.runtime.sendMessage(message);
|
||
return response;
|
||
} catch (error) {
|
||
console.warn(`Attempt ${i + 1} failed:`, error);
|
||
if (i === maxRetries - 1) {
|
||
throw error;
|
||
}
|
||
// 等待一小段时间后重试
|
||
await new Promise(resolve => setTimeout(resolve, 500));
|
||
}
|
||
}
|
||
}
|
||
|
||
// 获取当前代理状态
|
||
async function getCurrentProxy() {
|
||
try {
|
||
const response = await sendMessageWithRetry({
|
||
action: ProxyActionType.GET_PROXY_STATUS
|
||
});
|
||
|
||
if (!response) {
|
||
console.log('No response from background script');
|
||
return { enable: false, proxy: '' };
|
||
}
|
||
|
||
// 检查响应格式
|
||
if (!response.success) {
|
||
console.error('Error in proxy status response:', response.error);
|
||
return { enable: false, proxy: '' };
|
||
}
|
||
|
||
const status = response.data;
|
||
console.log('Proxy status from background:', status);
|
||
|
||
// 根据状态返回正确的格式
|
||
if (status.mode === 'fixed_servers' && status.enabled && status.config) {
|
||
const config = status.config;
|
||
// 只在确实有配置时才返回代理信息
|
||
if (config.scheme && config.host && config.port) {
|
||
return {
|
||
enable: true,
|
||
proxy: `${config.scheme}://${config.host}:${config.port}`
|
||
};
|
||
}
|
||
}
|
||
|
||
// 对于直连或系统代理，返回相应状态
|
||
return {
|
||
enable: false,
|
||
proxy: status.mode === 'system' ? 'system' : ''
|
||
};
|
||
} catch (error) {
|
||
console.error('Error getting proxy status:', error);
|
||
return { enable: false, proxy: '' };
|
||
}
|
||
}
|
||
|
||
// 获取所有代理配置
|
||
async function getProxyConfigs() {
|
||
try {
|
||
const response = await sendMessageWithRetry({
|
||
action: ProxyActionType.GET_PROXY_CONFIGS
|
||
});
|
||
|
||
if (!response) {
|
||
console.log('No response from background script');
|
||
return [];
|
||
}
|
||
if (!response.success) {
|
||
console.error('Error in response:', response.error);
|
||
return [];
|
||
}
|
||
return response.data || [];
|
||
} catch (error) {
|
||
console.error('Error getting proxy configs:', error);
|
||
return [];
|
||
}
|
||
}
|
||
|
||
// 切换代理
|
||
async function switchProxy(config) {
|
||
try {
|
||
console.log('Switching proxy:', config);
|
||
await sendMessageWithRetry({
|
||
action: ProxyActionType.SET_PROXY_CONFIG,
|
||
config: config
|
||
});
|
||
|
||
await updatePanel();
|
||
} catch (error) {
|
||
console.error('Error switching proxy:', error);
|
||
}
|
||
}
|
||
|
||
// 清除代理
|
||
async function clearProxy() {
|
||
try {
|
||
const response = await sendMessageWithRetry({
|
||
action: ProxyActionType.SET_PROXY_CONFIG,
|
||
config: {
|
||
id: 'direct',
|
||
name: '[直接连接]',
|
||
proxyType: 'direct',
|
||
enabled: false
|
||
}
|
||
});
|
||
|
||
console.log('Clear proxy response:', response);
|
||
await updatePanel();
|
||
} catch (error) {
|
||
console.error('Error clearing proxy:', error);
|
||
}
|
||
}
|
||
|
||
// 更新面板显示
|
||
async function updatePanel() {
|
||
const panel = document.getElementById('yakit-proxy-panel')?.shadowRoot?.querySelector('.panel-content');
|
||
if (!panel) return;
|
||
|
||
const currentProxy = await getCurrentProxy();
|
||
const configs = await getProxyConfigs();
|
||
|
||
console.log('Current proxy status:', currentProxy);
|
||
|
||
// 修改这里的判断逻辑
|
||
let html = `
|
||
<div class="proxy-item ${!currentProxy.enable && currentProxy.proxy === '' ? 'active' : ''}"
|
||
data-id="direct"
|
||
title="直接连接">
|
||
<span style="color: ${!currentProxy.enable && currentProxy.proxy === '' ? '#ff6b00' : '#666'}">🟢</span>
|
||
<span>[直接连接]</span>
|
||
<img src="${YAK_ICON_URL}" class="watermark-icon" alt="" />
|
||
</div>
|
||
<div class="proxy-item ${currentProxy.proxy === 'system' ? 'active' : ''}"
|
||
data-id="system"
|
||
title="系统代理">
|
||
<span style="color: ${currentProxy.proxy === 'system' ? '#ff6b00' : '#666'}">⚙️</span>
|
||
<span>[系统代理]</span>
|
||
<img src="${YAK_ICON_URL}" class="watermark-icon" alt="" />
|
||
</div>
|
||
<div class="divider"></div>
|
||
`;
|
||
|
||
// 修改自定义代理配置的判断逻辑
|
||
configs.forEach(config => {
|
||
if (config.id !== 'direct' && config.id !== 'system') {
|
||
const proxyUrl = `${config.scheme}://${config.host}:${config.port}`;
|
||
const isActive = currentProxy.enable && currentProxy.proxy === proxyUrl && config.enabled;
|
||
|
||
// 添加 title 属性显示详细信息
|
||
const tooltipText = `${config.scheme.toUpperCase()} ${config.host}:${config.port}`;
|
||
|
||
html += `
|
||
<div class="proxy-item ${isActive ? 'active' : ''}"
|
||
data-id="${config.id}"
|
||
title="${tooltipText}">
|
||
<span style="color: ${isActive ? '#ff6b00' : '#666'}">🌐</span>
|
||
<span>${config.name}</span>
|
||
<img src="${YAK_ICON_URL}" class="watermark-icon" alt="" />
|
||
</div>
|
||
`;
|
||
}
|
||
});
|
||
|
||
// 修改添加操作按钮部分
|
||
html += `
|
||
<div class="add-proxy">
|
||
<span>➕</span>
|
||
<span>添加代理...</span>
|
||
</div>
|
||
<div class="settings">
|
||
<span>👨💻</span>
|
||
<span>选项</span>
|
||
</div>
|
||
`;
|
||
|
||
panel.innerHTML = html;
|
||
|
||
// 添加事件监听
|
||
panel.querySelectorAll('.proxy-item').forEach(item => {
|
||
item.addEventListener('click', async () => {
|
||
const id = item.dataset.id;
|
||
if (id === 'direct') {
|
||
await clearProxy();
|
||
} else if (id === 'system') {
|
||
await switchProxy({
|
||
id: 'system',
|
||
name: '[系统代理]',
|
||
proxyType: 'system'
|
||
});
|
||
} else {
|
||
const config = configs.find(c => c.id === id);
|
||
if (config) {
|
||
await switchProxy(config);
|
||
}
|
||
}
|
||
});
|
||
});
|
||
|
||
// 修改添加代理和选项按钮的事件处理
|
||
panel.querySelector('.add-proxy')?.addEventListener('click', async () => {
|
||
try {
|
||
// 通过发送消息给 background script 来处理添加代理
|
||
await sendMessageWithRetry({
|
||
action: 'OPEN_OPTIONS_PAGE',
|
||
triggerAdd: true // 标记需要触发添加代理
|
||
});
|
||
} catch (error) {
|
||
console.error('Error handling add proxy:', error);
|
||
}
|
||
});
|
||
|
||
panel.querySelector('.settings')?.addEventListener('click', async () => {
|
||
try {
|
||
// 通过发送消息给 background script 来打开选项页
|
||
await sendMessageWithRetry({
|
||
action: 'OPEN_OPTIONS_PAGE'
|
||
});
|
||
} catch (error) {
|
||
console.error('Error opening options page:', error);
|
||
}
|
||
});
|
||
}
|
||
|
||
// 创建并注入悬浮框
|
||
function createFloatingPanel() {
|
||
console.log("Creating floating panel...");
|
||
|
||
// 检查是否已存在面板
|
||
if (document.getElementById('yakit-proxy-panel')) {
|
||
return;
|
||
}
|
||
|
||
// 创建容器
|
||
const container = document.createElement('div');
|
||
container.id = 'yakit-proxy-panel';
|
||
|
||
// 创建 shadow DOM
|
||
const shadow = container.attachShadow({ mode: 'open' });
|
||
|
||
// 添加样式
|
||
const style = document.createElement('style');
|
||
style.textContent = `
|
||
.floating-panel {
|
||
position: fixed;
|
||
top: 20px;
|
||
right: 0;
|
||
width: 180px;
|
||
background: white;
|
||
border-radius: 8px 0 0 8px;
|
||
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
||
z-index: 2147483647;
|
||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
||
transition: transform 0.3s ease;
|
||
}
|
||
|
||
.floating-panel.collapsed {
|
||
transform: translateX(100%);
|
||
}
|
||
|
||
.panel-header {
|
||
padding: 4px;
|
||
border-bottom: 1px solid #eee;
|
||
border-radius: 8px 0 0 0;
|
||
background: #f8f9fa;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
|
||
.collapse-trigger {
|
||
position: absolute;
|
||
left: -20px;
|
||
top: 0;
|
||
width: 20px;
|
||
height: 100%;
|
||
background: #f8f9fa;
|
||
border-radius: 8px 0 0 8px;
|
||
cursor: pointer;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
box-shadow: -2px 0 5px rgba(0,0,0,0.1);
|
||
}
|
||
|
||
.collapse-trigger:hover {
|
||
background: #e9ecef;
|
||
}
|
||
|
||
.collapse-trigger::after {
|
||
content: '◀';
|
||
transition: transform 0.3s ease;
|
||
}
|
||
|
||
.floating-panel.collapsed .collapse-trigger::after {
|
||
transform: rotate(180deg);
|
||
}
|
||
|
||
.panel-content {
|
||
padding: 4px;
|
||
}
|
||
|
||
.proxy-item {
|
||
position: relative;
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 4px 10px;
|
||
cursor: pointer;
|
||
transition: all 0.2s;
|
||
color: #666;
|
||
border-left: 3px solid transparent;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.proxy-item > span {
|
||
position: relative;
|
||
z-index: 1;
|
||
}
|
||
|
||
.watermark-icon {
|
||
position: absolute;
|
||
right: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
opacity: 0.3;
|
||
pointer-events: none;
|
||
display: none;
|
||
object-fit: contain;
|
||
object-position: right center;
|
||
padding: 4px;
|
||
}
|
||
|
||
.proxy-item.active .watermark-icon {
|
||
display: block;
|
||
}
|
||
|
||
.proxy-item.active {
|
||
color: #ff6b00 !important;
|
||
background: #fff7e6;
|
||
border-left: 3px solid #ff6b00;
|
||
}
|
||
|
||
.proxy-item.active span:first-child {
|
||
color: #ff6b00 !important;
|
||
}
|
||
|
||
.proxy-item span:first-child {
|
||
margin-right: 8px;
|
||
font-size: 16px;
|
||
color: #666;
|
||
transition: color 0.2s;
|
||
}
|
||
|
||
.proxy-item:hover {
|
||
background: #f5f5f5;
|
||
}
|
||
|
||
.proxy-item:hover span:first-child {
|
||
color: #ff6b00;
|
||
}
|
||
|
||
.add-proxy {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 4px 10px;
|
||
color: #1890ff;
|
||
cursor: pointer;
|
||
border-top: 1px solid #eee;
|
||
transition: all 0.2s;
|
||
}
|
||
|
||
.add-proxy:hover {
|
||
background: #f5f5f5;
|
||
}
|
||
|
||
.settings {
|
||
padding: 4px 10px;
|
||
color: #666;
|
||
cursor: pointer;
|
||
border-top: 1px solid #eee;
|
||
transition: all 0.2s;
|
||
}
|
||
|
||
.settings:hover {
|
||
background: #f5f5f5;
|
||
}
|
||
|
||
.panel-header .header-content {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
padding: 0 4px;
|
||
}
|
||
|
||
.yak-icon {
|
||
width: 24px;
|
||
height: 24px;
|
||
object-fit: contain;
|
||
}
|
||
|
||
.divider {
|
||
height: 1px;
|
||
background-color: #eee;
|
||
margin: 4px 0;
|
||
}
|
||
`;
|
||
|
||
// 创建面板内容
|
||
const panel = document.createElement('div');
|
||
panel.className = 'floating-panel';
|
||
panel.innerHTML = `
|
||
<div class="collapse-trigger"></div>
|
||
<div class="panel-header">
|
||
<div class="header-content">
|
||
<img src="${YAK_ICON_URL}" class="yak-icon" alt="Yak" />
|
||
<span>代理设置</span>
|
||
</div>
|
||
</div>
|
||
<div class="panel-content">
|
||
<div class="proxy-item active">
|
||
<span>🟢</span>
|
||
<span>[直接连接]</span>
|
||
</div>
|
||
<div class="proxy-item">
|
||
<span>⚙️</span>
|
||
<span>[系统代理]</span>
|
||
</div>
|
||
<div class="divider"></div>
|
||
<div class="add-proxy">
|
||
<span>➕</span>
|
||
<span>[添加代理...]</span>
|
||
</div>
|
||
<div class="settings">
|
||
<span>👨💻</span>
|
||
<span>选项</span>
|
||
</div>
|
||
</div>
|
||
`;
|
||
|
||
// 将样式和面板添加到 shadow DOM
|
||
shadow.appendChild(style);
|
||
shadow.appendChild(panel);
|
||
|
||
// 将容器添加到页面
|
||
document.body.appendChild(container);
|
||
|
||
// 添加事件监听器
|
||
const addEventListeners = () => {
|
||
// 收起/展开功能
|
||
panel.querySelector('.collapse-trigger')?.addEventListener('click', (e) => {
|
||
e.stopPropagation();
|
||
panel.classList.toggle('collapsed');
|
||
});
|
||
|
||
// 添加代理按钮
|
||
panel.querySelector('.add-proxy')?.addEventListener('click', () => {
|
||
chrome.runtime.sendMessage({ action: 'OPEN_OPTIONS_PAGE' });
|
||
});
|
||
|
||
// 设置按钮
|
||
panel.querySelector('.settings')?.addEventListener('click', () => {
|
||
chrome.runtime.sendMessage({ action: 'OPEN_OPTIONS_PAGE' });
|
||
});
|
||
};
|
||
|
||
// 初始化事件监听器
|
||
addEventListeners();
|
||
|
||
// 初始更新面板
|
||
updatePanel();
|
||
|
||
// 添加代理变化监听
|
||
let messageListener = (message) => {
|
||
if (message.action === 'PROXY_STATUS_CHANGED') {
|
||
updatePanel();
|
||
}
|
||
};
|
||
|
||
// 确保只添加一次监听器
|
||
chrome.runtime.onMessage.removeListener(messageListener);
|
||
chrome.runtime.onMessage.addListener(messageListener);
|
||
|
||
// 验证面板是否成功创建
|
||
console.log("Panel created:", {
|
||
containerExists: !!document.getElementById('yakit-proxy-panel'),
|
||
containerVisible: window.getComputedStyle(container).display !== 'none',
|
||
shadowRoot: !!container.shadowRoot,
|
||
panelElement: !!container.shadowRoot?.querySelector('.floating-panel')
|
||
});
|
||
}
|
||
|
||
// 使用 MutationObserver 确保在 DOM 准备好时创建面板
|
||
function initPanel() {
|
||
if (document.body) {
|
||
console.log("Body found, creating panel");
|
||
// 确保background script已经准备好
|
||
sendMessageWithRetry({ action: 'PING' })
|
||
.then(() => {
|
||
createFloatingPanel();
|
||
})
|
||
.catch(error => {
|
||
console.error('Failed to initialize panel:', error);
|
||
// 可以在这里添加重试逻辑
|
||
setTimeout(initPanel, 1000);
|
||
});
|
||
} else {
|
||
console.log("Body not found, waiting...");
|
||
const observer = new MutationObserver((mutations, obs) => {
|
||
if (document.body) {
|
||
console.log("Body found via observer");
|
||
obs.disconnect();
|
||
initPanel();
|
||
}
|
||
});
|
||
|
||
observer.observe(document.documentElement, {
|
||
childList: true,
|
||
subtree: true
|
||
});
|
||
}
|
||
}
|
||
|
||
// 尝试多种方式来确保面板被创建
|
||
console.log("Setting up initialization...");
|
||
|
||
window.addEventListener('load', () => {
|
||
console.log("Window load triggered");
|
||
initPanel();
|
||
});
|
||
|
||
// 在关键位置添加更多日志
|
||
console.log("Document readyState:", document.readyState);
|
||
console.log("Document body exists:", !!document.body);
|
||
console.log("Document documentElement exists:", !!document.documentElement);
|