Toggling div inside chrome extension content-script - javascript

I am trying to toggle a div using a link in another, with all this being done through the content-script of a chrome extensions, but when I run the unpacked extension I am not able to toggle the div at all...any ideas?
Below is the code for the content script as it sits now.
function createHistoryDiv() {
var divHeight = 97;
var divMargin = 10;
var div = document.createElement("div");
div.id = "history";
var st = div.style;
st.display = "block";
st.zIndex = "10000000";
st.top = "0px";
st.left = "0px";
st.right = "0px";
st.height = divHeight + "%";
st.background = "rgba(255, 255, 255, .01)";
st.margin = divMargin + "px";
st.padding = "5px";
st.border = "5px solid black";
st.color = "black";
st.fontFamily = "sans-serif";
st.fontSize = "36";
st.position = "fixed";
st.overflow = "hidden";
st.boxSizing = "border-box";
st.pointerEvents = "none";
document.documentElement.appendChild(div);
var heightInPixels = parseInt(window.getComputedStyle(div).height);
st.height = heightInPixels + 'px';
//document.body.style.webkitTransform = "translateY("
//+ (heightInPixels + (2 * divMargin))+ "px)";
return div;
}
function buildDivContent(historyDiv, data) {
var ul = document.createElement('ul');
historyDiv.appendChild(ul);
for (var i = 0, ie = data.length; i < ie; ++i) {
var a = document.createElement('a');
a.href = data[i];
a.appendChild(document.createTextNode(data[i]));
var li = document.createElement('li');
li.style.color = "black";
li.style.display = "inline";
li.style.wordBreak = "break all";
li.appendChild(a);
a.style.color = "black";
a.style.fontSize = "24px";
a.style.fontFamily = "sans-serif";
a.style.linkDecoration = "none";
ul.appendChild(li);
}
}
chrome.runtime.sendMessage({ action: "buildTypedUrlList" }, function(data) {
var historyDiv = createHistoryDiv();
buildDivContent(historyDiv, data);
});
function logoDiv(){
var div2 = document.createElement("div");
div2.id = "logo";
var st = div2.style;
st.display = "block";
st.zIndex = "10000001";
st.bottom = "0px";
//st.left = "0px";
st.right = "0px";
//st.height = "42px";
//st.width = "210px";
st.background = "rgba(255, 255, 255,1)";
st.padding = "5px";
st.margin = "10px";
st.border = "5px solid black";
st.color = "black";
st.fontFamily = "sans-serif";
st.position = "fixed";
st.overflow = "hidden";
st.boxSizing = "border-box";
//st.pointerEvents = "none";
document.documentElement.appendChild(div2);
div2.innerHTML = div2.innerHTML + "TRANSPARENCY";
//div2.innerHTML = div2.innerHTML + "<p style = \"display:block;font-size:24px;font-family:sans-serif;margin:0;padding:5px;color:black;\">TRANSPARENCY</p>";
return div2;
function toggle_visibility(id) {
var e = document.getElementById("history");
if(e.style.display == "block")
e.style.display = "hidden";
else
e.style.display = "block";
}
}
chrome.runtime.sendMessage({ action: "buildTypedUrlList" }, function(data){
var titleDiv = logoDiv();
buildDivContent(titleDiv);
});


There are various problems with your code (e.g. display: hidden is not an allowed key-value pair).
So, in order to be functional, the content script should look like this (anything not included below should be removed):
function createHistoryDiv() {
/* No change here. Place the code exactly
* as it is in the code you posted */
}
function buildDivContent(historyDiv, data) {
/* No change here. Place the code exactly
* as it is in the code you posted */
}
function createToggleDiv(historyDiv) {
/* Create the toggle div */
var div = document.createElement("div");
div.textContent = "TRANSPARENCY";
/* Style the toggle div */
var st = div.style;
st.display = "block";
st.zIndex = "10000001";
st.bottom = "0px";
st.right = "0px";
st.background = "rgb(255, 255, 255)";
st.padding = "10px";
st.margin = "10px";
st.border = "5px solid black";
st.color = "black";
st.fontFamily = "sans-serif";
st.fontSize = "24px";
st.position = "fixed";
st.overflow = "hidden";
st.boxSizing = "border-box";
st.cursor = "pointer";
/* Make the toggle div behave
* (i.e. toggle `historyDiv` upon 'click') */
div.addEventListener("click", function(evt) {
evt.preventDefault();
var st = historyDiv.style;
st.display = (st.display == "block") ? "none" : "block";
});
/* Insert the toggle div into the DOM */
document.documentElement.appendChild(div);
}
chrome.runtime.sendMessage({ action: "buildTypedUrlList" }, function(data) {
var historyDiv = createHistoryDiv();
var toggleDiv = createToggleDiv(historyDiv);
buildDivContent(historyDiv, data);
});

Related

How to download image from another page HTML/JavaScript

I wrote a code where it displays only images from different website. I want to download them when i click their child download button. Problem is that it opens image it's self in separate page. Is there any awy to not make it open different page and download the parent image. Here's how I'm trying to download it:
<div class="container">
<div class="row">
<div class="col-sm">
<div id="image_container"></div>
</div>
</div>
</div>
</div>
<script>
for (let i = 0; i < 23; i++) {
Draw_Canvas(i);
document.querySelector("#image" + i).onclick = () => {
console.log(document.getElementById("image" + i).src);
localStorage.setItem("Image", document.getElementById("image" + i).src);
}
}
function Draw_Canvas(i) {
var div = document.createElement('div');
div.id = "image" + i;
div.style.borderRadius = "1%";
div.style.width = "200px";
div.style.height = "200px";
div.style.border = "1px solid";
div.style.padding = "0";
div.style.margin = "0";
var divParent = document.getElementById("image_container").appendChild(div);
var img = new Image();
img.src = "https://iynmemes.netlify.app/images_memes/meme" + i + ".jpg";
img.id = "image" + i;
img.loading = "lazy";
img.style.width = "100%";
img.style.height = "100%";
img.style.objectFit = "contain";
img.className = "img-fluid";
divParent.appendChild(img);
//Download Button Style
var downloadButton = document.createElement("button");
divParent.appendChild(downloadButton);
downloadButton.textContent = "💾";
downloadButton.style.borderRadius = "100%";
downloadButton.style.backgroundColor = "orange";
downloadButton.style.width = "50px";
downloadButton.style.height = "50px";
downloadButton.style.fontSize = "18px";
downloadButton.style.position = "relative";
downloadButton.style.float = "right";
downloadButton.style.bottom = "55px";
downloadButton.style.display = "none";
div.addEventListener("mouseover", function () {
downloadButton.style.display = "block";
});
div.addEventListener("mouseout", function () {
downloadButton.style.display = "none";
});
downloadButton.addEventListener("click", function () {
var a = document.createElement('a');
a.href = img.src;
a.download = "Meme (IYN)";
a.click();
});
}
</script>

Images not loading from different website in Safari HTML/JavaScript

I made website where are only pictures in it and I'm displaying those images in my "main" website. In chrome, it works fine but in safari the aren't showing up at all. Even createElement for div isn't working. The problem is this link. Here's my code:
for (let i = 0; i < 11; i++) {
Draw_Images(i);
}
function Draw_Images(i) {
var div = document.createElement('div');
div.id = "meme" + i;
div.style.borderRadius = "1%";
div.style.width = "200px";
div.style.height = "200px";
div.style.border = "1px solid";
div.style.padding = "0";
div.style.margin = "0";
var divParent = document.getElementById("memes_container").appendChild(div);
var img = new Image();
img.src = "https://iynmemes.netlify.app/images_memes/meme" + i + ".jpg";
img.id = "image_meme" + i;
img.style.width = "100%";
img.style.height = "100%";
img.style.objectFit = "contain";
img.className = "img-fluid";
img.alt = i;
img.crossOrigin = 'anonymous';
divParent.appendChild(img);
}
<div class="container">
<div class="row">
<div class="col-sm">
<div id="memes_container"></div>
</div>
</div>
</div>

So removing some stuff worked for me. Basically Safari doesn't support navigator.userAgentData so it wasn't displaying images for that reason. So i had to remove it:
for (let i = 0; i < 11; i++) {
Draw_Images(i);
}
function Draw_Images(i) {
const isMobile = navigator.userAgentData.mobile; //REMOVED THIS AND IT WORKED!!
var div = document.createElement('div');
div.id = "meme" + i;
div.style.borderRadius = "1%";
div.style.width = "200px";
div.style.height = "200px";
div.style.border = "1px solid";
div.style.padding = "0";
div.style.margin = "0";
var divParent = document.getElementById("memes_container").appendChild(div);
var img = new Image();
img.src = "https://iynmemes.netlify.app/images_memes/meme" + i + ".jpg";
img.id = "image_meme" + i;
img.style.width = "100%";
img.style.height = "100%";
img.style.objectFit = "contain";
img.className = "img-fluid";
img.alt = i;
img.crossOrigin = 'anonymous';
divParent.appendChild(img);
}

Create an object with input values and add it to an existing array JavaScript

I am following a JavaScript course and I have to create a list of links with JavaScript, by creating the HTML elements with JS, add the style, and insert a form with JS as well, in order to allow the user to insert a new link on the list.
The problem, is that I could not make the function works to be able to insert the new object(which takes form inputs values) in the existing array and show the list updated with the new link.
Any help on this will be highly appreciated ! and consider that I am a beginner
var listeLiens = [{
titre: "So Foot",
url: "http://sofoot.com",
auteur: "yann.usaille"
},
{
titre: "Guide d'autodéfense numérique",
url: "http://guide.boum.org",
auteur: "paulochon"
},
{
titre: "L'encyclopédie en ligne Wikipedia",
url: "http://Wikipedia.org",
auteur: "annie.zette"
},
];
var dlElt = document.createElement("dl");
listeLiens.forEach(function(mot) {
var dtElt = document.createElement("dt");
var titreElt = document.createElement("a");
titreElt.textContent = mot.titre;
titreElt.href = mot.url;
var urlElt = document.createElement("span");
urlElt.textContent = mot.url;
var auteurElt = document.createElement("p");
auteurElt.textContent = "Ajouté par " + mot.auteur;
//STYLES
dtElt.style.marginBottom = "10px";
dtElt.style.backgroundColor = "#fff";
dtElt.style.padding = "15px";
titreElt.style.color = "#428bca";
titreElt.style.fontSize = "22px";
titreElt.style.textDecoration = "none";
titreElt.style.fontWeight = "bold";
urlElt.style.marginLeft = "6px";
urlElt.style.fontSize = "16px";
auteurElt.style.paddingTop = "5px";
auteurElt.style.margin = "0px";
dlElt.appendChild(dtElt);
dtElt.appendChild(titreElt);
dtElt.appendChild(urlElt);
dtElt.appendChild(auteurElt);
});
//form and add new links function
var zoneForm = document.createElement("div");
var boutonElt = document.createElement("button");
boutonElt.textContent = "Ajouter un lien";
boutonElt.style.borderRadius = "5px";
boutonElt.style.padding = "3px";
var form = document.createElement("form");
form.id = "nouveauLien";
form.style.width = "100%";
var auteur = document.createElement("input");
auteur.placeholder = "Enter link name";
auteur.id = "auteur";
auteur.setAttribute('type', "text");
auteur.setAttribute('name', "auteur");
var titre = document.createElement("input");
titre.placeholder = "Enter title name";
titre.style.marginLeft = "40px";
titre.style.width = "18%";
titre.id = "titre";
titre.setAttribute('type', "text");
titre.setAttribute('name', "titre");
var url = document.createElement("input");
url.placeholder = "Enter link address";
url.style.marginLeft = "40px";
url.style.width = "23%";
url.setAttribute('type', "text");
url.setAttribute('name', "url");
var boutonValider = document.createElement("input");
boutonValider.style.marginLeft = "40px";
boutonValider.style.borderRadius = "5px";
boutonValider.style.width = "7%";
boutonValider.style.padding = "3px";
boutonValider.setAttribute('type', "submit");
boutonValider.setAttribute('value', "Ajouter");
form.appendChild(auteur);
form.appendChild(titre);
form.appendChild(url);
form.appendChild(boutonValider);
zoneForm.appendChild(boutonElt);
boutonElt.addEventListener("click", function() {
if (boutonElt) {
boutonElt.style.display = 'none';
form.style.display = 'inline-block';
zoneForm.appendChild(form);
} else {
document.getElementById("nouveauLien").style.display = "none";
}
});
boutonValider.addEventListener("click", function() {
var message = document.createElement("p");
message.textContent = "link already added! ";
var message2 = "Try again";
var newObject = {
titre: document.getElementsByName('titre').value,
url: document.getElementsByName('url').value,
auteur: document.getElementsByName('auteur').value
};
listeLiens.push(newObject);
if (boutonValider) {
boutonElt.style.display = 'none';
document.getElementById("nouveauLien").style.display = "none";
return message;
} else {
return message2;
}
});
document.getElementById("contenu").appendChild(zoneForm);
document.getElementById("contenu").appendChild(dlElt);
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
background-color: #eee;
margin-left: 30px;
margin-right: 30px;
}
span {
font-weight: normal;
font-size: 80%;
}
.lien {
background: white;
padding: 10px;
margin-bottom: 10px;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="../css/liensweb.css">
<title>Activity 2</title>
</head>
<body>
<h1>Activity 2</h1>
<!-- New elements into this tag -->
<div id="contenu">
</div>
<script src="../js/liensweb.js"></script>
</body>
</html>
Thank you very much!

I've corrected several mistakes from your code, following is the working code,
var listeLiens = [{
titre: "So Foot",
url: "http://sofoot.com",
auteur: "yann.usaille"
},
{
titre: "Guide d'autodéfense numérique",
url: "http://guide.boum.org",
auteur: "paulochon"
},
{
titre: "L'encyclopédie en ligne Wikipedia",
url: "http://Wikipedia.org",
auteur: "annie.zette"
},
];
var dlElt = document.createElement("dl");
listeLiens.forEach(function(mot) {
appendObjToList(mot);
});
function appendObjToList(mot) {
var dtElt = document.createElement("dt");
var titreElt = document.createElement("a");
titreElt.textContent = mot.titre;
titreElt.href = mot.url;
var urlElt = document.createElement("span");
urlElt.textContent = mot.url;
var auteurElt = document.createElement("p");
auteurElt.textContent = "Ajouté par " + mot.auteur;
//STYLES
dtElt.style.marginBottom = "10px";
dtElt.style.backgroundColor = "#fff";
dtElt.style.padding = "15px";
titreElt.style.color = "#428bca";
titreElt.style.fontSize = "22px";
titreElt.style.textDecoration = "none";
titreElt.style.fontWeight = "bold";
urlElt.style.marginLeft = "6px";
urlElt.style.fontSize = "16px";
auteurElt.style.paddingTop = "5px";
auteurElt.style.margin = "0px";
dlElt.appendChild(dtElt);
dtElt.appendChild(titreElt);
dtElt.appendChild(urlElt);
dtElt.appendChild(auteurElt);
}
//form and add new links function
var zoneForm = document.createElement("div");
var boutonElt = document.createElement("button");
boutonElt.textContent = "Ajouter un lien";
boutonElt.style.borderRadius = "5px";
boutonElt.style.padding = "3px";
var form = document.createElement("form");
form.id = "nouveauLien";
form.style.width = "100%";
var auteur = document.createElement("input");
auteur.placeholder = "Enter link name";
auteur.id = "auteur";
auteur.setAttribute('type', "text");
auteur.setAttribute('name', "auteur");
var titre = document.createElement("input");
titre.placeholder = "Enter title name";
titre.style.marginLeft = "40px";
titre.style.width = "18%";
titre.id = "titre";
titre.setAttribute('type', "text");
titre.setAttribute('name', "titre");
var url = document.createElement("input");
url.placeholder = "Enter link address";
url.style.marginLeft = "40px";
url.style.width = "23%";
url.setAttribute('type', "text");
url.setAttribute('name', "url");
var boutonValider = document.createElement("input");
boutonValider.style.marginLeft = "40px";
boutonValider.style.borderRadius = "5px";
boutonValider.style.width = "7%";
boutonValider.style.padding = "3px";
boutonValider.setAttribute('type', "button");
boutonValider.setAttribute('value', "Ajouter");
form.appendChild(auteur);
form.appendChild(titre);
form.appendChild(url);
form.appendChild(boutonValider);
zoneForm.appendChild(boutonElt);
boutonElt.addEventListener("click", function() {
if (boutonElt) {
boutonElt.style.display = 'none';
form.style.display = 'inline-block';
zoneForm.appendChild(form);
} else {
document.getElementById("nouveauLien").style.display = "none";
}
});
boutonValider.addEventListener("click", function() {
var message = document.createElement("p");
message.textContent = "link already added! ";
var message2 = "Try again";
var newObject = {
titre: document.getElementById('titre').value,
url: document.getElementsByName('url')[0].value,
auteur: document.getElementById('auteur').value
};
listeLiens.push(newObject);
appendObjToList(newObject);
if (boutonValider) {
form.style.display = 'none';
boutonElt.style.display = 'block';
document.getElementById("nouveauLien").style.display = "none";
return message;
} else {
return message2;
}
});
document.getElementById("contenu").appendChild(zoneForm);
document.getElementById("contenu").appendChild(dlElt);
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
background-color: #eee;
margin-left: 30px;
margin-right: 30px;
}
span {
font-weight: normal;
font-size: 80%;
}
.lien {
background: white;
padding: 10px;
margin-bottom: 10px;
}
<h1>Activity 2</h1>
<!-- New elements into this tag -->
<div id="contenu">
</div>
As to why it didn't work earlier, here are the mistakes,
Initially when the page loaded, you populated 3 list objects in the DOM, but after user adds one more object, it was not updated in the DOM, but only in the list object.
The show/hide actions for the form wasn't right. Hiding a container will hide all its children but not vice versa.
document.getElementById returns an element whereas document.getElementsByName returns an array of elements, you can read the docs for more on similar functions.
You made the boutonValider to be of type 'submit' which would try to post the form to empty url and reload the page every time that button is clicked, it has to be of type 'button' if you're going to handle everything in javascript.

How to add space between two images?

How to add space between two images in same cell in JavaScript? Below is the code, I want to add space between download and delete button.
var cell = row.insertCell();
var img = document.createElement('img');
img.src = '/ock/images/oess_images/item_download16.png';
img.alt = "Download document";
img.border = "0";
img.style.cursor = "pointer";
img.longDesc = "location.href='/download.php?docid=" + jsonData.suppdocs[i].docid + "'";
img.onclick = function () {
eval(this.longDesc)
};
cell.appendChild(img);
cell.align = "left";
cell.className = "field";
if (document.mainform.candeletedoc.value == 1) {
var img = document.createElement('img');
img.src = '/ock/images/oess_images/item_delete16.png';
img.alt = "Delete document";
img.border = "0";
img.style.cursor = "pointer";
img.longDesc = "deleteDocument(" + jsonData.suppdocs[i].docid + ")";
img.onclick = function () {
eval(this.longDesc)
};
cell.appendChild(img);
cell.align = "center";
cell.className = "field";
} //end if

Try adding a margin to one of the photos. Or make the boarder larger.
img.border = "5";
Hope this helps

How do you stop a Child Element from appending multiple times?

Okay I know you have to use the removeChild() method, but how and where? So I'm trying to make a script that tells me the width and height of the window size so its easier to make media queries in CSS. Okay I know how to do this website by website basis, but I want to make this script where it can apply to ALL websites which is WHY I have to have the appendChild. Everything works the way I want it too, but it keeps appending if you see this in the firebug tool.
The only thing one needs to do to see the code in action is to add the onresize="getWinSize()"; to the body.
Also if there is a better way to write this let me know (: Please no jQuery.
<body onresize="getWinSize()";>
Here is the code.
function getWinSize () {
var newDiv = document.createElement('div');
newDiv.id = "windowSizeOutput";
document.body.appendChild(newDiv);
var wd = window.innerWidth;
var ht = window.innerHeight;
var display = document.getElementById("windowSizeOutput");
display.style.background = "white";
display.style.height = "45px";
display.style.width = "100px";
display.style.border = "2px solid black";
display.style.position = "fixed";
display.style.left = "10px";
display.style.top = "200px";
display.innerHTML = "Width: " + wd + "px" + " Height: " + ht + "px";
}

In the getWinSize() function you can always check for the element existence and then remove it if it already exists. Something like this:
function getWinSize () {
var element = document.getElementById("windowSizeOutput");
if(element)
element.parentNode.removeChild(element);
var newDiv = document.createElement('div');
newDiv.id = "windowSizeOutput";
document.body.appendChild(newDiv);
var wd = window.innerWidth;
var ht = window.innerHeight;
var display = document.getElementById("windowSizeOutput");
display.style.background = "white";
display.style.height = "45px";
display.style.width = "100px";
display.style.border = "2px solid black";
display.style.position = "fixed";
display.style.left = "10px";
display.style.top = "200px";
display.innerHTML = "Width: " + wd + "px" + " Height: " + ht + "px";
}

You don't necessarily need to remove the element every time, you can just update its content
Either by checking if it is already in the document:
function getWinSize() {
var display = document.getElementById("windowSizeOutput");
if (!display) {
display = document.createElement('div');
display.id = "windowSizeOutput";
document.body.appendChild(display);
var wd = window.innerWidth;
var ht = window.innerHeight;
display.style.background = "white";
display.style.height = "45px";
display.style.width = "100px";
display.style.border = "2px solid black";
display.style.position = "fixed";
display.style.left = "10px";
display.style.top = "200px";
}
display.innerHTML = "Width: " + wd + "px" + " Height: " + ht + "px";
}
Or by saving the node out of the scope of the function
var display = null;
function getWinSize() {
if (!display) {
display = document.createElement('div');
display.id = "windowSizeOutput";
document.body.appendChild(display);
var wd = window.innerWidth;
var ht = window.innerHeight;
display.style.background = "white";
display.style.height = "45px";
display.style.width = "100px";
display.style.border = "2px solid black";
display.style.position = "fixed";
display.style.left = "10px";
display.style.top = "200px";
}
display.innerHTML = "Width: " + wd + "px" + " Height: " + ht + "px";
}
(And you can eventually put the initialization code in another function for clarity)

Categories

Resources