google chrome - Trying to create a simple link caching extension but failing -
i trying make simple extension creates array persists between pages , tabs , stores every image link specific class web page. when click on extension button small html page generates preview of each image stored in array link anchor tag around it.
hello, new chrome extensions , trying make basic image stripper throws images matching class array tabs when each page loaded. here code.
manifest.json
{ "name": "link viewer", "version": "1", "manifest_version" : 2, "browser_action" : { "default_popup" : "history.html", "default_icon" : "icon.png" }, "background" : {"scripts" : ["persistent.js"]}, "content_scripts" : [ { "matches" : ["http://*/*"], "js" : ["injection.js"] } ] } history.html
<h1>image viewer</h1> <div id="list"> <!-- show listed images here --> </div> injection.js // executes every page load var elements = document.getelementsbyclassname("img"); var imagelinks = []; for(var = 0; < elements.length; i++) { imagelinks.push(elements[i].firstchild.src); } chrome.extension.sendrequest(imagelinks); persistent.js
// script gets run once when browser started // declare persistent image array var gifarray = []; // create event listener when requests returned injection script chrome.extension.onrequest.addlistener ( function(linksreturned) { // loop through each returned link for(var = 0; < linksreturned.length; i++) { var exists = false; // loop through each link in array , make sure doesn't exist for(var x = 0; x < gifarray.length; x++) { if(gifarray[x] == linksreturned[i]) { gifarray.splice(x,1); // remove index array exists = true; break; } } if(exists == false) { gifarray.push(linksreturned[i]); } } // links stored , ready displayed on web page } ); // popup html page when clicks on html button window.onload = function() { var div = document.getelementbyid("list"); // loop through each gif , add list for(var = 0; < gifarray.length; i++) { // create anchor element var = document.createelement("a"); // create image element var img = document.createelement("img"); img.setattribute("src",gifarray[i]); // put image inside of anchor a.appendchild(img); // put anchor inside div div.appendchild(a); } } what doing wrong? how can have global list of every image class img indexed?
the code window.onload = { .... } in persistent.js doesn't work popup.
you must separate persistent.js , popup.js, , popup.js must included history.html script.
like this,
history.html
<!doctype html> <html> <head> <script type="text/javascript" src="popup.js"></script> </head> <body> <h1>image viewer</h1> <div id="list"> <!-- show listed images here --> </div> </body> </html> popup.js
// popup html page when clicks on html button window.onload = function() { chrome.extension.sendrequest({type: "getimagelinks"}, function(response) { var div = document.getelementbyid("list"); // loop through each gif , add list for(var = 0; < response.gifarray.length; i++) { // create anchor element var = document.createelement("a"); // create image element var img = document.createelement("img"); img.setattribute("src", response.gifarray[i]); // put image inside of anchor a.appendchild(img); // put anchor inside div div.appendchild(a); } }); } persistent.js
// script gets run once when browser started // declare persistent image array var gifarray = []; // create event listener when requests returned injection script chrome.extension.onrequest.addlistener ( function(request, sender, sendresponse) { if (request.type == 'storeimagelinks') { var linksreturned = request.imagelinks; for(var = 0; < linksreturned.length; i++) { var exists = false; // loop through each link in array , make sure doesn't exist for(var x = 0; x < gifarray.length; x++) { if(gifarray[x] == linksreturned[i]) { exists = true; break; } } if(exists == false) { gifarray.push(linksreturned[i]); } } // links stored , ready displayed on web page } else if (request.type == 'getimagelinks') { sendresponse({gifarray: gifarray}); } } ); injection.js
// executes every page load var elements = document.getelementsbyclassname("img"); var imagelinks = []; for(var = 0; < elements.length; i++) { imagelinks.push(elements[i].firstchild.src); } chrome.extension.sendrequest({type: "storeimagelinks", imagelinks : imagelinks}); extension files in archive (rar)
to try it,
- open this page
- click exntension icon
you see google logo on popup.
Comments
Post a Comment