/* eslint-disable */
(function () {
if (window.__ELEMENT_MARKER_INSTALLED__) return;
window.__ELEMENT_MARKER_INSTALLED__ = true;
const IS_MAIN = window === window.top;
// ============================================================================
// Utility Functions
// ============================================================================
function sleep(ms) {
return new Promise((resolve) => setTimeout(resolve, ms));
}
// ============================================================================
// Constants & Configuration
// ============================================================================
const CONFIG = {
DEFAULTS: {
PREFS: {
preferId: true,
preferStableAttr: true,
preferClass: true,
},
SELECTOR_TYPE: 'css',
LIST_MODE: false,
},
Z_INDEX: {
OVERLAY: 2147483646,
HIGHLIGHTER: 2147483645,
RECTS: 2147483644,
},
COLORS: {
PRIMARY: '#2563eb',
SUCCESS: '#10b981',
WARNING: '#f59e0b',
DANGER: '#ef4444',
HOVER: '#10b981',
VERIFY: '#3b82f6',
},
};
// ============================================================================
// Panel Host Module - Shadow DOM Management
// ============================================================================
const PanelHost = (() => {
let hostElement = null;
let shadowRoot = null;
const PANEL_STYLES = `
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.em-panel {
width: 400px;
background: #ffffff;
border-radius: 12px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
padding: 20px;
transition: opacity 150ms ease;
}
/* Header */
.em-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 20px;
user-select: none;
}
.em-title {
font-size: 20px;
font-weight: 500;
color: #262626;
}
.em-header-actions {
display: flex;
gap: 4px;
align-items: center;
}
.em-icon-btn {
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
border: none;
background: transparent;
color: #a3a3a3;
cursor: pointer;
transition: color 150ms ease;
padding: 0;
}
.em-icon-btn:hover {
color: #525252;
}
.em-icon-btn svg {
width: 20px;
height: 20px;
stroke-width: 2;
}
/* Controls Row */
.em-controls {
display: flex;
gap: 8px;
margin-bottom: 12px;
}
.em-select-wrapper {
flex: 1;
position: relative;
}
.em-select {
width: 100%;
height: 44px;
padding: 0 40px 0 16px;
background: #f5f5f5;
color: #262626;
font-size: 15px;
border: none;
border-radius: 10px;
appearance: none;
cursor: pointer;
outline: none;
font-family: inherit;
font-weight: 400;
}
.em-select-wrapper::after {
content: '';
position: absolute;
right: 16px;
top: 50%;
transform: translateY(-50%);
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 6px solid #737373;
pointer-events: none;
}
.em-square-btn {
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
background: #f5f5f5;
border: none;
border-radius: 10px;
cursor: pointer;
transition: background 150ms ease;
padding: 0;
}
.em-square-btn:hover {
background: #e5e5e5;
}
.em-square-btn.active {
background: #2563eb;
}
.em-square-btn.active svg {
color: #ffffff;
}
.em-square-btn svg {
width: 18px;
height: 18px;
color: #525252;
stroke-width: 2;
}
/* Selector Display */
.em-selector-display {
display: flex;
align-items: center;
gap: 10px;
height: 44px;
padding: 0 12px 0 16px;
background: #f5f5f5;
border-radius: 10px;
margin-bottom: 16px;
}
.em-selector-display svg {
width: 18px;
height: 18px;
color: #a3a3a3;
flex-shrink: 0;
stroke-width: 2;
}
.em-selector-text {
flex: 1;
font-size: 14px;
color: #525252;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
user-select: text;
}
.em-selector-nav {
display: flex;
gap: 2px;
}
.em-nav-btn {
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
border: none;
background: transparent;
cursor: pointer;
transition: background 150ms ease;
border-radius: 6px;
padding: 0;
}
.em-nav-btn:hover {
background: #e5e5e5;
}
.em-nav-btn svg {
width: 16px;
height: 16px;
color: #525252;
stroke-width: 2;
}
/* Tabs */
.em-tabs {
display: inline-flex;
gap: 2px;
padding: 2px;
background: #f5f5f5;
border-radius: 8px;
margin-bottom: 16px;
}
.em-tab {
padding: 6px 16px;
font-size: 12px;
font-weight: 500;
color: #737373;
background: transparent;
border: none;
border-radius: 6px;
cursor: pointer;
transition: all 150ms ease;
}
.em-tab:hover {
color: #404040;
}
.em-tab.active {
color: #262626;
background: #ffffff;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
/* Content */
.em-content {
margin-bottom: 0;
}
#__em_tab_settings {
max-height: min(60vh, 480px);
overflow-y: auto;
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE and Edge */
}
#__em_tab_settings::-webkit-scrollbar {
display: none; /* Chrome, Safari, Opera */
}
.em-section-title {
font-size: 13px;
color: #737373;
margin-bottom: 16px;
font-weight: 400;
}
.em-attributes {
display: flex;
flex-direction: column;
gap: 12px;
}
.em-attribute {
display: flex;
flex-direction: column;
gap: 6px;
}
.em-attribute-label {
font-size: 12px;
color: #a3a3a3;
font-weight: 400;
}
.em-attribute-value {
display: flex;
align-items: center;
gap: 10px;
min-height: 44px;
padding: 0 12px 0 16px;
background: #f5f5f5;
border-radius: 10px;
}
.em-attribute-value.editable {
padding: 0 16px;
}
.em-attribute-value svg {
width: 18px;
height: 18px;
stroke-width: 2;
cursor: pointer;
transition: color 150ms ease;
flex-shrink: 0;
}
.em-attribute-value svg.copy-icon {
color: #a3a3a3;
}
.em-attribute-value svg.copy-icon:hover {
color: #525252;
}
.em-attribute-value svg.copy-icon.disabled {
color: #d4d4d4;
cursor: default;
}
.em-attribute-text {
flex: 1;
font-size: 14px;
color: #404040;
user-select: text;
}
.em-attribute-text.empty {
color: #a3a3a3;
}
.em-input {
flex: 1;
border: none;
background: transparent;
font-size: 14px;
color: #404040;
font-family: inherit;
outline: none;
padding: 0;
height: 44px;
}
.em-input::placeholder {
color: #a3a3a3;
}
/* Settings Panel */
.em-settings {
display: flex;
flex-direction: column;
gap: 16px;
}
.em-settings-group {
display: flex;
flex-direction: column;
gap: 8px;
}
.em-settings-label {
font-size: 12px;
font-weight: 500;
color: #737373;
}
.em-checkbox-group {
display: flex;
flex-direction: column;
gap: 10px;
}
.em-checkbox-label {
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
color: #404040;
cursor: pointer;
}
.em-checkbox-label input[type="checkbox"] {
width: 18px;
height: 18px;
cursor: pointer;
margin: 0;
}
/* Action Buttons */
.em-actions {
display: flex;
gap: 8px;
margin-top: 20px;
}
.em-btn {
flex: 1;
height: 40px;
border: none;
border-radius: 8px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: all 150ms ease;
}
.em-btn-primary {
background: #2563eb;
color: #ffffff;
}
.em-btn-primary:hover {
background: #1d4ed8;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}
.em-btn-success {
background: #10b981;
color: #ffffff;
}
.em-btn-success:hover {
background: #059669;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}
.em-btn-ghost {
background: #f5f5f5;
color: #404040;
}
.em-btn-ghost:hover {
background: #e5e5e5;
}
/* Footer */
.em-footer {
font-size: 12px;
color: #a3a3a3;
text-align: center;
margin-top: 16px;
}
.em-footer kbd {
display: inline-block;
padding: 2px 6px;
background: #f5f5f5;
border-radius: 4px;
font-family: monospace;
font-size: 11px;
color: #737373;
}
/* Status */
.em-status {
font-size: 13px;
padding: 10px 12px;
border-radius: 8px;
margin-bottom: 12px;
display: flex;
align-items: center;
gap: 6px;
}
.em-status.idle {
display: none;
}
.em-status.running {
background: rgba(37, 99, 235, 0.1);
color: #2563eb;
}
.em-status.success {
background: rgba(16, 185, 129, 0.1);
color: #10b981;
}
.em-status.failure {
background: rgba(239, 68, 68, 0.1);
color: #ef4444;
}
/* Grid Layout */
.em-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
.em-field {
display: flex;
flex-direction: column;
gap: 6px;
}
.em-field-label {
font-size: 12px;
color: #a3a3a3;
}
.em-field-input {
height: 40px;
padding: 0 12px;
background: #f5f5f5;
border: none;
border-radius: 8px;
font-size: 14px;
color: #404040;
font-family: inherit;
outline: none;
}
.em-field-input:focus {
background: #e5e5e5;
}
/* Details/Accordion */
.em-details {
margin-top: 12px;
padding-top: 12px;
border-top: 1px solid #f5f5f5;
}
.em-details summary {
cursor: pointer;
font-size: 13px;
font-weight: 600;
color: #737373;
padding: 8px 0;
user-select: none;
list-style: none;
}
.em-details summary::-webkit-details-marker {
display: none;
}
.em-details summary:hover {
color: #404040;
}
.em-details[open] summary {
margin-bottom: 12px;
}
/* Dragging state */
body[data-em-dragging] {
user-select: none !important;
cursor: grabbing !important;
}
body[data-em-dragging] * {
cursor: grabbing !important;
}
/* SVG Icons */
svg {
fill: none;
stroke: currentColor;
}
.em-drag-handle {
cursor: grab;
}
.em-drag-handle:active {
cursor: grabbing;
}
`;
const PANEL_TEMPLATE = `
<div class="em-panel" id="em_panel_root">
<!-- Header -->
<div class="em-header em-drag-handle" id="__em_drag_handle" title="Drag to move">
<h2 class="em-title">元素标注</h2>
<div class="em-header-actions">
<button class="em-icon-btn" id="__em_close" title="Close">
<svg viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/>
</svg>
</button>
</div>
</div>
<!-- Controls -->
<div class="em-controls">
<div class="em-select-wrapper">
<select class="em-select" id="__em_selector_type">
<option value="css">CSS Selector</option>
<option value="xpath">XPath</option>
</select>
</div>
<button class="em-square-btn" id="__em_toggle_list" title="列表模式 - 批量标注相似元素 (仅支持CSS)">
<svg viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16"/>
</svg>
</button>
<button class="em-square-btn" id="__em_toggle_tab" title="Toggle Execute tab">
<svg viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/>
<path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
</svg>
</button>
</div>
<!-- Selector Display -->
<div class="em-selector-display">
<svg viewBox="0 0 24 24" id="__em_copy_selector" title="Copy selector">
<path stroke-linecap="round" stroke-linejoin="round" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"/>
</svg>
<span class="em-selector-text" id="__em_selector_text">Click an element to select</span>
<div class="em-selector-nav">
<button class="em-nav-btn" id="__em_nav_up" title="Select parent">
<svg viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" d="M5 15l7-7 7 7"/>
</svg>
</button>
<button class="em-nav-btn" id="__em_nav_down" title="Select child">
<svg viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"/>
</svg>
</button>
</div>
</div>
<!-- Tabs -->
<div class="em-tabs">
<button class="em-tab active" data-tab="attributes">Attributes</button>
<button class="em-tab" data-tab="execute">Execute</button>
</div>
<!-- Status -->
<div class="em-status idle" id="__em_status"></div>
<!-- Content: Attributes Tab -->
<div class="em-content" id="__em_tab_attributes">
<h3 class="em-section-title">#1 Element</h3>
<div class="em-attributes">
<div class="em-attribute">
<div class="em-attribute-label">name</div>
<div class="em-attribute-value editable">
<input class="em-input" id="__em_name" placeholder="Element name" />
</div>
</div>
<div class="em-attribute">
<div class="em-attribute-label">selector</div>
<div class="em-attribute-value">
<svg class="copy-icon" viewBox="0 0 24 24" id="__em_copy" title="Copy">
<path stroke-linecap="round" stroke-linejoin="round" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"/>
</svg>
<span class="em-attribute-text" id="__em_selector">-</span>
</div>
</div>
</div>
<h3 class="em-section-title">Selector Preferences</h3>
<div class="em-settings">
<div class="em-checkbox-group">
<label class="em-checkbox-label">
<input type="checkbox" id="__em_pref_id" checked />
<span>Prefer ID</span>
</label>
<label class="em-checkbox-label">
<input type="checkbox" id="__em_pref_attr" checked />
<span>Prefer stable attributes</span>
</label>
<label class="em-checkbox-label">
<input type="checkbox" id="__em_pref_class" checked />
<span>Prefer class names</span>
</label>
</div>
</div>
<div class="em-actions">
<button class="em-btn em-btn-primary" id="__em_verify">Verify (Highlight Only)</button>
</div>
<div class="em-actions">
<button class="em-btn em-btn-success" id="__em_save">Save</button>
<button class="em-btn em-btn-ghost" id="__em_cancel">Cancel</button>
</div>
</div>
<!-- Content: Execute Tab -->
<div class="em-content" id="__em_tab_execute" style="display: none;">
<div class="em-settings">
<div class="em-settings-group">
<div class="em-settings-label">Action</div>
<div class="em-select-wrapper">
<select class="em-select" id="__em_action">
<option value="hover">Hover</option>
<option value="left_click">Left click</option>
<option value="double_click">Double click</option>
<option value="right_click">Right click</option>
<option value="scroll">Scroll</option>
<option value="type_text">Type text</option>
<option value="press_keys">Press keys</option>
</select>
</div>
</div>
<!-- Action-specific inputs (dynamically shown/hidden) -->
<div class="em-settings-group" id="__em_action_text_group" style="display: none;">
<div class="em-settings-label">Text</div>
<input class="em-field-input" id="__em_action_text" placeholder="Text to type" />
</div>
<div class="em-settings-group" id="__em_action_keys_group" style="display: none;">
<div class="em-settings-label">Keys</div>
<input class="em-field-input" id="__em_action_keys" placeholder="Keys to press (e.g., Enter, Ctrl+C)" />
</div>
<div class="em-settings-group" id="__em_scroll_options" style="display: none;">
<div class="em-settings-label">Scroll Direction</div>
<div class="em-select-wrapper">
<select class="em-select" id="__em_scroll_direction">
<option value="down">Down</option>
<option value="up">Up</option>
<option value="left">Left</option>
<option value="right">Right</option>
</select>
</div>
<div class="em-field" style="margin-top: 8px;">
<div class="em-field-label">Amount (1-10, ~100px each)</div>
<input class="em-field-input" id="__em_scroll_distance" type="number" min="1" max="10" step="1" value="3" />
</div>
</div>
<!-- Click-specific options -->
<div id="__em_click_options" style="display: none;">
<div class="em-grid">
<div class="em-field">
<div class="em-field-label">Button</div>
<select class="em-select" id="__em_btn">
<option value="left">Left</option>
<option value="middle">Middle</option>
<option value="right">Right</option>
</select>
</div>
<div class="em-field">
<div class="em-field-label">Timeout (ms)</div>
<input class="em-field-input" id="__em_nav_timeout" type="number" value="3000" />
</div>
</div>
<div class="em-checkbox-group" style="margin-top: 12px;">
<label class="em-checkbox-label">
<input type="checkbox" id="__em_wait_nav" />
<span>Wait for navigation</span>
</label>
<label class="em-checkbox-label">
<input type="checkbox" id="__em_mod_alt" />
<span>Alt key</span>
</label>
<label class="em-checkbox-label">
<input type="checkbox" id="__em_mod_ctrl" />
<span>Ctrl key</span>
</label>
<label class="em-checkbox-label">
<input type="checkbox" id="__em_mod_meta" />
<span>Meta key</span>
</label>
<label class="em-checkbox-label">
<input type="checkbox" id="__em_mod_shift" />
<span>Shift key</span>
</label>
</div>
</div>
<div class="em-actions" style="margin-top: 16px;">
<button class="em-btn em-btn-primary" id="__em_execute">Execute</button>
</div>
<!-- Execution History -->
<div id="__em_execution_history" style="margin-top: 16px; display: none;">
<div class="em-settings-label">Recent Executions</div>
<div id="__em_history_list" style="font-size: 12px; color: #737373; margin-top: 8px;"></div>
</div>
</div>
</div>
<!-- Footer -->
<div class="em-footer">
Click or press <kbd>Space</kbd> to select an element
</div>
</div>
`;
function mount() {
if (hostElement) return { host: hostElement, shadow: shadowRoot };
hostElement = document.createElement('div');
hostElement.id = '__element_marker_overlay';
Object.assign(hostElement.style, {
position: 'fixed',
top: '24px',
right: '24px',
zIndex: String(CONFIG.Z_INDEX.OVERLAY),
pointerEvents: 'none',
});
shadowRoot = hostElement.attachShadow({ mode: 'open' });
shadowRoot.innerHTML = `<style>${PANEL_STYLES}</style>${PANEL_TEMPLATE}`;
hostElement.querySelector = (...args) => shadowRoot.querySelector(...args);
hostElement.querySelectorAll = (...args) => shadowRoot.querySelectorAll(...args);
const panel = shadowRoot.querySelector('.em-panel');
if (panel) {
panel.style.pointerEvents = 'auto';
}
document.documentElement.appendChild(hostElement);
return { host: hostElement, shadow: shadowRoot };
}
function unmount() {
if (hostElement?.parentNode) {
hostElement.parentNode.removeChild(hostElement);
}
hostElement = null;
shadowRoot = null;
}
function getHost() {
return hostElement;
}
function getShadow() {
return shadowRoot;
}
return {
mount,
unmount,
getHost,
getShadow,
};
})();
// ============================================================================
// State Store Module - Centralized State Management
// ============================================================================
const StateStore = (() => {
const state = {
selectorType: CONFIG.DEFAULTS.SELECTOR_TYPE,
listMode: CONFIG.DEFAULTS.LIST_MODE,
prefs: { ...CONFIG.DEFAULTS.PREFS },
activeTab: 'attributes',
validation: {
status: 'idle',
message: '',
},
validationHistory: [], // Last 5 validation results
};
const listeners = new Set();
function init() {
return state;
}
function get(key) {
return key ? state[key] : state;
}
function set(partial) {
const changed = {};
Object.keys(partial).forEach((key) => {
if (JSON.stringify(state[key]) !== JSON.stringify(partial[key])) {
changed[key] = true;
state[key] = partial[key];
}
});
if (Object.keys(changed).length === 0) return;
if (changed.validation) {
updateValidationUI();
}
if (changed.activeTab) {
updateTabUI();
}
if (changed.listMode) {
updateListModeUI();
}
if (changed.validationHistory) {
updateValidationHistoryUI();
}
notifyListeners();
}
function subscribe(callback) {
listeners.add(callback);
return () => listeners.delete(callback);
}
function notifyListeners() {
listeners.forEach((cb) => {
try {
cb(state);
} catch (err) {
console.error('[StateStore] Listener error:', err);
}
});
}
function updateValidationUI() {
const statusEl = PanelHost.getShadow()?.getElementById('__em_status');
if (!statusEl) return;
const { status, message } = state.validation;
statusEl.className = `em-status ${status}`;
statusEl.textContent = message;
}
function updateListModeUI() {
const shadow = PanelHost.getShadow();
if (!shadow) return;
const btn = shadow.getElementById('__em_toggle_list');
if (!btn) return;
if (state.listMode) {
btn.classList.add('active');
} else {
btn.classList.remove('active');
}
}
function updateTabUI() {
const shadow = PanelHost.getShadow();
if (!shadow) return;
const tabs = shadow.querySelectorAll('.em-tab');
tabs.forEach((tab) => {
if (tab.dataset.tab === state.activeTab) {
tab.classList.add('active');
} else {
tab.classList.remove('active');
}
});
const attrContent = shadow.getElementById('__em_tab_attributes');
const executeContent = shadow.getElementById('__em_tab_execute');
if (attrContent)
attrContent.style.display = state.activeTab === 'attributes' ? 'block' : 'none';
if (executeContent)
executeContent.style.display = state.activeTab === 'execute' ? 'block' : 'none';
// Sync interaction mode when tab changes
syncInteractionMode();
}
function updateValidationHistoryUI() {
const shadow = PanelHost.getShadow();
if (!shadow) return;
const historyContainer = shadow.getElementById('__em_execution_history');
const historyList = shadow.getElementById('__em_history_list');
if (!historyContainer || !historyList) return;
if (state.validationHistory.length === 0) {
historyContainer.style.display = 'none';
return;
}
historyContainer.style.display = 'block';
historyList.innerHTML = state.validationHistory
.slice(-5)
.reverse()
.map((entry) => {
const icon = entry.success ? '✓' : '✗';
const color = entry.success ? '#10b981' : '#ef4444';
const timestamp = new Date(entry.timestamp).toLocaleTimeString();
return `<div style="padding: 6px 0; border-bottom: 1px solid #f5f5f5;">
<span style="color: ${color}; font-weight: 600;">${icon}</span>
<span style="margin-left: 6px;">${entry.action}</span>
<span style="float: right; color: #a3a3a3; font-size: 11px;">${timestamp}</span>
</div>`;
})
.join('');
}
return {
init,
get,
set,
subscribe,
};
})();
// ============================================================================
// Drag Controller Module
// ============================================================================
const DragController = (() => {
let dragging = false;
let startPos = { x: 0, y: 0 };
let startOffset = { top: 0, right: 0 };
function init(handleElement) {
if (!handleElement) return;
handleElement.addEventListener('mousedown', onDragStart);
}
function onDragStart(event) {
event.preventDefault();
dragging = true;
const host = PanelHost.getHost();
if (!host) return;
startPos = { x: event.clientX, y: event.clientY };
startOffset = {
top: parseInt(host.style.top) || 0,
right: parseInt(host.style.right) || 0,
};
document.addEventListener('mousemove', onDragMove, { capture: true, passive: false });
document.addEventListener('mouseup', onDragEnd, { capture: true, passive: false });
document.body.setAttribute('data-em-dragging', 'true');
}
function onDragMove(event) {
if (!dragging) return;
event.preventDefault();
event.stopPropagation();
const host = PanelHost.getHost();
if (!host) return;
const deltaX = event.clientX - startPos.x;
const deltaY = event.clientY - startPos.y;
const newTop = Math.max(8, startOffset.top + deltaY);
const newRight = Math.max(8, startOffset.right - deltaX);
host.style.top = `${newTop}px`;
host.style.right = `${newRight}px`;
}
function onDragEnd(event) {
if (!dragging) return;
event.preventDefault();
event.stopPropagation();
dragging = false;
document.removeEventListener('mousemove', onDragMove, { capture: true });
document.removeEventListener('mouseup', onDragEnd, { capture: true });
document.body.removeAttribute('data-em-dragging');
}
function destroy() {
if (dragging) {
onDragEnd(new MouseEvent('mouseup'));
}
}
return { init, destroy };
})();
// [继续下一部分...]
// ============================================================================
// Selector Engine - Heuristic Selector Generation
// ============================================================================
function generateSelector(el) {
if (!(el instanceof Element)) return '';
const prefs = StateStore.get('prefs');
if (prefs.preferId && el.id) {
const idSel = `#${CSS.escape(el.id)}`;
if (isDeepSelectorUnique(idSel, el)) return idSel;
}
if (prefs.preferStableAttr) {
const attrNames = [
'data-testid',
'data-testId',
'data-test',
'data-qa',
'data-cy',
'name',
'title',
'alt',
'aria-label',
];
const tag = el.tagName.toLowerCase();
for (const attr of attrNames) {
const v = el.getAttribute(attr);
if (!v) continue;
const attrSel = `[${attr}="${CSS.escape(v)}"]`;
const testSel = /^(input|textarea|select)$/i.test(tag) ? `${tag}${attrSel}` : attrSel;
if (isDeepSelectorUnique(testSel, el)) return testSel;
}
}
if (prefs.preferClass) {
try {
const classes = Array.from(el.classList || []).filter(
(c) => c && /^[a-zA-Z0-9_-]+$/.test(c),
);
const tag = el.tagName.toLowerCase();
for (const cls of classes) {
const sel = `.${CSS.escape(cls)}`;
if (isDeepSelectorUnique(sel, el)) return sel;
}
for (const cls of classes) {
const sel = `${tag}.${CSS.escape(cls)}`;
if (isDeepSelectorUnique(sel, el)) return sel;
}
for (let i = 0; i < Math.min(classes.length, 3); i++) {
for (let j = i + 1; j < Math.min(classes.length, 3); j++) {
const sel = `.${CSS.escape(classes[i])}.${CSS.escape(classes[j])}`;
if (isDeepSelectorUnique(sel, el)) return sel;
}
}
} catch {}
}
if (prefs.preferStableAttr) {
try {
let cur = el;
const anchorAttrs = [
'id',
'data-testid',
'data-testId',
'data-test',
'data-qa',
'data-cy',
'name',
];
// Detect shadow DOM boundary
const root = el.getRootNode();
const isShadowElement = root instanceof ShadowRoot;
const boundary = isShadowElement ? root.host : document.body;
while (cur && cur !== boundary) {
if (cur.id) {
const anchor = `#${CSS.escape(cur.id)}`;
if (isDeepSelectorUnique(anchor, cur)) {
const rel = buildPathFromAncestor(cur, el);
const composed = rel ? `${anchor} ${rel}` : anchor;
if (isDeepSelectorUnique(composed, el)) return composed;
}
}
for (const attr of anchorAttrs) {
const val = cur.getAttribute(attr);
if (!val) continue;
const aSel = `[${attr}="${CSS.escape(val)}"]`;
if (isDeepSelectorUnique(aSel, cur)) {
const rel = buildPathFromAncestor(cur, el);
const composed = rel ? `${aSel} ${rel}` : aSel;
if (isDeepSelectorUnique(composed, el)) return composed;
}
}
cur = cur.parentElement;
}
} catch {}
}
return buildFullPath(el);
}
function buildPathFromAncestor(ancestor, target) {
const segs = [];
let cur = target;
// Detect if we're inside shadow DOM
const root = target.getRootNode();
const isShadowElement = root instanceof ShadowRoot;
const boundary = isShadowElement ? root.host : document.body;
while (cur && cur !== ancestor && cur !== boundary) {
let seg = cur.tagName.toLowerCase();
const parent = cur.parentElement;
if (parent) {
const siblings = Array.from(parent.children).filter((c) => c.tagName === cur.tagName);
if (siblings.length > 1) {
seg += `:nth-of-type(${siblings.indexOf(cur) + 1})`;
}
}
segs.unshift(seg);
cur = parent;
// Stop if we've reached the shadow root host
if (isShadowElement && cur === boundary) {
break;
}
}
return segs.join(' > ');
}
function buildFullPath(el) {
let path = '';
let current = el;
// Detect if the element is inside a shadow DOM
const root = el.getRootNode();
const isShadowElement = root instanceof ShadowRoot;
// Determine the boundary where we should stop traversing
const boundary = isShadowElement ? root.host : document.body;
while (current && current.nodeType === Node.ELEMENT_NODE && current !== boundary) {
let sel = current.tagName.toLowerCase();
const parent = current.parentElement;
if (parent) {
const siblings = Array.from(parent.children).filter((c) => c.tagName === current.tagName);
if (siblings.length > 1) {
sel += `:nth-of-type(${siblings.indexOf(current) + 1})`;
}
}
path = path ? `${sel} > ${path}` : sel;
current = parent;
// Stop if we've reached the shadow root host
if (isShadowElement && current === boundary) {
break;
}
}
// For shadow DOM elements, don't prepend "body >"
// The selector should be relative within the shadow tree
if (isShadowElement) {
return path || el.tagName.toLowerCase();
}
// For light DOM elements, keep the original behavior
return path ? `body > ${path}` : 'body';
}
function generateXPath(el) {
if (!(el instanceof Element)) return '';
if (el.id) return `//*[@id="${el.id}"]`;
const segs = [];
let cur = el;
while (cur && cur.nodeType === 1 && cur !== document.documentElement) {
const tag = cur.tagName.toLowerCase();
if (cur.id) {
segs.unshift(`//*[@id="${cur.id}"]`);
break;
}
let i = 1;
let sib = cur;
while ((sib = sib.previousElementSibling)) {
if (sib.tagName.toLowerCase() === tag) i++;
}
segs.unshift(`${tag}[${i}]`);
cur = cur.parentElement;
}
return segs[0]?.startsWith('//*') ? segs.join('/') : '//' + segs.join('/');
}
function generateListSelector(target) {
const list = computeElementList(target);
const selected = list?.[0] || target;
const parent = selected.parentElement;
if (!parent) return generateSelector(target);
const parentSel = generateSelector(parent);
const childRel = generateSelectorWithinRoot(selected, parent);
return parentSel && childRel ? `${parentSel} ${childRel}` : generateSelector(target);
}
function generateSelectorWithinRoot(el, root) {
if (!(el instanceof Element)) return '';
const tag = el.tagName.toLowerCase();
// Use isDeepSelectorUnique for ID to support shadow DOM elements
if (el.id) {
const idSel = `#${CSS.escape(el.id)}`;
if (isDeepSelectorUnique(idSel, el)) return idSel;
}
const attrNames = [
'data-testid',
'data-testId',
'data-test',
'data-qa',
'data-cy',
'name',
'title',
'alt',
'aria-label',
];
// Use isDeepSelectorUnique for attributes to support shadow DOM elements
for (const attr of attrNames) {
const v = el.getAttribute(attr);
if (!v) continue;
const aSel = `[${attr}="${CSS.escape(v)}"]`;
const testSel = /^(input|textarea|select)$/i.test(tag) ? `${tag}${aSel}` : aSel;
if (isDeepSelectorUnique(testSel, el)) return testSel;
}
try {
const classes = Array.from(el.classList || []).filter((c) => c && /^[a-zA-Z0-9_-]+$/.test(c));
// Use isDeepSelectorUnique for classes to support shadow DOM elements
for (const cls of classes) {
const sel = `.${CSS.escape(cls)}`;
if (isDeepSelectorUnique(sel, el)) return sel;
}
for (const cls of classes) {
const sel = `${tag}.${CSS.escape(cls)}`;
if (isDeepSelectorUnique(sel, el)) return sel;
}
} catch {}
return buildPathFromAncestor(root, el);
}
function getAccessibleName(el) {
try {
const labelledby = el.getAttribute('aria-labelledby');
if (labelledby) {
const labelEl = document.getElementById(labelledby);
if (labelEl) return (labelEl.textContent || '').trim();
}
const ariaLabel = el.getAttribute('aria-label');
if (ariaLabel) return ariaLabel.trim();
if (el.id) {
const label = document.querySelector(`label[for="${el.id}"]`);
if (label) return (label.textContent || '').trim();
}
const parentLabel = el.closest('label');
if (parentLabel) return (parentLabel.textContent || '').trim();
return (
el.getAttribute('placeholder') ||
el.getAttribute('value') ||
el.textContent ||
''
).trim();
} catch {
return '';
}
}
// ============================================================================
// List Mode Utilities
// ============================================================================
function getAllSiblings(el, selector) {
const siblings = [el];
const validate = (element) => {
const isSameTag = el.tagName === element.tagName;
let ok = isSameTag;
if (selector) {
try {
ok = ok && !!element.querySelector(selector);
} catch {}
}
return ok;
};
let next = el;
let prev = el;
let elementIndex = 1;
while ((prev = prev?.previousElementSibling)) {
if (validate(prev)) {
elementIndex += 1;
siblings.unshift(prev);
}
}
while ((next = next?.nextElementSibling)) {
if (validate(next)) siblings.push(next);
}
return { elements: siblings, index: elementIndex };
}
function getElementList(el, maxDepth = 50, paths = []) {
if (maxDepth === 0 || !el || el.tagName === 'BODY') return null;
let selector = el.tagName.toLowerCase();
const { elements, index } = getAllSiblings(el, paths.join(' > '));
let siblings = elements;
if (index !== 1) selector += `:nth-of-type(${index})`;
paths.unshift(selector);
if (siblings.length === 1) {
siblings = getElementList(el.parentElement, maxDepth - 1, paths);
}
return siblings;
}
function computeElementList(target) {
try {
return getElementList(target) || [target];
} catch {
return [target];
}
}
// ============================================================================
// Deep Query (Shadow DOM Support)
// ============================================================================
function* walkAllNodesDeep(root) {
const stack = [root];
let count = 0;
const MAX = 10000;
while (stack.length) {
const node = stack.pop();
if (!node || ++count > MAX) continue;
// Skip overlay elements to prevent panel self-highlighting
if (isOverlayElement(node)) {
continue;
}
yield node;
try {
if (node.children) {
const children = Array.from(node.children);
for (let i = children.length - 1; i >= 0; i--) {
stack.push(children[i]);
}
}
if (node.shadowRoot?.children) {
const srChildren = Array.from(node.shadowRoot.children);
for (let i = srChildren.length - 1; i >= 0; i--) {
stack.push(srChildren[i]);
}
}
} catch {}
}
}
function queryAllDeep(selector) {
const results = [];
for (const node of walkAllNodesDeep(document)) {
if (!(node instanceof Element)) continue;
try {
if (node.matches(selector)) results.push(node);
} catch {}
}
return results;
}
/**
* Check if a selector uniquely identifies the target element across the entire DOM tree,
* including shadow DOM boundaries.
*
* This function uses queryAllDeep to traverse both light DOM and shadow DOM,
* ensuring that selectors work correctly for elements inside shadow roots.
*
* @param {string} selector - The CSS selector to test
* @param {Element} target - The target element that should be uniquely identified
* @returns {boolean} True if the selector matches exactly one element and it's the target
*/
function isDeepSelectorUnique(selector, target) {
if (!selector || !(target instanceof Element)) return false;
try {
const matches = queryAllDeep(selector);
return matches.length === 1 && matches[0] === target;
} catch (error) {
return false;
}
}
function evaluateXPathAll(xpath) {
try {
const arr = [];
const res = document.evaluate(
xpath,
document,
null,
XPathResult.ORDERED_NODE_SNAPSHOT_TYPE,
null,
);
for (let i = 0; i < res.snapshotLength; i++) {
const n = res.snapshotItem(i);
// Filter out overlay elements to prevent panel self-highlighting
if (n?.nodeType === 1 && !isOverlayElement(n)) {
arr.push(n);
}
}
return arr;
} catch {
return [];
}
}
// ============================================================================
// Highlighter & Rects Management
// ============================================================================
const STATE = {
active: false,
hoverEl: null,
selectedEl: null,
box: null,
highlighter: null,
listenersAttached: false,
rectsHost: null,
hoveredList: [],
verifyRectsActive: false, // Track if verify rects are showing
// Performance optimization: rAF throttling for hover
hoverRafId: null,
lastHoverTarget: null,
// DOM pooling for rect elements
rectPool: [],
rectPoolUsed: 0,
};
function ensureHighlighter() {
if (STATE.highlighter) return STATE.highlighter;
const hl = document.createElement('div');
hl.id = '__element_marker_highlight';
Object.assign(hl.style, {
position: 'fixed',
zIndex: String(CONFIG.Z_INDEX.HIGHLIGHTER),
pointerEvents: 'none',
border: `2px solid ${CONFIG.COLORS.HOVER}`,
borderRadius: '4px',
boxShadow: `0 0 0 2px ${CONFIG.COLORS.HOVER}33`,
transition: 'all 100ms ease-out',
});
document.documentElement.appendChild(hl);
STATE.highlighter = hl;
return hl;
}
function ensureRectsHost() {
if (STATE.rectsHost) return STATE.rectsHost;
const host = document.createElement('div');
host.id = '__element_marker_rects';
Object.assign(host.style, {
position: 'fixed',
zIndex: String(CONFIG.Z_INDEX.RECTS),
pointerEvents: 'none',
inset: '0',
});
document.documentElement.appendChild(host);
STATE.rectsHost = host;
return host;
}
function moveHighlighterTo(el) {
const hl = ensureHighlighter();
const r = el.getBoundingClientRect();
hl.style.left = `${r.left}px`;
hl.style.top = `${r.top}px`;
hl.style.width = `${r.width}px`;
hl.style.height = `${r.height}px`;
hl.style.display = 'block';
}
function clearHighlighter() {
if (STATE.highlighter) STATE.highlighter.style.display = 'none';
// Only clear hover rects, not verify rects
if (!STATE.verifyRectsActive) {
clearRects();
}
}
function clearRects() {
// Hide all pooled rect boxes instead of destroying them
const used = STATE.rectPoolUsed || 0;
for (let i = 0; i < used; i++) {
const box = STATE.rectPool[i];
if (box) box.style.display = 'none';
}
STATE.rectPoolUsed = 0;
STATE.verifyRectsActive = false;
// Invalidate lastHoverTarget so next hover will redraw even on same element
STATE.lastHoverTarget = null;
}
/**
* Get or create a rect box from the pool
* @param {HTMLElement} host - The container element
* @param {number} index - The pool index
* @returns {HTMLDivElement} The rect box element
*/
function getOrCreateRectBox(host, index) {
let box = STATE.rectPool[index];
if (!box) {
box = document.createElement('div');
Object.assign(box.style, {
position: 'fixed',
pointerEvents: 'none',
borderRadius: '4px',
transition: 'all 100ms ease-out',
display: 'none',
});
STATE.rectPool[index] = box;
}
// Ensure the box is attached to the host
if (!box.isConnected) {
host.appendChild(box);
}
return box;
}
// Maximum rect pool size to prevent memory bloat
const MAX_RECT_POOL_SIZE = 100;
/**
* Draw rect boxes with pooling optimization
* @param {Array<{x: number, y: number, width: number, height: number}>} rects - Rect data
* @param {Object} options - Drawing options
* @param {boolean} options.isVerify - Whether this is a verify highlight (affects verifyRectsActive)
*/
function drawRectBoxes(
rects,
{ color = CONFIG.COLORS.HOVER, dashed = true, offsetX = 0, offsetY = 0, isVerify = false } = {},
) {
const host = ensureRectsHost();
const prevUsed = STATE.rectPoolUsed || 0;
// Limit rect count to prevent memory bloat
const count = Math.min(Array.isArray(rects) ? rects.length : 0, MAX_RECT_POOL_SIZE);
// Update or show rect boxes
for (let i = 0; i < count; i++) {
const r = rects[i];
if (!r) continue;
const x = Number.isFinite(r.left) ? r.left : Number.isFinite(r.x) ? r.x : 0;
const y = Number.isFinite(r.top) ? r.top : Number.isFinite(r.y) ? r.y : 0;
const w = Number.isFinite(r.width) ? r.width : 0;
const h = Number.isFinite(r.height) ? r.height : 0;
const box = getOrCreateRectBox(host, i);
Object.assign(box.style, {
left: `${offsetX + x}px`,
top: `${offsetY + y}px`,
width: `${w}px`,
height: `${h}px`,
border: `2px ${dashed ? 'dashed' : 'solid'} ${color}`,
boxShadow: `0 0 0 2px ${color}22`,
display: 'block',
});
}
// Hide excess boxes from previous render
for (let i = count; i < prevUsed; i++) {
const box = STATE.rectPool[i];
if (box) box.style.display = 'none';
}
STATE.rectPoolUsed = count;
// Reset verifyRectsActive for hover operations (so clearHighlighter works correctly)
// Only set to true when isVerify is explicitly true
STATE.verifyRectsActive = isVerify;
}
function drawRects(elements, color = CONFIG.COLORS.HOVER, dashed = true, isVerify = false) {
const rects = elements.map((el) => {
const r = el.getBoundingClientRect();
return { x: r.left, y: r.top, width: r.width, height: r.height };
});
drawRectBoxes(rects, { color, dashed, isVerify });
}
// ============================================================================
// Interaction Logic
// ============================================================================
function isInsidePanel(target) {
const shadow = PanelHost.getShadow();
return !!shadow && target instanceof Node && shadow.contains(target);
}
/**
* Check if a node belongs to the element marker overlay (panel host or its shadow DOM)
* This is used to filter out overlay elements from query results to prevent self-highlighting
*
* @param {Node} node - The node to check
* @returns {boolean} True if the node is part of the overlay
*/
function isOverlayElement(node) {
if (!(node instanceof Node)) return false;
const host = PanelHost.getHost();
if (!host) return false;
// Check if node is the panel host itself
if (node === host) return true;
// Check if node is within the shadow DOM of the panel host
const root = typeof node.getRootNode === 'function' ? node.getRootNode() : null;
return root instanceof ShadowRoot && root.host === host;
}
/**
* Filter out overlay elements from an array of elements
* This ensures that panel components are never included in highlight/verification results
*
* @param {Array} elements - Array of elements to filter
* @returns {Array} Filtered array without overlay elements
*/
function filterOverlayElements(elements) {
if (!Array.isArray(elements)) return [];
return elements.filter((node) => !isOverlayElement(node));
}
/**
* Get the effective event target for page element selection, considering shadow DOM boundaries.
*
* This function resolves the real target element from a pointer event by walking the
* composed path (if available) to find the innermost page element, skipping overlay elements.
*
* Background:
* - When events bubble up from inside shadow DOM, they get "retargeted" at shadow boundaries
* - By the time a window-level listener receives the event, ev.target points to the shadow host
* - composedPath() exposes the original event path before retargeting
* - This allows us to select elements inside shadow DOM (e.g., <td-header> internals)
*
* IMPORTANT: This function should only be called AFTER verifying the event is not from
* overlay UI (panel buttons, etc). Otherwise it will filter out overlay elements and break
* panel interactions.
*
* @param {Event} ev - The pointer event (mousemove, click, etc.)
* @returns {Element|null} The innermost non-overlay page element, or null if none found
*/
function getDeepPageTarget(ev) {
if (!ev) return null;
// Try to walk the composed path to find the innermost non-overlay element
try {
const path = typeof ev.composedPath === 'function' ? ev.composedPath() : null;
if (Array.isArray(path) && path.length > 0) {
// Walk from innermost to outermost, find the first real page element
for (const node of path) {
if (node instanceof Element && !isOverlayElement(node)) {
return node;
}
}
}
} catch (error) {
// composedPath() may throw in some edge cases (e.g., detached nodes)
// Fall through to use ev.target
}
// Fallback: use ev.target if composedPath is unavailable or all nodes were filtered
const fallback = ev.target instanceof Element ? ev.target : null;
// If fallback is overlay, return null (caller should handle this case)
if (fallback && !isOverlayElement(fallback)) {
return fallback;
}
return null;
}
// Store pending hover event for rAF processing
let pendingHoverEvent = null;
/**
* Process mouse move event - the actual hover update logic
* Separated from onMouseMove for rAF throttling
*/
function processMouseMove(ev) {
if (!STATE.active) return;
const rawTarget = ev?.target;
if (!(rawTarget instanceof Element)) {
STATE.hoverEl = null;
STATE.lastHoverTarget = null;
clearHighlighter();
return;
}
const host = PanelHost.getHost();
if ((host && rawTarget === host) || isInsidePanel(rawTarget)) {
STATE.hoverEl = null;
STATE.lastHoverTarget = null;
clearHighlighter();
return;
}
const target = getDeepPageTarget(ev) || rawTarget;
STATE.hoverEl = target;
// Get current listMode
let listMode = false;
try {
listMode = !!StateStore.get('listMode');
} catch {}
// Skip update if target and mode haven't changed
const last = STATE.lastHoverTarget;
if (last && last.element === target && last.listMode === listMode) {
return;
}
STATE.lastHoverTarget = { element: target, listMode };
if (!IS_MAIN) {
try {
const list = listMode ? computeElementList(target) || [target] : [target];
const rects = list.map((el) => {
const r = el.getBoundingClientRect();
return { x: r.left, y: r.top, width: r.width, height: r.height };
});
// Performance: Don't generate selector on hover (defer to click)
window.top.postMessage({ type: 'em_hover', rects }, '*');
} catch {}
return;
}
if (listMode) {
STATE.hoveredList = computeElementList(target) || [target];
drawRects(STATE.hoveredList);
} else {
moveHighlighterTo(target);
}
}
/**
* Mouse move handler with rAF throttling
* Ensures hover updates are batched to animation frame rate
*/
function onMouseMove(ev) {
if (!STATE.active) return;
// Store the latest event
pendingHoverEvent = ev;
// Skip if already scheduled
if (STATE.hoverRafId != null) return;
// Schedule processing on next animation frame
STATE.hoverRafId = requestAnimationFrame(() => {
STATE.hoverRafId = null;
const latest = pendingHoverEvent;
pendingHoverEvent = null;
if (!latest) return;
processMouseMove(latest);
});
}
// ============================================================================
// Event Listeners Management
// ============================================================================
function attachPointerListeners() {
if (STATE.listenersAttached) return;
window.addEventListener('mousemove', onMouseMove, true);
window.addEventListener('click', onClick, true);
STATE.listenersAttached = true;
}
function detachPointerListeners() {
if (!STATE.listenersAttached) return;
window.removeEventListener('mousemove', onMouseMove, true);
window.removeEventListener('click', onClick, true);
STATE.listenersAttached = false;
}
function attachKeyboardListener() {
window.addEventListener('keydown', onKeyDown, true);
}
function detachKeyboardListener() {
window.removeEventListener('keydown', onKeyDown, true);
}
function syncInteractionMode() {
if (!STATE.active) return;
const activeTab = StateStore.get('activeTab');
if (activeTab === 'execute') {
// In execute mode, detach pointer listeners to allow real interactions
// but keep keyboard listener for Esc key
detachPointerListeners();
// Only clear the hover highlighter, not the verification rects
if (STATE.highlighter) STATE.highlighter.style.display = 'none';
} else {
// In attributes mode, attach all listeners for element selection
attachPointerListeners();
}
}
// ============================================================================
// Event Handlers
// ============================================================================
function onClick(ev) {
if (!STATE.active) return;
// First, use the raw ev.target to check for overlay UI
// This ensures panel buttons and other UI elements remain interactive
const rawTarget = ev.target;
const host = PanelHost.getHost();
// Check if raw target is the panel host itself or inside the shadow DOM
// IMPORTANT: Return early WITHOUT preventDefault to allow overlay button clicks
if ((host && rawTarget === host) || isInsidePanel(rawTarget)) {
return;
}
// Now we know it's a page element, prevent default and get deep target
ev.preventDefault();
ev.stopPropagation();
if (!(rawTarget instanceof Element)) return;
// Get the deep target (considering shadow DOM) after confirming it's not overlay
const target = getDeepPageTarget(ev) || rawTarget;
if (!IS_MAIN) {
try {
const selectorType = StateStore.get('selectorType');
const listMode = StateStore.get('listMode');
const sel =
selectorType === 'xpath'
? generateXPath(target)
: listMode
? generateListSelector(target)
: generateSelector(target);
window.top.postMessage({ type: 'em_click', innerSel: sel }, '*');
} catch {}
return;
}
setSelection(target);
}
function onKeyDown(e) {
if (!STATE.active) return;
// Check if the focused element is inside the panel - if so, don't handle selection keys
if (isInsidePanel(e.target)) {
// Key event is from panel, don't interfere
if (e.key !== 'Escape') return; // Still allow Escape to close
}
// In execute mode, only handle Escape to close - don't intercept other keys
// This allows real page interactions (typing, scrolling, etc.)
const activeTab = StateStore.get('activeTab');
if (activeTab === 'execute') {
if (e.key === 'Escape') {
e.preventDefault();
stop();
}
return; // Don't intercept Space/Arrow keys in execute mode
}
if (e.key === 'Escape') {
e.preventDefault();
stop();
} else if (e.key === ' ' || e.code === 'Space') {
e.preventDefault();
const t = STATE.hoverEl || STATE.selectedEl;
if (t) setSelection(t);
} else if (e.key === 'ArrowUp') {
e.preventDefault();
const base = STATE.selectedEl || STATE.hoverEl;
if (base?.parentElement) setSelection(base.parentElement);
} else if (e.key === 'ArrowDown') {
e.preventDefault();
const base = STATE.selectedEl || STATE.hoverEl;
if (base?.firstElementChild) setSelection(base.firstElementChild);
}
}
function setSelection(el) {
if (!(el instanceof Element)) return;
STATE.selectedEl = el;
const selectorType = StateStore.get('selectorType');
const listMode = StateStore.get('listMode');
const sel =
selectorType === 'xpath'
? generateXPath(el)
: listMode
? generateListSelector(el)
: generateSelector(el);
const name = getAccessibleName(el) || el.tagName.toLowerCase();
const selectorText = STATE.box?.querySelector('#__em_selector');
const inputName = STATE.box?.querySelector('#__em_name');
const selectorDisplay = STATE.box?.querySelector('#__em_selector_text');
if (selectorText) selectorText.textContent = sel;
if (selectorDisplay) selectorDisplay.textContent = sel;
if (inputName && !inputName.value) inputName.value = name;
moveHighlighterTo(el);
}
// ============================================================================
// Validation Logic
// ============================================================================
/**
* Verify selector by highlighting only (non-destructive)
*/
async function verifyHighlightOnly() {
try {
const selector = STATE.box?.querySelector('#__em_selector')?.textContent?.trim();
if (!selector) return;
StateStore.set({
validation: { status: 'running', message: 'Verifying selector...' },
});
const selectorType = StateStore.get('selectorType');
const listMode = StateStore.get('listMode');
const effectiveType = listMode ? 'css' : selectorType;
// Query for matches
const matches =
effectiveType === 'xpath' ? evaluateXPathAll(selector) : queryAllDeep(selector);
// Additional defense: filter out any overlay elements that might have slipped through
const filteredMatches = filterOverlayElements(matches);
if (!filteredMatches || filteredMatches.length === 0) {
StateStore.set({
validation: { status: 'failure', message: 'No elements found' },
});
return;
}
// Scroll first match into view
const primaryMatch = filteredMatches[0];
if (primaryMatch) {
primaryMatch.scrollIntoView({
block: 'center',
inline: 'center',
behavior: 'smooth',
});
}
await sleep(200);
// Highlight matches with isVerify=true to prevent clearing on hover
drawRects(filteredMatches, CONFIG.COLORS.VERIFY, false, true);
StateStore.set({
validation: {
status: 'success',
message: `Found ${filteredMatches.length} element${filteredMatches.length > 1 ? 's' : ''}`,
},
});
// Auto-clear highlight after 2 seconds
setTimeout(() => {
clearRects();
StateStore.set({
validation: { status: 'idle', message: '' },
});
}, 2000);
} catch (error) {
console.error('[verifyHighlightOnly] error:', error);
StateStore.set({
validation: { status: 'failure', message: error.message || 'Verification failed' },
});
}
}
/**
* Execute action on selector (destructive)
*/
async function verifySelectorNow() {
try {
const selector = STATE.box?.querySelector('#__em_selector')?.textContent?.trim();
if (!selector) return;
StateStore.set({
validation: { status: 'running', message: 'Executing action...' },
});
const selectorType = StateStore.get('selectorType');
const listMode = StateStore.get('listMode');
const effectiveType = listMode ? 'css' : selectorType;
const matches =
effectiveType === 'xpath' ? evaluateXPathAll(selector) : queryAllDeep(selector);
// Additional defense: filter out any overlay elements that might have slipped through
const filteredMatches = filterOverlayElements(matches);
if (!filteredMatches || filteredMatches.length === 0) {
StateStore.set({
validation: { status: 'failure', message: 'No elements found' },
});
return;
}
drawRects(filteredMatches, CONFIG.COLORS.VERIFY, false);
const action = STATE.box?.querySelector('#__em_action')?.value || 'hover';
const payload = {
type: 'element_marker_validate',
selector,
selectorType: effectiveType,
action,
listMode,
};
// Action-specific parameters with validation
if (action === 'type_text') {
const actionText = String(
STATE.box?.querySelector('#__em_action_text')?.value || '',
).trim();
if (!actionText) {
StateStore.set({
validation: { status: 'failure', message: 'Text is required for type_text' },
});
return;
}
payload.text = actionText;
}
if (action === 'press_keys') {
const actionKeys = String(
STATE.box?.querySelector('#__em_action_keys')?.value || '',
).trim();
if (!actionKeys) {
StateStore.set({
validation: { status: 'failure', message: 'Keys are required for press_keys' },
});
return;
}
payload.keys = actionKeys;
}
if (action === 'scroll') {
const direction = STATE.box?.querySelector('#__em_scroll_direction')?.value || 'down';
const rawAmount = Number(STATE.box?.querySelector('#__em_scroll_distance')?.value);
// Clamp to 1-10 range (backend expects ticks, not pixels)
const amount = Math.max(
1,
Math.min(Math.round(Number.isFinite(rawAmount) ? rawAmount : 3), 10),
);
payload.scrollDirection = direction;
payload.scrollAmount = amount;
}
if (['left_click', 'double_click', 'right_click'].includes(action)) {
payload.modifiers = {
altKey: !!STATE.box?.querySelector('#__em_mod_alt')?.checked,
ctrlKey: !!STATE.box?.querySelector('#__em_mod_ctrl')?.checked,
metaKey: !!STATE.box?.querySelector('#__em_mod_meta')?.checked,
shiftKey: !!STATE.box?.querySelector('#__em_mod_shift')?.checked,
};
payload.button = STATE.box?.querySelector('#__em_btn')?.value || 'left';
payload.waitForNavigation = !!STATE.box?.querySelector('#__em_wait_nav')?.checked;
payload.timeoutMs = Number(STATE.box?.querySelector('#__em_nav_timeout')?.value) || 3000;
}
const res = await chrome.runtime.sendMessage(payload);
const success = !!res?.tool?.ok;
const newEntry = {
action,
success,
timestamp: Date.now(),
matchCount: filteredMatches.length,
};
const history = [...(StateStore.get('validationHistory') || []), newEntry].slice(-5);
if (res?.tool?.ok) {
StateStore.set({
validation: {
status: 'success',
message: `✓ 验证成功 (匹配 ${filteredMatches.length} 个元素)`,
},
validationHistory: history,
});
} else {
StateStore.set({
validation: {
status: 'failure',
message: res?.tool?.error || '验证失败',
},
validationHistory: history,
});
}
} catch (err) {
const newEntry = {
action: STATE.box?.querySelector('#__em_action')?.value || 'hover',
success: false,
timestamp: Date.now(),
matchCount: 0,
};
const history = [...(StateStore.get('validationHistory') || []), newEntry].slice(-5);
StateStore.set({
validation: {
status: 'failure',
message: `错误: ${err.message}`,
},
validationHistory: history,
});
}
}
/**
* Highlight selector from external request (popup/background)
* Supports composite iframe selectors: "frameSelector |> innerSelector"
*/
async function highlightSelectorExternal({ selector, selectorType = 'css', listMode = false }) {
const normalized = String(selector || '').trim();
if (!normalized) {
return { success: false, error: 'selector is required' };
}
try {
// Handle composite iframe selector
if (normalized.includes('|>')) {
const parts = normalized
.split('|>')
.map((s) => s.trim())
.filter(Boolean);
if (parts.length >= 2) {
const frameSel = parts[0];
const innerSel = parts.slice(1).join(' |> ');
// Find frame element
let frameEl = null;
try {
frameEl = querySelectorDeepFirst(frameSel) || document.querySelector(frameSel);
} catch {}
if (
!frameEl ||
!(frameEl instanceof HTMLIFrameElement || frameEl instanceof HTMLFrameElement)
) {
return { success: false, error: `Frame element not found: ${frameSel}` };
}
const cw = frameEl.contentWindow;
if (!cw) {
return { success: false, error: 'Unable to access frame contentWindow' };
}
// Forward highlight request to iframe
return new Promise((resolve) => {
const reqId = `em_highlight_${Date.now()}_${Math.random().toString(36).slice(2, 8)}`;
const listener = (ev) => {
try {
const data = ev?.data;
if (!data || data.type !== 'em-highlight-result' || data.reqId !== reqId) return;
window.removeEventListener('message', listener, true);
resolve(data.result);
} catch {}
};
window.addEventListener('message', listener, true);
setTimeout(() => {
window.removeEventListener('message', listener, true);
resolve({ success: false, error: 'Frame highlight timeout' });
}, 3000);
cw.postMessage(
{
type: 'em-highlight-request',
reqId,
selector: innerSel,
selectorType,
listMode,
},
'*',
);
});
}
}
// Handle normal selector (non-iframe)
const effectiveType = listMode ? 'css' : selectorType;
const matches =
effectiveType === 'xpath' ? evaluateXPathAll(normalized) : queryAllDeep(normalized);
// Additional defense: filter out any overlay elements that might have slipped through
const filteredMatches = filterOverlayElements(matches);
if (!filteredMatches || filteredMatches.length === 0) {
return { success: false, error: 'No elements found for selector' };
}
// Scroll first match into view
const primaryMatch = filteredMatches[0];
if (primaryMatch) {
primaryMatch.scrollIntoView({
block: 'center',
inline: 'center',
behavior: 'smooth',
});
}
await sleep(150);
// Draw highlight rectangles
drawRects(filteredMatches, CONFIG.COLORS.VERIFY, false);
// Auto-clear after 2 seconds
setTimeout(() => {
clearRects();
}, 2000);
return { success: true, count: filteredMatches.length };
} catch (error) {
return { success: false, error: error.message || String(error) };
}
}
function copySelectorNow() {
try {
const sel = STATE.box?.querySelector('#__em_selector')?.textContent?.trim();
if (!sel) return;
navigator.clipboard?.writeText(sel).catch(() => {});
StateStore.set({
validation: { status: 'success', message: '✓ 已复制到剪贴板' },
});
setTimeout(() => {
StateStore.set({ validation: { status: 'idle', message: '' } });
}, 2000);
} catch {}
}
async function save() {
try {
const name = STATE.box?.querySelector('#__em_name')?.value?.trim();
const selector = STATE.box?.querySelector('#__em_selector')?.textContent?.trim();
if (!selector) return;
const url = location.href;
let selectorType = StateStore.get('selectorType');
const listMode = StateStore.get('listMode');
if (listMode && selectorType === 'xpath') {
selectorType = 'css';
}
await chrome.runtime.sendMessage({
type: 'element_marker_save',
marker: {
url,
name: name || selector,
selector,
selectorType,
listMode,
},
});
} catch {}
stop();
}
// ============================================================================
// Lifecycle Management
// ============================================================================
function start() {
if (STATE.active) return;
STATE.active = true;
if (IS_MAIN) {
const { host } = PanelHost.mount();
STATE.box = host;
StateStore.init();
bindControls();
}
ensureHighlighter();
ensureRectsHost();
attachPointerListeners();
attachKeyboardListener();
syncInteractionMode();
}
function stop() {
STATE.active = false;
detachPointerListeners();
detachKeyboardListener();
// Cancel pending rAF
if (STATE.hoverRafId != null) {
cancelAnimationFrame(STATE.hoverRafId);
STATE.hoverRafId = null;
}
pendingHoverEvent = null;
try {
STATE.highlighter?.remove();
STATE.rectsHost?.remove();
PanelHost.unmount();
DragController.destroy();
} catch {}
STATE.highlighter = null;
STATE.rectsHost = null;
STATE.box = null;
STATE.hoveredList = [];
STATE.hoverEl = null;
STATE.selectedEl = null;
STATE.lastHoverTarget = null;
STATE.verifyRectsActive = false;
// Clear rect pool to release DOM references
STATE.rectPool.length = 0;
STATE.rectPoolUsed = 0;
}
// ============================================================================
// Controls Binding
// ============================================================================
function bindControls() {
const host = STATE.box;
if (!host) return;
// Close/Cancel
host.querySelector('#__em_close')?.addEventListener('click', stop);
host.querySelector('#__em_cancel')?.addEventListener('click', stop);
// Save
host.querySelector('#__em_save')?.addEventListener('click', save);
// Verify (highlight only) & Execute (real action)
host.querySelector('#__em_verify')?.addEventListener('click', verifyHighlightOnly);
host.querySelector('#__em_execute')?.addEventListener('click', verifySelectorNow);
// Copy
host.querySelector('#__em_copy')?.addEventListener('click', copySelectorNow);
host.querySelector('#__em_copy_selector')?.addEventListener('click', copySelectorNow);
// Action change handler - show/hide action-specific options
host.querySelector('#__em_action')?.addEventListener('change', (e) => {
updateActionSpecificUI(e.target.value);
});
// Selector type
host.querySelector('#__em_selector_type')?.addEventListener('change', (e) => {
const newType = e.target.value;
const listMode = StateStore.get('listMode');
// If switching to XPath while in list mode, disable list mode
if (newType === 'xpath' && listMode) {
StateStore.set({ selectorType: newType, listMode: false });
} else {
StateStore.set({ selectorType: newType });
}
// Regenerate selector for the currently selected element
if (STATE.selectedEl) {
setSelection(STATE.selectedEl);
}
// Note: If no selectedEl (e.g., iframe selections or manual input),
// preserve existing selector text instead of clearing it
});
// List mode toggle
host.querySelector('#__em_toggle_list')?.addEventListener('click', (e) => {
const listMode = StateStore.get('listMode');
const newListMode = !listMode;
// If enabling list mode, force CSS selector type
if (newListMode) {
StateStore.set({ listMode: true, selectorType: 'css' });
const selectorTypeSelect = host.querySelector('#__em_selector_type');
if (selectorTypeSelect) selectorTypeSelect.value = 'css';
} else {
StateStore.set({ listMode: false });
}
// Update button active state
const btn = e.currentTarget;
if (btn) {
if (newListMode) {
btn.classList.add('active');
} else {
btn.classList.remove('active');
}
}
// Regenerate selector for the currently selected element
if (STATE.selectedEl) {
setSelection(STATE.selectedEl);
}
clearHighlighter();
});
// Tab toggle (switch between Attributes and Execute)
host.querySelector('#__em_toggle_tab')?.addEventListener('click', () => {
const currentTab = StateStore.get('activeTab');
StateStore.set({ activeTab: currentTab === 'attributes' ? 'execute' : 'attributes' });
});
// Tab switching
const tabs = host.querySelectorAll('.em-tab');
tabs.forEach((tab) => {
tab.addEventListener('click', () => {
StateStore.set({ activeTab: tab.dataset.tab });
});
});
// Navigation buttons
host.querySelector('#__em_nav_up')?.addEventListener('click', () => {
const base = STATE.selectedEl || STATE.hoverEl;
if (base?.parentElement) setSelection(base.parentElement);
});
host.querySelector('#__em_nav_down')?.addEventListener('click', () => {
const base = STATE.selectedEl || STATE.hoverEl;
if (base?.firstElementChild) setSelection(base.firstElementChild);
});
// Preferences
host.querySelector('#__em_pref_id')?.addEventListener('change', (e) => {
const prefs = { ...StateStore.get('prefs'), preferId: !!e.target.checked };
StateStore.set({ prefs });
});
host.querySelector('#__em_pref_attr')?.addEventListener('change', (e) => {
const prefs = { ...StateStore.get('prefs'), preferStableAttr: !!e.target.checked };
StateStore.set({ prefs });
});
host.querySelector('#__em_pref_class')?.addEventListener('change', (e) => {
const prefs = { ...StateStore.get('prefs'), preferClass: !!e.target.checked };
StateStore.set({ prefs });
});
// Drag - use entire header as drag handle
const dragHandle = host.querySelector('#__em_drag_handle');
if (dragHandle) {
DragController.init(dragHandle);
}
syncUIWithState();
}
function updateActionSpecificUI(action) {
const host = STATE.box;
if (!host) return;
// Hide all action-specific groups
const textGroup = host.querySelector('#__em_action_text_group');
const keysGroup = host.querySelector('#__em_action_keys_group');
const scrollOptions = host.querySelector('#__em_scroll_options');
const clickOptions = host.querySelector('#__em_click_options');
if (textGroup) textGroup.style.display = 'none';
if (keysGroup) keysGroup.style.display = 'none';
if (scrollOptions) scrollOptions.style.display = 'none';
if (clickOptions) clickOptions.style.display = 'none';
// Show relevant options based on action
if (action === 'type_text') {
if (textGroup) textGroup.style.display = 'block';
} else if (action === 'press_keys') {
if (keysGroup) keysGroup.style.display = 'block';
} else if (action === 'scroll') {
if (scrollOptions) scrollOptions.style.display = 'block';
} else if (['left_click', 'double_click', 'right_click'].includes(action)) {
if (clickOptions) clickOptions.style.display = 'block';
// For right_click, button selector is not relevant (always 'right')
// Hide the button field for right_click
const buttonField = host.querySelector('#__em_btn')?.closest('.em-field');
if (buttonField) {
buttonField.style.display = action === 'right_click' ? 'none' : 'block';
}
}
// hover: no extra options needed
}
function syncUIWithState() {
const host = STATE.box;
if (!host) return;
const state = StateStore.get();
const typeSelect = host.querySelector('#__em_selector_type');
if (typeSelect) typeSelect.value = state.selectorType;
// Initialize list mode button state
const listModeBtn = host.querySelector('#__em_toggle_list');
if (listModeBtn) {
if (state.listMode) {
listModeBtn.classList.add('active');
} else {
listModeBtn.classList.remove('active');
}
}
const prefId = host.querySelector('#__em_pref_id');
const prefAttr = host.querySelector('#__em_pref_attr');
const prefClass = host.querySelector('#__em_pref_class');
if (prefId) prefId.checked = state.prefs.preferId;
if (prefAttr) prefAttr.checked = state.prefs.preferStableAttr;
if (prefClass) prefClass.checked = state.prefs.preferClass;
// Initialize action-specific UI
const actionSelect = host.querySelector('#__em_action');
if (actionSelect) {
updateActionSpecificUI(actionSelect.value);
}
}
// ============================================================================
// Cross-Frame Bridge
// ============================================================================
// Register window message listener in all frames (not just main)
// to support cross-frame highlighting from popup validation
window.addEventListener(
'message',
(ev) => {
try {
const data = ev?.data;
if (!data) return;
// Handle iframe highlight request (works even when overlay is inactive)
if (data.type === 'em-highlight-request') {
highlightSelectorExternal({
selector: data.selector,
selectorType: data.selectorType || 'css',
listMode: !!data.listMode,
})
.then((result) => {
window.parent.postMessage(
{
type: 'em-highlight-result',
reqId: data.reqId,
result,
},
'*',
);
})
.catch((error) => {
window.parent.postMessage(
{
type: 'em-highlight-result',
reqId: data.reqId,
result: { success: false, error: error?.message || String(error) },
},
'*',
);
});
return;
}
// Following messages only relevant when overlay is active
if (!STATE.active) return;
// Only main frame handles these overlay-related messages
if (!IS_MAIN) return;
const iframes = Array.from(document.querySelectorAll('iframe'));
const host = iframes.find((f) => {
try {
return f.contentWindow === ev.source;
} catch {
return false;
}
});
if (!host) return;
const base = host.getBoundingClientRect();
if (data.type === 'em_hover' && Array.isArray(data.rects)) {
// Use pooled rect boxes for better performance
drawRectBoxes(data.rects, {
offsetX: base.left,
offsetY: base.top,
color: CONFIG.COLORS.HOVER,
dashed: true,
});
} else if (data.type === 'em_click' && data.innerSel) {
const frameSel = generateSelector(host);
const composite = frameSel ? `${frameSel} |> ${data.innerSel}` : data.innerSel;
const selectorText = STATE.box?.querySelector('#__em_selector');
const selectorDisplay = STATE.box?.querySelector('#__em_selector_text');
if (selectorText) selectorText.textContent = composite;
if (selectorDisplay) selectorDisplay.textContent = composite;
}
} catch {}
},
true,
);
// ============================================================================
// Message Handlers
// ============================================================================
chrome.runtime.onMessage.addListener((request, _sender, sendResponse) => {
if (request?.action === 'element_marker_start') {
start();
sendResponse({ ok: true });
return true;
} else if (request?.action === 'element_marker_ping') {
sendResponse({ status: 'pong' });
return false;
} else if (request?.action === 'element_marker_highlight') {
highlightSelectorExternal({
selector: request.selector,
selectorType: request.selectorType,
listMode: !!request.listMode,
})
.then((result) => sendResponse(result))
.catch((error) => sendResponse({ success: false, error: error?.message || String(error) }));
return true;
}
return false;
});
})();
