feat(popularity) add ranking by nb# of comments
This commit is contained in:
parent
4cfa80e9fc
commit
b33b45de94
@ -1,8 +1,8 @@
|
|||||||
// ==UserScript==
|
// ==UserScript==
|
||||||
// @name Hacker News URL Highlighter with Enhanced Panel and Scores
|
// @name Hacker News URL Highlighter with Enhanced Panel and Scores & Comments
|
||||||
// @namespace https://news.ycombinator.com/
|
// @namespace https://news.ycombinator.com/
|
||||||
// @version 1.5
|
// @version 1.6
|
||||||
// @description Highlights URLs in comments on Hacker News, lists them in a toggleable panel with sorting, color coding based on frequency or upvotes, and displays scores next to each URL. Provides export functionality and hover previews only in comments.
|
// @description Highlights URLs in comments, displays them in a toggleable panel with sorting (frequency, name, upvotes, comment count).
|
||||||
// @author MorganGeek
|
// @author MorganGeek
|
||||||
// @match https://news.ycombinator.com/item?id=*
|
// @match https://news.ycombinator.com/item?id=*
|
||||||
// @grant GM_xmlhttpRequest
|
// @grant GM_xmlhttpRequest
|
||||||
@ -11,267 +11,175 @@
|
|||||||
// @run-at document-end
|
// @run-at document-end
|
||||||
// ==/UserScript==
|
// ==/UserScript==
|
||||||
|
|
||||||
(function () {
|
(function() {
|
||||||
'use strict';
|
'use strict';
|
||||||
|
|
||||||
// Configuration des couleurs en fonction des fréquences ou des upvotes
|
const COLORS={low:'#d1e7dd',medium:'#fff3cd',high:'#f8d7da'};
|
||||||
const COLORS = {
|
const toggleButton=document.createElement('button');
|
||||||
low: '#d1e7dd', // Vert pâle
|
toggleButton.textContent='Afficher les URLs';
|
||||||
medium: '#fff3cd', // Jaune pâle
|
Object.assign(toggleButton.style,{
|
||||||
high: '#f8d7da' // Rouge pâle
|
position:'fixed',bottom:'10px',right:'10px',zIndex:1000,padding:'10px 15px',
|
||||||
};
|
backgroundColor:'#ff6600',color:'#fff',border:'none',borderRadius:'5px',cursor:'pointer'
|
||||||
|
});
|
||||||
|
document.body.appendChild(toggleButton);
|
||||||
|
|
||||||
// Créer un bouton pour basculer l'affichage du panneau
|
const panel=document.createElement('div');
|
||||||
const toggleButton = document.createElement('button');
|
panel.id='url-panel';
|
||||||
toggleButton.textContent = 'Afficher les URLs';
|
Object.assign(panel.style,{
|
||||||
toggleButton.style.position = 'fixed';
|
position:'fixed',top:'10px',right:'10px',width:'350px',backgroundColor:'#fff',
|
||||||
toggleButton.style.bottom = '10px';
|
border:'1px solid #ccc',borderRadius:'5px',padding:'10px',boxShadow:'0 0 10px rgba(0,0,0,.2)',
|
||||||
toggleButton.style.right = '10px';
|
maxHeight:'80vh',overflowY:'auto',zIndex:1000,display:'none'
|
||||||
toggleButton.style.zIndex = 1000;
|
});
|
||||||
toggleButton.style.padding = '10px 15px';
|
panel.innerHTML=`
|
||||||
toggleButton.style.backgroundColor = '#ff6600';
|
<h4>URLs</h4>
|
||||||
toggleButton.style.color = '#fff';
|
<div style="margin-bottom:10px;">
|
||||||
toggleButton.style.border = 'none';
|
<label for="sort-select">Trier par:</label>
|
||||||
toggleButton.style.borderRadius = '5px';
|
<select id="sort-select" style="width:100%;padding:5px;margin-top:5px;">
|
||||||
toggleButton.style.cursor = 'pointer';
|
<option value="frequency">Fréquence</option>
|
||||||
document.body.appendChild(toggleButton);
|
<option value="name">Nom</option>
|
||||||
|
<option value="upvotes">Upvotes</option>
|
||||||
|
<option value="commentaires">Commentaires</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<ul id="url-list" style="margin:0;padding:0;list-style:none;"></ul>
|
||||||
|
<div style="margin-top:10px;">
|
||||||
|
<label for="limit-select">Afficher:</label>
|
||||||
|
<select id="limit-select" style="width:100%;padding:5px;margin-top:5px;">
|
||||||
|
<option value="all">Tout</option>
|
||||||
|
<option value="10">Top 10</option>
|
||||||
|
<option value="20">Top 20</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<button id="copy-urls" style="margin-top:10px;display:block;width:100%;padding:10px;background:#ff6600;color:#fff;border:none;border-radius:5px;cursor:pointer;">
|
||||||
|
Copier les URLs
|
||||||
|
</button>
|
||||||
|
`;
|
||||||
|
document.body.appendChild(panel);
|
||||||
|
|
||||||
// Créer un panneau flottant pour afficher les URLs (caché par défaut)
|
const tooltip=document.createElement('div');
|
||||||
const panel = document.createElement('div');
|
tooltip.id='url-tooltip';
|
||||||
panel.id = 'url-panel';
|
Object.assign(tooltip.style,{
|
||||||
panel.style.position = 'fixed';
|
position:'absolute',background:'#fff',border:'1px solid #ccc',borderRadius:'5px',
|
||||||
panel.style.top = '10px';
|
padding:'10px',boxShadow:'0 0 10px rgba(0,0,0,.2)',maxWidth:'300px',
|
||||||
panel.style.right = '10px';
|
display:'none',zIndex:1001
|
||||||
panel.style.width = '350px';
|
});
|
||||||
panel.style.backgroundColor = '#fff';
|
document.body.appendChild(tooltip);
|
||||||
panel.style.border = '1px solid #ccc';
|
|
||||||
panel.style.borderRadius = '5px';
|
|
||||||
panel.style.padding = '10px';
|
|
||||||
panel.style.boxShadow = '0px 0px 10px rgba(0,0,0,0.2)';
|
|
||||||
panel.style.maxHeight = '80vh';
|
|
||||||
panel.style.overflowY = 'auto';
|
|
||||||
panel.style.zIndex = 1000;
|
|
||||||
panel.style.display = 'none'; // Caché par défaut
|
|
||||||
panel.innerHTML = `
|
|
||||||
<h4>URLs</h4>
|
|
||||||
<div style="margin-bottom: 10px;">
|
|
||||||
<label for="sort-select">Trier par:</label>
|
|
||||||
<select id="sort-select" style="width: 100%; padding: 5px; margin-top: 5px;">
|
|
||||||
<option value="frequency">Fréquence</option>
|
|
||||||
<option value="name">Nom</option>
|
|
||||||
<option value="upvotes">Upvotes</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
<ul id="url-list" style="margin: 0; padding: 0; list-style: none;"></ul>
|
|
||||||
<div style="margin-top: 10px;">
|
|
||||||
<label for="limit-select">Afficher:</label>
|
|
||||||
<select id="limit-select" style="width: 100%; padding: 5px; margin-top: 5px;">
|
|
||||||
<option value="all">Tout</option>
|
|
||||||
<option value="10">Top 10</option>
|
|
||||||
<option value="20">Top 20</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
<button id="copy-urls" style="margin-top: 10px; display: block; width: 100%; padding: 10px; background-color: #ff6600; color: #fff; border: none; border-radius: 5px; cursor: pointer;">Copier les URLs</button>
|
|
||||||
`;
|
|
||||||
document.body.appendChild(panel);
|
|
||||||
|
|
||||||
// Créer une infobulle pour les aperçus
|
const urlData={};
|
||||||
const tooltip = document.createElement('div');
|
const comments=document.querySelectorAll('.commtext');
|
||||||
tooltip.id = 'url-tooltip';
|
comments.forEach(comment=>{
|
||||||
tooltip.style.position = 'absolute';
|
const links=comment.querySelectorAll('a[href]');
|
||||||
tooltip.style.backgroundColor = '#fff';
|
links.forEach(link=>{
|
||||||
tooltip.style.border = '1px solid #ccc';
|
const u=link.href;
|
||||||
tooltip.style.borderRadius = '5px';
|
if(!urlData[u]) urlData[u]={url:u,count:0,upvotes:0,commentCount:0};
|
||||||
tooltip.style.padding = '10px';
|
urlData[u].count++;
|
||||||
tooltip.style.boxShadow = '0px 0px 10px rgba(0,0,0,0.2)';
|
link.style.backgroundColor='#ffff99';
|
||||||
tooltip.style.maxWidth = '300px';
|
link.addEventListener('mouseover',()=>{
|
||||||
tooltip.style.display = 'none';
|
GM_xmlhttpRequest({
|
||||||
tooltip.style.zIndex = 1001;
|
method:'GET',url:u,
|
||||||
document.body.appendChild(tooltip);
|
onload:r=>{
|
||||||
|
tooltip.innerHTML='';
|
||||||
// Structure de données pour stocker les URLs avec leurs métadonnées
|
const d=new DOMParser().parseFromString(r.responseText,'text/html');
|
||||||
const urlData = {};
|
const t=d.querySelector('title')?d.querySelector('title').innerText:'No Title';
|
||||||
|
const desc=d.querySelector('meta[name="description"]')?d.querySelector('meta[name="description"]').content:'No Description';
|
||||||
// Extraire les URLs des commentaires et les mettre en évidence
|
tooltip.innerHTML=`<strong>${t}</strong><p>${desc}</p>`;
|
||||||
const comments = document.querySelectorAll('.commtext');
|
tooltip.style.display='block';
|
||||||
comments.forEach(comment => {
|
},
|
||||||
const links = comment.querySelectorAll('a[href]');
|
onerror:()=>{
|
||||||
links.forEach(link => {
|
tooltip.innerHTML='<strong>Preview unavailable</strong>';
|
||||||
const url = link.href;
|
tooltip.style.display='block';
|
||||||
if (!urlData[url]) {
|
}
|
||||||
urlData[url] = {
|
|
||||||
url: url,
|
|
||||||
count: 1,
|
|
||||||
upvotes: 0 // Placeholder, à implémenter si les upvotes sont disponibles
|
|
||||||
};
|
|
||||||
link.style.backgroundColor = '#ffff99'; // Couleur de surbrillance initiale
|
|
||||||
|
|
||||||
// Ajouter l'URL à la liste dans le panneau
|
|
||||||
const listItem = document.createElement('li');
|
|
||||||
listItem.innerHTML = `<span>${url}</span> <span style="float: right; font-weight: bold;">1</span>`;
|
|
||||||
listItem.style.marginBottom = '5px';
|
|
||||||
listItem.style.wordWrap = 'break-word';
|
|
||||||
listItem.style.cursor = 'pointer';
|
|
||||||
listItem.dataset.url = url;
|
|
||||||
panel.querySelector('#url-list').appendChild(listItem);
|
|
||||||
} else {
|
|
||||||
urlData[url].count += 1;
|
|
||||||
// Mettre à jour le compteur dans le panneau
|
|
||||||
const existingItem = panel.querySelector(`li[data-url="${CSS.escape(url)}"] span:last-child`);
|
|
||||||
if (existingItem) {
|
|
||||||
existingItem.textContent = urlData[url].count;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Ajouter la fonctionnalité d'aperçu au survol des liens
|
|
||||||
link.addEventListener('mouseover', () => {
|
|
||||||
GM_xmlhttpRequest({
|
|
||||||
method: 'GET',
|
|
||||||
url: url,
|
|
||||||
onload: response => {
|
|
||||||
tooltip.innerHTML = '';
|
|
||||||
const parser = new DOMParser();
|
|
||||||
const doc = parser.parseFromString(response.responseText, 'text/html');
|
|
||||||
const title = doc.querySelector('title') ? doc.querySelector('title').innerText : 'No Title';
|
|
||||||
const description = doc.querySelector('meta[name="description"]') ? doc.querySelector('meta[name="description"]').content : 'No Description';
|
|
||||||
|
|
||||||
tooltip.innerHTML = `<strong>${title}</strong><p>${description}</p>`;
|
|
||||||
tooltip.style.display = 'block';
|
|
||||||
},
|
|
||||||
onerror: () => {
|
|
||||||
tooltip.innerHTML = '<strong>Preview unavailable</strong>';
|
|
||||||
tooltip.style.display = 'block';
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
const rect = link.getBoundingClientRect();
|
|
||||||
tooltip.style.top = `${rect.bottom + window.scrollY + 5}px`;
|
|
||||||
tooltip.style.left = `${rect.left + window.scrollX}px`;
|
|
||||||
});
|
|
||||||
|
|
||||||
link.addEventListener('mouseout', () => {
|
|
||||||
tooltip.style.display = 'none';
|
|
||||||
});
|
|
||||||
});
|
});
|
||||||
|
const rect=link.getBoundingClientRect();
|
||||||
|
tooltip.style.top=`${rect.bottom+window.scrollY+5}px`;
|
||||||
|
tooltip.style.left=`${rect.left+window.scrollX}px`;
|
||||||
|
});
|
||||||
|
link.addEventListener('mouseout',()=>{tooltip.style.display='none';});
|
||||||
});
|
});
|
||||||
|
});
|
||||||
|
|
||||||
// Fonction pour mettre à jour l'affichage du panneau selon les filtres
|
function updatePanel(){
|
||||||
function updatePanel() {
|
const sortBy=panel.querySelector('#sort-select').value;
|
||||||
const sortBy = panel.querySelector('#sort-select').value;
|
const limit=panel.querySelector('#limit-select').value;
|
||||||
const limit = panel.querySelector('#limit-select').value;
|
let arr=Object.values(urlData);
|
||||||
|
if(sortBy==='frequency') arr.sort((a,b)=>b.count-a.count);
|
||||||
|
else if(sortBy==='name') arr.sort((a,b)=>a.url.localeCompare(b.url));
|
||||||
|
else if(sortBy==='upvotes') arr.sort((a,b)=>b.upvotes-a.upvotes);
|
||||||
|
else if(sortBy==='commentaires') arr.sort((a,b)=>b.commentCount-a.commentCount);
|
||||||
|
if(limit!=='all') arr=arr.slice(0,parseInt(limit));
|
||||||
|
const urlList=panel.querySelector('#url-list');
|
||||||
|
urlList.innerHTML='';
|
||||||
|
const counts=arr.map(i=>i.count);
|
||||||
|
const maxC=Math.max(...counts),minC=Math.min(...counts);
|
||||||
|
arr.forEach(item=>{
|
||||||
|
const li=document.createElement('li');
|
||||||
|
li.style.marginBottom='5px';li.style.wordWrap='break-word';li.style.cursor='pointer';
|
||||||
|
li.dataset.url=item.url;
|
||||||
|
const r=(item.count-minC)/(maxC-minC+1);
|
||||||
|
li.style.backgroundColor=r>0.66?COLORS.high:r>0.33?COLORS.medium:COLORS.low;
|
||||||
|
li.innerHTML=`
|
||||||
|
<span>${item.url}</span>
|
||||||
|
<span style="float:right;font-weight:bold;">
|
||||||
|
${item.count}${item.upvotes>0?` / ${item.upvotes}`:''}${item.commentCount>0?` / ${item.commentCount}`:''}
|
||||||
|
</span>
|
||||||
|
`;
|
||||||
|
li.addEventListener('click',()=>{
|
||||||
|
GM_setClipboard(item.url,'text');
|
||||||
|
alert('URL copiée.');
|
||||||
|
});
|
||||||
|
urlList.appendChild(li);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
// Convertir l'objet en tableau pour le tri
|
updatePanel();
|
||||||
let urlsArray = Object.values(urlData);
|
panel.querySelector('#sort-select').addEventListener('change',updatePanel);
|
||||||
|
panel.querySelector('#limit-select').addEventListener('change',updatePanel);
|
||||||
|
toggleButton.addEventListener('click',()=>{
|
||||||
|
if(panel.style.display==='none'){panel.style.display='block';toggleButton.textContent='Masquer les URLs';}
|
||||||
|
else{panel.style.display='none';toggleButton.textContent='Afficher les URLs';}
|
||||||
|
});
|
||||||
|
panel.querySelector('#copy-urls').addEventListener('click',()=>{
|
||||||
|
GM_setClipboard(Object.keys(urlData).join('\n'),'text');
|
||||||
|
alert('URLs copiées.');
|
||||||
|
});
|
||||||
|
|
||||||
// Trier en fonction du critère sélectionné
|
const commentRows=document.querySelectorAll('tr.comtr');
|
||||||
if (sortBy === 'frequency') {
|
commentRows.forEach(row=>{
|
||||||
urlsArray.sort((a, b) => b.count - a.count);
|
const commentLink=row.querySelector('a[href^="item?id="]');
|
||||||
} else if (sortBy === 'name') {
|
if(commentLink){
|
||||||
urlsArray.sort((a, b) => a.url.localeCompare(b.url));
|
const pointsSpan=row.querySelector('.score');
|
||||||
} else if (sortBy === 'upvotes') {
|
const pts=pointsSpan?parseInt(pointsSpan.textContent):0;
|
||||||
urlsArray.sort((a, b) => b.upvotes - a.upvotes);
|
const c=row.querySelector('.commtext');
|
||||||
}
|
if(c){
|
||||||
|
const links=c.querySelectorAll('a[href]');
|
||||||
// Appliquer la limite si nécessaire
|
links.forEach(l=>{if(urlData[l.href]) urlData[l.href].upvotes+=pts;});
|
||||||
if (limit !== 'all') {
|
}
|
||||||
const limitNumber = parseInt(limit);
|
|
||||||
urlsArray = urlsArray.slice(0, limitNumber);
|
|
||||||
}
|
|
||||||
|
|
||||||
const urlList = panel.querySelector('#url-list');
|
|
||||||
urlList.innerHTML = ''; // Vider la liste actuelle
|
|
||||||
|
|
||||||
// Déterminer les fréquences pour la coloration
|
|
||||||
const counts = urlsArray.map(item => item.count);
|
|
||||||
const maxCount = Math.max(...counts);
|
|
||||||
const minCount = Math.min(...counts);
|
|
||||||
|
|
||||||
urlsArray.forEach(item => {
|
|
||||||
const listItem = document.createElement('li');
|
|
||||||
listItem.style.marginBottom = '5px';
|
|
||||||
listItem.style.wordWrap = 'break-word';
|
|
||||||
listItem.style.cursor = 'pointer';
|
|
||||||
listItem.dataset.url = item.url;
|
|
||||||
|
|
||||||
// Définir la couleur en fonction de la fréquence
|
|
||||||
let color;
|
|
||||||
const ratio = (item.count - minCount) / (maxCount - minCount + 1);
|
|
||||||
if (ratio > 0.66) {
|
|
||||||
color = COLORS.high;
|
|
||||||
} else if (ratio > 0.33) {
|
|
||||||
color = COLORS.medium;
|
|
||||||
} else {
|
|
||||||
color = COLORS.low;
|
|
||||||
}
|
|
||||||
listItem.style.backgroundColor = color;
|
|
||||||
|
|
||||||
// Créer le contenu avec URL et score
|
|
||||||
listItem.innerHTML = `
|
|
||||||
<span>${item.url}</span>
|
|
||||||
<span style="float: right; font-weight: bold;">${item.count}${item.upvotes > 0 ? ` / ${item.upvotes}` : ''}</span>
|
|
||||||
`;
|
|
||||||
|
|
||||||
// Ajouter l'événement de clic pour copier l'URL
|
|
||||||
listItem.addEventListener('click', () => {
|
|
||||||
GM_setClipboard(item.url, 'text');
|
|
||||||
alert('URL copiée dans le presse-papiers!');
|
|
||||||
});
|
|
||||||
|
|
||||||
urlList.appendChild(listItem);
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
|
});
|
||||||
|
|
||||||
// Initialiser le panneau
|
const childrenMap={};
|
||||||
updatePanel();
|
commentRows.forEach(r=>{
|
||||||
|
const id=r.id;const pid=r.getAttribute('data-parent');
|
||||||
// Écouter les changements dans les sélecteurs de tri et de limite
|
if(!pid||!id) return;
|
||||||
panel.querySelector('#sort-select').addEventListener('change', updatePanel);
|
if(!childrenMap[pid]) childrenMap[pid]=[];
|
||||||
panel.querySelector('#limit-select').addEventListener('change', updatePanel);
|
childrenMap[pid].push(id);
|
||||||
|
});
|
||||||
// Gérer le bouton de bascule pour afficher/masquer le panneau
|
const cache={};
|
||||||
toggleButton.addEventListener('click', () => {
|
function size(id){
|
||||||
if (panel.style.display === 'none') {
|
if(!childrenMap[id]) return 0;
|
||||||
panel.style.display = 'block';
|
if(cache[id]!=null) return cache[id];
|
||||||
toggleButton.textContent = 'Masquer les URLs';
|
let s=childrenMap[id].length;
|
||||||
} else {
|
childrenMap[id].forEach(k=>{s+=size(k);});
|
||||||
panel.style.display = 'none';
|
cache[id]=s;return s;
|
||||||
toggleButton.textContent = 'Afficher les URLs';
|
}
|
||||||
}
|
commentRows.forEach(r=>{
|
||||||
});
|
const id=r.id;
|
||||||
|
const c=r.querySelector('.commtext');
|
||||||
// Gérer le bouton "Copier les URLs"
|
if(!id||!c) return;
|
||||||
panel.querySelector('#copy-urls').addEventListener('click', () => {
|
const count=size(id);
|
||||||
const urlArray = Object.keys(urlData);
|
const links=c.querySelectorAll('a[href]');
|
||||||
GM_setClipboard(urlArray.join('\n'), 'text');
|
links.forEach(l=>{if(urlData[l.href]) urlData[l.href].commentCount+=count;});
|
||||||
alert('URLs copiées dans le presse-papiers!');
|
});
|
||||||
});
|
|
||||||
|
|
||||||
// Optionnel : Collecter les upvotes des commentaires pour chaque URL
|
|
||||||
// Note : Hacker News n'expose pas directement les upvotes des commentaires via le DOM.
|
|
||||||
// Si vous avez une méthode pour obtenir les upvotes, vous pouvez l'implémenter ici.
|
|
||||||
// Par exemple, si les points des commentaires sont visibles, vous pouvez les extraire et les attribuer aux URLs.
|
|
||||||
|
|
||||||
// Exemple de récupération des points des commentaires (si disponibles)
|
|
||||||
const commentRows = document.querySelectorAll('tr.comtr');
|
|
||||||
commentRows.forEach(row => {
|
|
||||||
const commentLink = row.querySelector('a[href^="item?id="]');
|
|
||||||
if (commentLink) {
|
|
||||||
const pointsSpan = row.querySelector('.score');
|
|
||||||
const points = pointsSpan ? parseInt(pointsSpan.textContent) : 0;
|
|
||||||
const comment = row.querySelector('.commtext');
|
|
||||||
if (comment) {
|
|
||||||
const links = comment.querySelectorAll('a[href]');
|
|
||||||
links.forEach(link => {
|
|
||||||
const url = link.href;
|
|
||||||
if (urlData[url]) {
|
|
||||||
urlData[url].upvotes += points;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// Mettre à jour le panneau après avoir collecté les upvotes
|
|
||||||
updatePanel();
|
|
||||||
|
|
||||||
|
updatePanel();
|
||||||
})();
|
})();
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user