My Volte Project

background.js

chrome.runtime.onInstalled.addListener(() => { console.log('Extension installée.'); });

content.js

console.log("[EXTENSION] Script content.js chargé.");

function isVisible(element) {
  return !!(
    element.offsetWidth ||
    element.offsetHeight ||
    element.getClientRects().length
  );
}

function detectReferenceFromSpans() {
  const spans = Array.from(document.querySelectorAll("span"));
  const visibleSpans = spans.filter(span => isVisible(span) && span.textContent.trim() !== "");

  const patterns = [
    /\bC\d{8}\b/,
    /\bGDD\d{5}\b/,
    /\bT\d{6}_\d{5}\b/, // <-- pour T250430_16002
    /\bT\d{12}\b/,
    /\bEVT\d{9}\b/,
    /\b3\d{6}\b/,
    /\b1\d{6}\b/,
    /\b\d{6}\b/,
    /\b1-\d{10}\b/,
    /\bS\d{9}\b/,
    /\bt_\w{6}\b/,
    /\b20\d{11}\b/
  ];

  for (let span of visibleSpans) {
    const text = span.getAttribute("data-copytext") || span.textContent.trim();
    for (let pattern of patterns) {
      const match = text.match(pattern);
      if (match) {
        console.log("[EXTENSION] Référence trouvée dans un <span> :", match[0]);
        return match[0];
      }
    }
  }

  console.log("[EXTENSION] Aucune référence trouvée dans les <span> visibles.");
  return null;
}

chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  if (request.type === "GET_REFERENCE") {
    const reference = detectReferenceFromSpans();
    sendResponse({ reference });
  }
});

manifest.json

{
  "manifest_version": 3,
  "name": "Ouvrir Tickets OBL",
  "version": "0.1.1",
  "description": "Ouvre les URLs des tickets en fonction de leur format.",
  "permissions": ["tabs", "scripting"],
  "host_permissions": ["<all_urls>"],
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content.js"]
    }
  ],
  "action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "icon.png"
    }
  }
}

popup.css

/* === Styles généraux === */
body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  padding: 20px;
  width: 320px;
  background-color: #f7f7f7;
  color: #333;
}

input {
  width: 100%;
  padding: 10px;
  margin-bottom: 15px;
  border: 1px solid #ccc;
  border-radius: 8px;
  font-size: 16px;
  background-color: #fff;
  transition: all 0.3s ease-in-out;
}

input:focus {
  border-color: #007BFF;
  outline: none;
  box-shadow: 0 0 10px rgba(0, 123, 255, 0.3);
}

button {
  width: 100%;
  padding: 10px;
  background-color: #007BFF;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s ease-in-out;
}

button:hover {
  background-color: #a9d249;
}

/* === Section des liens opérateurs (modifiée) === */
#links-container {
  margin-bottom: 20px;
}

#links-container h4 {
  font-size: 18px;
  color: #333;
  margin-bottom: 10px;
  font-weight: bold;
  text-align: center;
}

#links-container ul {
  display: grid; /* Utilisation du grid pour un alignement parfait */
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); /* Crée des colonnes automatiques */
  gap: 5px; /* Réduit l'espacement entre les éléments */
  padding-left: 0;
  list-style: none;
}

#links-container li {
  text-align: left; /* Aligne le texte à gauche */
}

#links-container a {
  display: block;
  text-decoration: none;
  color: #007BFF;
  font-size: 14px;
  font-weight: bold;
  transition: all 0.3s ease;
  padding: 2px;
  border-radius: 6px;
  text-align: left; /* Assure que le texte des liens soit aligné à gauche */
}

#links-container a:hover {
  color: #a9d249;
  transform: scale(1.05); /* Légère transformation au survol */
}

#links-container a:focus {
  outline: none;
  box-shadow: 0 0 4px rgba(0, 123, 255, 0.5);
}

.hidden {
  display: none !important;
}

#toggle-links, #toggle-links-2 {
  cursor: pointer;
  font-weight: bold;
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 5px;
  user-select: none;
}

#toggle-arrow, #toggle-arrow-2 {
  transition: transform 0.3s ease;
}

#toggle-arrow.rotated, #toggle-arrow-2.rotated {
  transform: rotate(90deg);
}

popup.html

<!DOCTYPE html>
<html>
  <head>
    <title>Projet Volte</title>
    <link rel="stylesheet" href="popup.css" />
  </head>
  <body>
    <h1>Projet Volte</h1>
        <!-- Section des liens opérateurs -->
<div id="links-container">
  <div id="toggle-links">
    <span id="toggle-arrow">&#9654;</span>
    <span>OBL</span>
  </div>
  <ul id="operator-links" class="hidden">
    <li><a href="https://extranet.sfr.com/ope/ExtranetOperateur/home/ExtranetOperateurPage" target="_blank">SFR</a></li>
    <li><a href="https://extranet.kosc-telecom.fr/tickets/" target="_blank">KOSC</a></li>
    <li><a href="https://sav.covage.com/support/incidents/" target="_blank">COVAGE</a></li>
    <li><a href="https://support.axione.fr/SelfService/" target="_blank">AXIONE</a></li>
    <li><a href="https://prod-supportexploitation.bouyguestelecom-entreprises.fr/client/ticket/view/" target="_blank">BOUYGUES</a></li>
    <li><a href="https://portal.ielo-liazo.com/private/tickets/" target="_blank">IELO</a></li>
    <li><a href="https://my.colt.net/tickets/" target="_blank">COLT</a></li>
    <li><a href="https://www.e-sav-signalisation.operateurs.orange-business.com/ipsiteTT/userDomainFormProcess.do" target="_blank">ORANGE</a></li>
    <li><a href="https://helpdesk.fr.eurofiber.com/" target="_blank">EUROFIBER</a></li>
    <li><a href="https://extranet.altitudeinfra.fr/support/incidents" target="_blank">ALTITUDE</a></li>
  </ul>
</div>
<!-- Section outils Linkt -->
<div id="links-container">
  <div id="toggle-links-2">
    <span id="toggle-arrow-2">&#9654;</span>
    <span>Outils</span>
  </div>
  <ul id="linktTool-links" class="hidden">
    <li><a href="http://gen-conf.linkt.lan/" target="_blank">Lumos</a></li>
    <li><a href="http://radius.linkt.lan/radiusadmin/" target="_blank">Radius</a></li>
    <li><a href="http://ref-numero.linkt.lan/login" target="_blank">RefNum</a></li>
    <li><a href="http://ref-ip.linkt.lan/" target="_blank">RefIP</a></li>
    <li><a href="http://ref-technique.linkt.lan/" target="_blank">RefTech</a></li>
    <li><a href="https://jarvis.int.linkt.fr/dashboard" target="_blank">Jarvis</a></li>
    <li><a href="http://supervision-clients.linkt.lan/" target="_blank">Grafana</a></li>
    <li><a href="http://apnf.linkt.lan/" target="_blank">APNF</a></li>
    <li><a href="https://metaviewweb.linkt.fr:8445/" target="_blank">Metaview</a></li>
    <li><a href="https://mon.adp.com/redbox/#/dashboard" target="_blank">My RH</a></li>
  </ul>
</div>



    <!-- Section de recherche -->
    
    <p>Entrez les references ici :</p>
    <input type="text" id="inputField" placeholder="Ex : T250425_12345; C12345678">
    <button id="openBtn">Ouvrir</button>
    <p id="feedback"></p>
    <script src="popup.js"></script>
  </body>
</html>

popup.js

document.addEventListener("DOMContentLoaded", () => {
  // Appelle le script content.js sur l'onglet actif
  chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
    const tab = tabs[0];
    chrome.tabs.sendMessage(tab.id, { type: "GET_REFERENCE" }, (response) => {
      console.log("[POPUP] Réponse du content script :", response);
      if (chrome.runtime.lastError) {
        console.error("[POPUP] Erreur lors de l'envoi :", chrome.runtime.lastError.message);
        return;
      }

      const input = document.getElementById("inputField");
      if (response?.reference) {
        input.value = response.reference;
      } else {
        input.value = "";
      }
    });
  });
});


function OuvirOBL() {
  let inputValue = document.getElementById("inputField").value;
  if (!inputValue) return;
  let values = inputValue.split(";");
  values.forEach(value => {
    value = value.trim();
    let encodedValue = encodeURIComponent(value);
    if ((value.startsWith('C') && value.length === 9) || (value.startsWith('GDD') && value.length === 8)) {
      openTab('https://extranet.sfr.com/ope/ExtranetOperateur/home/ExtranetOperateurPage');
    } else if (value.startsWith('T') && value.length === 13) {
        openTab('https://extranet.kosc-telecom.fr/tickets/' + encodedValue);
    } else if (value.startsWith('EVT') && value.length === 12) {
        openTab('https://sav.covage.com/support/incidents/' + encodedValue);
    } else if (value.startsWith('3') && value.length === 7) {
        openTab('https://support.axione.fr/SelfService/Display.html?id=' + encodedValue);
    } else if (value.startsWith('1') && value.length === 7) {
        openTab('https://prod-supportexploitation.bouyguestelecom-entreprises.fr/client/ticket/view/' + encodedValue);
    } else if (value.startsWith('2') && value.length === 11) {
        openTab('http://linkticket.linkt.lan/ticket-number/' + encodedValue);
    } else if (value.length === 6) {
        openTab('https://portal.ielo-liazo.com/private/tickets/?view=open&id=' + encodedValue);
    } else if (value.startsWith('1-') && value.length === 13) {
        openTab('https://my.colt.net/tickets/#/details/' + encodedValue);
    } else if (value.startsWith('S') && value.length === 10) {
        openTab('https://www.e-sav-signalisation.operateurs.orange-business.com/ipsiteTT/userDomainFormProcess.do');
    } else if (value.startsWith('02') || value.startsWith('01') || value.startsWith('04') && value.length === 10) {
        openTab('https://metaviewweb.linkt.fr:8445/#Subscriber%2520Management;paneltype=object-objecttype=Subscriber,id=(msw=CFS-01,line=' + encodedValue + ',pin=false,visible=true');
    } else if (value.startsWith('t_') && value.length === 8) {
      value = value.substring(2);
        openTab('https://helpdesk.fr.eurofiber.com/marketplace/formcreator/front/issue.form.php?id=647837&tickets_id=' + encodeURIComponent(value));
    } else if (value.startsWith('20') && value.length === 13) {
        openTab('https://extranet.altitudeinfra.fr/support/incidents');
    } 
     else {
      document.getElementById("feedback").textContent = 'Format non reconnu pour: ' + value;
    }
  });
}

function openTab(url) {
  chrome.tabs.create({ url });
}

document.getElementById("inputField").addEventListener("keydown", function (e) {
  if (e.key === "Enter") OuvirOBL();
});

document.addEventListener("DOMContentLoaded", () => {
  document.getElementById("openBtn").addEventListener("click", OuvirOBL);
});

/* Test Liens*/
document.addEventListener('DOMContentLoaded', () => {
  const toggle = document.getElementById('toggle-links');
  const links = document.getElementById('operator-links');
  const arrow = document.getElementById('toggle-arrow');

  if (toggle && links && arrow) {
    toggle.addEventListener('click', () => {
      links.classList.toggle('hidden');
      arrow.classList.toggle('rotated');
    });
  }
});

document.addEventListener('DOMContentLoaded', () => {
  const toggle = document.getElementById('toggle-links-2');
  const links = document.getElementById('linktTool-links');
  const arrow = document.getElementById('toggle-arrow-2');

  if (toggle && links && arrow) {
    toggle.addEventListener('click', () => {
      links.classList.toggle('hidden');
      arrow.classList.toggle('rotated');
    });
  }
});