Snažím sa urobiť jednoduché rozšírenievytvorí pole, ktoré pretrváva medzi stránkami a kartami, a ukladá každý odkaz na obrázok s konkrétnou triedou z webovej stránky. Keď kliknem na tlačidlo rozšírenia, malá html stránka vygeneruje náhľad na každý obrázok, ktorý bol uložený v poli, s odkazom na kotviacu značku okolo.
Dobrý deň, s chrómovými rozšíreniami som nový a somsa snaží vytvoriť základný odstraňovač obrázkov, ktorý pri načítaní každej stránky hodí všetky obrázky so zhodnou triedou do poľa zo všetkých kariet. Tu je môj kód.
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 i = 0; i < elements.length; i++)
{
imageLinks.push(elements[i].firstChild.src);
}
chrome.extension.sendRequest(imageLinks);
persistent.js
// This script gets run once when the browser is started
// Declare Persistent Image Array
var gifArray = [];
// Create an event listener for when requests are returned from the injection script
chrome.extension.onRequest.addListener
(
function(linksReturned)
{
// Loop through each returned link
for(var i = 0; i < linksReturned.length; i++)
{
var exists = false;
// loop through each link in the array and make sure it doesn"t exist
for(var x = 0; x < gifArray.length; x++)
{
if(gifArray[x] == linksReturned[i])
{
gifArray.splice(x,1); // Remove that index from the array
exists = true;
break;
}
}
if(exists == false)
{
gifArray.push(linksReturned[i]);
}
}
// Links are stored and ready to be displayed on web page
}
);
// Popup HTML page when someone clicks on HTML button
window.onload = function()
{
var div = document.getElementById("list");
// Loop through each GIF and add to the list
for(var i = 0; i < gifArray.length; i++)
{
// Create the anchor element
var a = document.createElement("a");
// Create the image element
var img = document.createElement("img");
img.setAttribute("src",gifArray[i]);
// Put the image inside of the anchor
a.appendChild(img);
// Put the anchor inside the div
div.appendChild(a);
}
}
Čo robím zle? Ako môžem mať globálny zoznam každého obrázka s indexovanou triedou img?
odpovede:
2 pre odpoveď č. 1kód window.onload = { .... } v persistent.js nefunguje pre vaše vyskakovacie okno.
Musíte to oddeliť persistent.js a popup.js, a popup.js musia byť zahrnuté do history.html ako scenár.
Ako toto,
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 someone clicks on HTML button
window.onload = function()
{
chrome.extension.sendRequest({type: "getImageLinks"}, function(response) {
var div = document.getElementById("list");
// Loop through each GIF and add to the list
for(var i = 0; i < response.gifArray.length; i++)
{
// Create the anchor element
var a = document.createElement("a");
// Create the image element
var img = document.createElement("img");
img.setAttribute("src", response.gifArray[i]);
// Put the image inside of the anchor
a.appendChild(img);
// Put the anchor inside the div
div.appendChild(a);
}
});
}
persistent.js
// This script gets run once when the browser is started
// Declare Persistent Image Array
var gifArray = [];
// Create an event listener for when requests are returned from the injection script
chrome.extension.onRequest.addListener
(
function(request, sender, sendResponse) {
if (request.type == "storeImageLinks")
{
var linksReturned = request.imageLinks;
for(var i = 0; i < linksReturned.length; i++)
{
var exists = false;
// loop through each link in the array and make sure it 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 are stored and ready to be 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 i = 0; i < elements.length; i++)
{
imageLinks.push(elements[i].firstChild.src);
}
chrome.extension.sendRequest({type: "storeImageLinks", imageLinks : imageLinks});
Tu je moje ukážkové rozšírenie. (crx)
Prípona súborov v archíve (rar)
Skúsiť to,
- otvorené toto strana
- kliknite na ikonu rozšírenia
vo vyskakovacom okne uvidíte logo google.