Je suis en train de construire une extension chrome utilisant Javascript qui récupère les URL des onglets ouverts et enregistre le fichier html, mais le problème avec le html est qu'il ne rend pas complètement les images sur les pages web. J'ai donc modifié mon code pour boucler chaque URL des onglets et ensuite enregistrer chaque page html en tant que fichier image automatiquement en un clic sur l'icône de téléchargement de l'extension chrome. J'ai fait des recherches pendant plus de 2 jours mais rien ne s'est produit. Veuillez voir mes fichiers de code et me guider. Je sais qu'il y a une bibliothèque dans nodejs mais je veux faire du html en jpeg/png en utilisant uniquement l'extension chrome.
Les seules icônes que je n'ai pas jointes sont celles que j'ai utilisées dans cette extension, tout le code que j'ai et le texte de l'extension. popup.js qui est commenté j'ai essayé.
Sortie actuelle du code ci-joint 
Mise à jour de popup.js
Fichier popup.js - Ce fichier contient des fonctions qui récupèrent toutes les URLs des onglets ouverts dans la fenêtre du navigateur.
// script for popup.html
window.onload = () => {
// var html2obj = html2canvas(document.body);
// var queue = html2obj.parse();
// var canvas = html2obj.render(queue);
// var img = canvas.toDataURL("image/png");
let btn = document.querySelector("#btnDL");
btn.innerHTML = "Download";
function display(){
// alert('Click button is pressed')
window.open("image/url");
}
btn.addEventListener('click', display);
}
chrome.windows.getAll({populate:true}, getAllOpenWindows);
function getAllOpenWindows(winData) {
var tabs = [];
for (var i in winData) {
if (winData[i].focused === true) {
var winTabs = winData[i].tabs;
var totTabs = winTabs.length;
console.log("Number of opened tabs: "+ totTabs);
for (var j=0; j<totTabs;j++) {
tabs.push(winTabs[j].url);
// Get the HTML string in the tab_html_string
tab_html_string = get_html_string(winTabs[j].url)
// get the HTML document of each tab
tab_document = get_html_document(tab_html_string)
console.log(tab_document)
let canvasref = document.querySelector("#capture");
canvasref.appendChild(tab_document.body);
html2canvas(document.querySelector("#capture")).then(canvasref => {
document.body.appendChild(canvasref)
var img = canvasref.toDataURL("image/png");
window.open(img)
});
}
}
}
console.log(tabs);
}
function get_html_document(tab_html_string){
/**
* Convert a template string into HTML DOM nodes
*/
var parser = new DOMParser();
var doc = parser.parseFromString(tab_html_string, 'text/html');
return doc;
}
function get_html_string(URL_string){
/**
* Convert a URL into HTML string
*/
let xhr = new XMLHttpRequest();
xhr.open('GET', URL_string, false);
try {
xhr.send();
if (xhr.status != 200) {
alert(`Error ${xhr.status}: ${xhr.statusText}`);
} else {
return xhr.response
}
} catch(err) {
// instead of onerror
alert("Request failed");
}
}Fichier popup.html - Ce fichier représente la fonctionnalité d'icône et de clic sur la barre de recherche du navigateur Chrome.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
<script src= './html2canvas.min.js'></script>
<script src= './jquery.min.js'></script>
<script src='./popup.js'></script>
<title>Capture extension</title>
<!--
- JavaScript and HTML must be in separate files: see our Content Security
- Policy documentation[1] for details and explanation.
-
- [1]: http://developer.chrome.com/extensions/contentSecurityPolicy.html
-->
</head>
<body>
<button id="btnDL"></button>
</body>
</html>Fichier manifest.json - Ce fichier est utilisé par le navigateur Chrome pour exécuter l'extension Chrome.
{
"manifest_version": 2,
"name": "CIP screen capture",
"description": "One-click download for files from open tabs",
"version": "1.4.0.2",
"browser_action": {
"default_popup": "popup.html"
},
"permissions": [
"downloads", "tabs", "<all_urls>"
],
"options_page": "options.html"
}
