copilot-swe-agent[bot]
7fc8dd655a
- Removed unused variables in capture.js (clonedDoc, styles array) - Added explicit return values for message handlers in content.js - Added detailed comment explaining 500ms render delay before PDF conversion - Updated PERMISSIONS.md with comprehensive explanation of host_permissions requirement - Updated test.html with web clipping test scenarios - Improved code consistency and documentation Co-authored-by: christianlouis <361235+christianlouis@users.noreply.github.com>
211 lines
8.4 KiB
HTML
211 lines
8.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Browser Extension Test Page - Web Clipping</title>
|
|
<style>
|
|
body {
|
|
font-family: Arial, sans-serif;
|
|
max-width: 800px;
|
|
margin: 50px auto;
|
|
padding: 20px;
|
|
line-height: 1.6;
|
|
}
|
|
h1 {
|
|
color: #2c3e50;
|
|
}
|
|
.test-section {
|
|
background: #f8f9fa;
|
|
padding: 20px;
|
|
margin: 20px 0;
|
|
border-radius: 8px;
|
|
border: 1px solid #dee2e6;
|
|
}
|
|
.test-link {
|
|
display: block;
|
|
margin: 10px 0;
|
|
padding: 10px;
|
|
background: #e7f3ff;
|
|
border-left: 4px solid #0066cc;
|
|
text-decoration: none;
|
|
color: #0066cc;
|
|
border-radius: 4px;
|
|
}
|
|
.test-link:hover {
|
|
background: #d1e7ff;
|
|
}
|
|
.instructions {
|
|
background: #fffbea;
|
|
border: 1px solid #ffd700;
|
|
padding: 15px;
|
|
margin: 20px 0;
|
|
border-radius: 4px;
|
|
}
|
|
code {
|
|
background: #f4f4f4;
|
|
padding: 2px 6px;
|
|
border-radius: 3px;
|
|
font-family: 'Courier New', monospace;
|
|
}
|
|
.selectable-content {
|
|
background: #e7f3ff;
|
|
border: 2px dashed #0066cc;
|
|
padding: 20px;
|
|
margin: 15px 0;
|
|
border-radius: 8px;
|
|
}
|
|
.highlight {
|
|
background-color: #ffeb3b;
|
|
padding: 2px 5px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>🧪 DocuElevate Browser Extension Test Page</h1>
|
|
|
|
<div class="instructions">
|
|
<h2>How to Test (v1.1.0 - Web Clipping)</h2>
|
|
<ol>
|
|
<li>Make sure the DocuElevate browser extension is installed and configured</li>
|
|
<li><strong>URL Mode:</strong> Click extension icon, select "Send URL" mode, click "Send to DocuElevate"</li>
|
|
<li><strong>Clip Full Page:</strong> Click extension icon, select "Clip Page" mode, click "Clip Full Page"</li>
|
|
<li><strong>Clip Selection:</strong> Select text below, click extension icon, click "Clip Selection"</li>
|
|
<li><strong>Context Menu - URL:</strong> Right-click page and select "Send URL to DocuElevate"</li>
|
|
<li><strong>Context Menu - Full:</strong> Right-click page and select "Clip Full Page to DocuElevate"</li>
|
|
<li><strong>Context Menu - Selection:</strong> Select text, right-click, select "Clip Selection to DocuElevate"</li>
|
|
</ol>
|
|
</div>
|
|
|
|
<div class="test-section">
|
|
<h2>📄 Sample Document Links (URL Mode)</h2>
|
|
<p>These links point to sample documents that can be processed by DocuElevate:</p>
|
|
|
|
<a href="https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf"
|
|
class="test-link" target="_blank">
|
|
📕 Sample PDF Document (dummy.pdf)
|
|
</a>
|
|
|
|
<a href="https://file-examples.com/storage/fe783c0bd90d0e9c119e536/2017/10/file-sample_150kB.pdf"
|
|
class="test-link" target="_blank">
|
|
📗 Example PDF File (file-sample_150kB.pdf)
|
|
</a>
|
|
|
|
<a href="https://www.learningcontainer.com/wp-content/uploads/2019/09/sample-pdf-file.pdf"
|
|
class="test-link" target="_blank">
|
|
📘 Learning Container Sample PDF
|
|
</a>
|
|
</div>
|
|
|
|
<div class="test-section">
|
|
<h2>🖼️ Sample Image Links (URL Mode)</h2>
|
|
<p>These links point to sample images that can be processed:</p>
|
|
|
|
<a href="https://via.placeholder.com/800x600.png"
|
|
class="test-link" target="_blank">
|
|
🖼️ Placeholder Image (PNG, 800x600)
|
|
</a>
|
|
|
|
<a href="https://via.placeholder.com/1024x768.jpg"
|
|
class="test-link" target="_blank">
|
|
📷 Placeholder Image (JPG, 1024x768)
|
|
</a>
|
|
</div>
|
|
|
|
<div class="test-section">
|
|
<h2>📝 Selectable Content for Clip Testing</h2>
|
|
<p>Use this content to test the selection clipping feature:</p>
|
|
|
|
<div class="selectable-content">
|
|
<h3>Important Document</h3>
|
|
<p>This is a <span class="highlight">sample paragraph</span> that you can select and clip to DocuElevate.
|
|
Select this text with your mouse, then right-click and choose "Clip Selection to DocuElevate" from the context menu.</p>
|
|
|
|
<p><strong>Key Points:</strong></p>
|
|
<ul>
|
|
<li>Web clipping allows you to save any web content as PDF</li>
|
|
<li>You can clip full pages or just selected portions</li>
|
|
<li>Pages are converted to PDF in your browser before upload</li>
|
|
<li>All styling and formatting is preserved</li>
|
|
</ul>
|
|
|
|
<p>This content will be captured with its styling and converted to a PDF document that's sent to DocuElevate for processing!</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="test-section">
|
|
<h2>✅ Expected Behavior (v1.1.0)</h2>
|
|
<h3>URL Mode:</h3>
|
|
<ul>
|
|
<li><strong>Extension Popup:</strong> Shows "Send URL" mode with current page URL</li>
|
|
<li><strong>Context Menu:</strong> "Send URL to DocuElevate" option appears</li>
|
|
<li><strong>Success:</strong> Notification with task ID appears</li>
|
|
</ul>
|
|
|
|
<h3>Clip Mode:</h3>
|
|
<ul>
|
|
<li><strong>Extension Popup:</strong> Shows "Clip Page" mode with two buttons</li>
|
|
<li><strong>Full Page:</strong> Captures entire page as PDF and uploads</li>
|
|
<li><strong>Selection:</strong> Captures only selected content as PDF</li>
|
|
<li><strong>Context Menu:</strong> "Clip Full Page" and "Clip Selection" options</li>
|
|
<li><strong>Success:</strong> Notification confirms clip was uploaded</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="test-section">
|
|
<h2>🔍 Testing Checklist (v1.1.0)</h2>
|
|
<h3>Installation & Configuration:</h3>
|
|
<ul>
|
|
<li>☐ Extension icon appears in browser toolbar</li>
|
|
<li>☐ Popup opens when clicking extension icon</li>
|
|
<li>☐ Configuration can be saved (server URL)</li>
|
|
<li>☐ Mode toggle buttons work (URL/Clip)</li>
|
|
</ul>
|
|
|
|
<h3>URL Mode:</h3>
|
|
<ul>
|
|
<li>☐ Current URL is displayed in popup</li>
|
|
<li>☐ "Send to DocuElevate" button works</li>
|
|
<li>☐ Context menu "Send URL to DocuElevate" works</li>
|
|
<li>☐ Success notification appears with task ID</li>
|
|
</ul>
|
|
|
|
<h3>Clip Mode:</h3>
|
|
<ul>
|
|
<li>☐ "Clip Full Page" button works</li>
|
|
<li>☐ "Clip Selection" button works (after selecting text)</li>
|
|
<li>☐ Context menu "Clip Full Page to DocuElevate" works</li>
|
|
<li>☐ Context menu "Clip Selection to DocuElevate" works</li>
|
|
<li>☐ PDF is generated correctly with styles</li>
|
|
<li>☐ Upload succeeds and task ID is shown</li>
|
|
</ul>
|
|
|
|
<h3>Error Handling:</h3>
|
|
<ul>
|
|
<li>☐ Clear error message if server unreachable</li>
|
|
<li>☐ Error message if no text selected (Clip Selection)</li>
|
|
<li>☐ Authentication errors handled properly</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="instructions">
|
|
<h2>🐛 Troubleshooting</h2>
|
|
<p>If the extension doesn't work:</p>
|
|
<ol>
|
|
<li>Check that the extension is enabled in <code>chrome://extensions/</code></li>
|
|
<li>Verify your DocuElevate server URL is correct</li>
|
|
<li>Open DevTools (F12) and check the Console for errors</li>
|
|
<li>Make sure your DocuElevate server is running and accessible</li>
|
|
<li>If using authentication, verify your session cookie is valid</li>
|
|
<li>For clipping: Ensure browser supports <code>chrome.tabs.printToPDF</code> API</li>
|
|
<li>Check that <code>/api/files/upload</code> endpoint is accessible</li>
|
|
</ol>
|
|
</div>
|
|
|
|
<footer style="margin-top: 50px; padding-top: 20px; border-top: 2px solid #dee2e6; color: #6c757d;">
|
|
<p>DocuElevate Browser Extension Test Page (v1.1.0)</p>
|
|
<p>For more information, see the <a href="../README.md">Browser Extension README</a></p>
|
|
</footer>
|
|
</body>
|
|
</html>
|