63 lines
2.3 KiB
HTML
63 lines
2.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Search Results</title>
|
|
<style>
|
|
body {
|
|
font-family: Arial, sans-serif;
|
|
padding: 10px;
|
|
max-height: 400px;
|
|
overflow-y: auto; /* Make the popup scrollable */
|
|
}
|
|
.result {
|
|
margin-bottom: 10px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>Search Results</h1>
|
|
<div id="results"></div>
|
|
<script>
|
|
// Helper function to calculate similarity between two strings
|
|
function calculateSimilarity(searchTitle, resultTitle) {
|
|
const searchWords = searchTitle.toLowerCase().split(/\s+/);
|
|
const resultWords = resultTitle.toLowerCase().split(/\s+/);
|
|
const commonWords = searchWords.filter(word => resultWords.includes(word));
|
|
return (commonWords.length / Math.max(searchWords.length, resultWords.length)) * 100;
|
|
}
|
|
|
|
// This script will populate the results dynamically
|
|
chrome.runtime.onMessage.addListener((message) => {
|
|
if (message.action === 'displayResults' && message.results) {
|
|
const resultsDiv = document.getElementById('results');
|
|
const searchTitle = message.searchTitle || '';
|
|
|
|
// Sort results by similarity
|
|
const sortedResults = message.results.map(result => {
|
|
const similarity = calculateSimilarity(searchTitle, result.title || '');
|
|
return { ...result, similarity };
|
|
}).sort((a, b) => b.similarity - a.similarity);
|
|
|
|
// Render results
|
|
resultsDiv.innerHTML = sortedResults.map(result => {
|
|
const similarity = result.similarity.toFixed(2);
|
|
return `
|
|
<div class='result'>
|
|
<div style="position: relative;">
|
|
<span style="position: absolute; top: 0; left: 0; background: #007bff; color: white; padding: 2px 5px; border-radius: 3px; font-size: 12px;">${similarity}%</span>
|
|
</div>
|
|
<h3>${result.title || 'No title available'}</h3>
|
|
<p>Filetypes: ${result.filetypes || 'Unknown'}</p>
|
|
<p>Size: ${result.size || 'Unknown'}</p>
|
|
<span style="background: #28a745; color: white; padding: 2px 5px; border-radius: 3px; font-size: 12px;">Volumes: ${result.volumes || 0}</span>
|
|
</div>
|
|
`;
|
|
}).join('');
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|