wehub-resource-sync
2803 lines
83 KiB
JavaScript
2803 lines
83 KiB
JavaScript
/* 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;
|
|
});
|
|
})();
|