I have some javascript code which runs fine and as expected when I paste it into the console, however, when I run it from a bookmarklet I get an error in the console, where the browser appears to have deleted the backslashes escaping a quote mark, making the code not work. Here's my code:
javascript:(
function() {
function keyDown(e){
if (e.code == "KeyE")
{
if (document.getElementById("bookmarksterpopup").style.visibility == "hidden") {
document.getElementById("bookmarksterpopup").style.visibility = "visible";
}
else {
document.getElementById("bookmarksterpopup").style.visibility = "hidden";
}
}
}
window.bookmarkster_popup_remove = function() {
document.getElementById("bookmarksterpopup").remove();
window.removeEventListener('keydown', keyDown, false);
}
window.bookmarkster_remove = function() {
document.getElementById("bookmarkster").remove();
}
window.bookmarkster_popup_make = function() {
let site = prompt("Website?");
let width = prompt("Width?",1000);
let height = prompt("height?",700);
document.body.innerHTML+="<div id=bookmarksterpopup style='width:"+(parseInt(width)+4)+"px;height:"+(parseInt(height)+50)+"px;z-index: 100000000001;background-color:#363636;min-height:50px;position:absolute;top:0px;left:0px;'>\
<a style='position:relative;top:10px;color:white;' href='#' onclick='bookmarkster_popup_remove()'>Close popup window</a>\
<iframe style='width: "+width+"px; height: "+height+"px; z-index: 100000000000; position: relative; top: 50px; right: 0px;' src='"+site+"'>\
</div>";
addListeners();
var offX;
var offY;
function addListeners(){
document.getElementById('bookmarksterpopup').addEventListener('mousedown', mouseDown, false);
window.addEventListener('mouseup', mouseUp, false);
window.addEventListener('keydown', keyDown, false);
}
function mouseUp()
{
window.removeEventListener('mousemove', divMove, true);
}
function mouseDown(e){
var div = document.getElementById('bookmarksterpopup');
offY= e.clientY-parseInt(div.offsetTop);
offX= e.clientX-parseInt(div.offsetLeft);
window.addEventListener('mousemove', divMove, true);
}
function divMove(e){
var div = document.getElementById('bookmarksterpopup');
div.style.position = 'absolute';
div.style.top = (e.clientY-offY) + 'px';
div.style.left = (e.clientX-offX) + 'px';
}
}
var oglink = document.querySelector("link[rel*='icon']");
if (oglink) var ogicon = oglink.href;
else var ogicon = "null";
var ogtitle = document.title;
var title = undefined;
var isCloaking = false;
var iconlink = undefined;
var cloakingId = undefined;
window.bookmarkster_cloak_set = function() {
if (!isCloaking) {
isCloaking = true;
var iconselect = prompt("Icon? Type '1' for google docs, '2' for google drive, '3' for google classroom, or type your own link");
if (iconselect == "1")
{
iconlink = "https://ssl.gstatic.com/docs/doclist/images/mediatype/icon_1_document_x16.png";
}
else if (iconselect == "2")
{
iconlink = "https://ssl.gstatic.com/docs/doclist/images/infinite_arrow_favicon_5.ico";
}
else if (iconselect == "3")
{
iconlink = "https://edu.google.com/images/svg/gsuite-icons/classroom.svg";
}
else iconlink = iconselect
title = prompt("What should the title be?");
var cloak = function() {
var link = document.querySelector("link[rel*='icon']") || document.createElement('link');
link.type = 'image/x-icon';
link.rel = 'shortcut icon';
link.href = iconlink;
document.title = title
document.getElementsByTagName('head')[0].appendChild(link);
if (!isCloaking) clearInterval(cloakingId);
}
cloakingId = setInterval(cloak,1000);
}
else {
title = prompt("What should the title be?");
var iconselect = prompt("Icon? Type '1' for google docs, '2' for google drive, '3' for google classroom, or type your own link");
if (iconselect == "1")
{
iconlink = "https://ssl.gstatic.com/docs/doclist/images/mediatype/icon_1_document_x16.png";
}
else if (iconselect == "2")
{
iconlink = "https://ssl.gstatic.com/docs/doclist/images/infinite_arrow_favicon_5.ico";
}
else if (iconselect == "3")
{
iconlink = "https://edu.google.com/images/svg/gsuite-icons/classroom.svg";
}
else iconlink = iconselect;
}
}
window.bookmarkster_cloak_reset = function() {
title = ogtitle;
iconlink = ogicon;
isCloaking = false;
}
window.bookmarkster_back = function() {
document.getElementById("bookmarkster").innerHTML = "<a href='javascript:void(0);' onclick='bookmarkster_remove()'>Remove</a>\
<br>\
<a href='javascript:void(0);' onclick='bookmarkster_popup_menu()'>Popup window</a>\
<br>\
<a href='javascript:void(0);' onclick='bookmarkster_cloak_menu()'>Change page title and icon</a>\
<br>\
<a href='javascript:(function () { var script = document.createElement(\"script\"); script.src=\"//cdn.jsdelivr.net/npm/eruda\"; document.body.appendChild(script); script.onload = function () { eruda.init() } })();'>Inspect Element</a>\
<br>\
<a href='javascript:(function(e,n,o,t){o=e.body,t=%22true%22==o[n],o[n]=t%3F%22false%22:%22true%22,e.designMode=t%3F%22off%22:%22on%22})(document,%22contentEditable%22)' >Edit Page content (toggleable)</a>";
}
window.bookmarkster_popup_menu = function() {
document.getElementById("bookmarkster").innerHTML = "<a href='javascript:void(0);' onclick='bookmarkster_back()'>Go Back</a>\
<br>\
<a href='javascript:void(0);' onclick='bookmarkster_popup_make()'>Make popup window</a>\
<a href='javascript:void(0);' onclick='bookmarkster_popup_remove()'>Remove popup window</a>";
}
window.bookmarkster_cloak_menu = function() {
document.getElementById("bookmarkster").innerHTML = "<a href='javascript:void(0);' onclick='bookmarkster_back()'>Go Back</a>\
<br>\
<a href='javascript:void(0);' onclick='bookmarkster_cloak_set()'>Set title and icon</a>\
<br>\
<a href='javascript:void(0);' onclick='bookmarkster_cloak_reset()'>Reset title and icon</a>";
}
document.body.innerHTML += "<div id=bookmarkster style='color:white;height:200px;min-height:1px;width:250px;background-color:gray;z-index: 100000000001;position:absolute;top:0px;left:0px;'>\
<a href='javascript:void(0);' onclick='bookmarkster_remove()'>Remove</a>\
<br>\
<a href='javascript:void(0);' onclick='bookmarkster_popup_menu()'>Popup window</a>\
<br>\
<a href='javascript:void(0);' onclick='bookmarkster_cloak_menu()'>Change page title and icon</a>\
<br>\
<a href='javascript:(function () { var script = document.createElement(\"script\"); script.src=\"//cdn.jsdelivr.net/npm/eruda\"; document.body.appendChild(script); script.onload = function () { eruda.init() } })();'>Inspect Element</a>\
<br>\
<! –– The error happens on the line below -- >\
<a href='javascript:(function(e,n,o,t){o=e.body,t=\"true\"==o[n],o[n]=t?\"false\":\"true\",e.designMode=t?\"off\":\"on\"})(document,\"contentEditable\"' >Edit Page content (toggleable)</a>\
</div>";
}
)();
And the error happens here: <a href='javascript:(function(e,n,o,t){o=e.body,t=\"true but the console shows this code having run: <a href='javascript:(function(e,n,o,t){o=e.body,t="true So for some reason it runs a different piece of code to what I put in.
I fixed all of the syntax errors but there are still a lot of problems with this code. Hope this works for the most part! I strongly encourage you to install VSCode for writing code; it helps you catch lots of errors. I also would recommend checking out MDN (Mozilla Developer Network) as a general reference for HTML, CSS, JavaScript, and more.
(function () {
function keyDown(e) {
if (e.code == "KeyE") {
if (
document.getElementById("bookmarksterpopup").style.visibility ==
"hidden"
) {
document.getElementById("bookmarksterpopup").style.visibility =
"visible";
} else {
document.getElementById("bookmarksterpopup").style.visibility =
"hidden";
}
}
}
window.bookmarkster_popup_remove = function () {
document.getElementById("bookmarksterpopup").remove();
window.removeEventListener("keydown", keyDown, false);
};
window.bookmarkster_remove = function () {
document.getElementById("bookmarkster").remove();
};
window.bookmarkster_popup_make = function () {
let site = prompt("Website?");
let width = prompt("Width?", 1000);
let height = prompt("height?", 700);
document.body.innerHTML += /*html*/ `
<div
id=bookmarksterpopup
style="
width: ${parseInt(width, 10) + 4}px;
height: ${parseInt(height, 10) + 50}px;
z-index: 100000000001;
background-color: #363636;
min-height: 50px;
position: absolute;
top: 0px;
left: 0px;
"
>
<a
style="position: relative; top: 10px; color: white;"
href="#"
onclick="bookmarkster_popup_remove()"
>
Close popup window
</a>
<iframe
style="
width: ${width}px;
height: ${height}px;
z-index: 100000000000;
position: relative;
top: 50px;
right: 0px;
"
src="${site}"
>
</div>`;
addListeners();
var offX;
var offY;
function addListeners() {
document
.getElementById("bookmarksterpopup")
.addEventListener("mousedown", mouseDown, false);
window.addEventListener("mouseup", mouseUp, false);
window.addEventListener("keydown", keyDown, false);
}
function mouseUp() {
window.removeEventListener("mousemove", divMove, true);
}
function mouseDown(e) {
var div = document.getElementById("bookmarksterpopup");
offY = e.clientY - parseInt(div.offsetTop);
offX = e.clientX - parseInt(div.offsetLeft);
window.addEventListener("mousemove", divMove, true);
}
function divMove(e) {
var div = document.getElementById("bookmarksterpopup");
div.style.position = "absolute";
div.style.top = e.clientY - offY + "px";
div.style.left = e.clientX - offX + "px";
}
};
var oglink = document.querySelector('link[rel*="icon"]');
if (oglink) var ogicon = oglink.href;
else var ogicon = "null";
var ogtitle = document.title;
var title = undefined;
var isCloaking = false;
var iconlink = undefined;
var cloakingId = undefined;
window.bookmarkster_cloak_set = function () {
if (!isCloaking) {
isCloaking = true;
var iconselect = prompt(
'Icon? Type "1" for google docs, "2" for google drive, "3" for google classroom, or type your own link'
);
if (iconselect == "1") {
iconlink =
"https://ssl.gstatic.com/docs/doclist/images/mediatype/icon_1_document_x16.png";
} else if (iconselect == "2") {
iconlink =
"https://ssl.gstatic.com/docs/doclist/images/infinite_arrow_favicon_5.ico";
} else if (iconselect == "3") {
iconlink =
"https://edu.google.com/images/svg/gsuite-icons/classroom.svg";
} else iconlink = iconselect;
title = prompt("What should the title be?");
var cloak = function () {
var link =
document.querySelector('link[rel*="icon"]') ||
document.createElement("link");
link.type = "image/x-icon";
link.rel = "shortcut icon";
link.href = iconlink;
document.title = title;
document.getElementsByTagName("head")[0].appendChild(link);
if (!isCloaking) clearInterval(cloakingId);
};
cloakingId = setInterval(cloak, 1000);
} else {
title = prompt("What should the title be?");
var iconselect = prompt(
'Icon? Type "1" for google docs, "2" for google drive, "3" for google classroom, or type your own link'
);
if (iconselect == "1") {
iconlink =
"https://ssl.gstatic.com/docs/doclist/images/mediatype/icon_1_document_x16.png";
} else if (iconselect == "2") {
iconlink =
"https://ssl.gstatic.com/docs/doclist/images/infinite_arrow_favicon_5.ico";
} else if (iconselect == "3") {
iconlink =
"https://edu.google.com/images/svg/gsuite-icons/classroom.svg";
} else iconlink = iconselect;
}
};
window.bookmarkster_cloak_reset = function () {
title = ogtitle;
iconlink = ogicon;
isCloaking = false;
};
window.bookmarkster_back = function () {
document.getElementById("bookmarkster").innerHTML = /*html*/ `
<a href="javascript:void(0);" onclick="bookmarkster_remove()">Remove</a>
<br>
<a href="javascript:void(0);" onclick="bookmarkster_popup_menu()">Popup window</a>
<br>
<a href="javascript:void(0);" onclick="bookmarkster_cloak_menu()">Change page title and icon</a>
<br>
<a
href="javascript:(function () {
var script = document.createElement('script');
script.src = '//cdn.jsdelivr.net/npm/eruda';
document.body.appendChild(script);
script.onload = function () { eruda.init() }
})();"
>Inspect Element</a>
<br>
<a href='javascript:(function(e,n,o,t) {o=e.body,t="true"==o[n],o[n]=t?"false":"true",e.designMode=t?"off":"on"})(document,"contentEditable")'>
Edit Page content (toggleable)
</a>
`;
};
window.bookmarkster_popup_menu = function () {
document.getElementById("bookmarkster").innerHTML = /*html*/ `
<a href="javascript:void(0);" onclick="bookmarkster_back()">Go Back</a>
<br>
<a href="javascript:void(0);" onclick="bookmarkster_popup_make()">Make popup window</a>
<a href="javascript:void(0);" onclick="bookmarkster_popup_remove()">Remove popup window</a>
`;
};
window.bookmarkster_cloak_menu = function () {
document.getElementById("bookmarkster").innerHTML = /*html*/ `
<a href="javascript:void(0);" onclick="bookmarkster_back()">Go Back</a>
<br>
<a href="javascript:void(0);" onclick="bookmarkster_cloak_set()">Set title and icon</a>
<br>
<a href="javascript:void(0);" onclick="bookmarkster_cloak_reset()">Reset title and icon</a>
`;
};
document.body.innerHTML += /*html*/ `
<div
id=bookmarkster
style="
color:white;
height:200px;
min-height:1px;
width:250px;
background-color:gray
;z-index: 100000000001;
position:absolute;
top:0px;
left:0px;
"
>
<a href="javascript:void(0);" onclick="bookmarkster_remove()">Remove</a>
<br>
<a href="javascript:void(0);" onclick="bookmarkster_popup_menu()">Popup window</a>
<br>
<a href="javascript:void(0);" onclick="bookmarkster_cloak_menu()">Change page title and icon</a>
<br>
<a href='javascript:(function () { var script = document.createElement("script"); script.src="//cdn.jsdelivr.net/npm/eruda"; document.body.appendChild(script); script.onload = function () { eruda.init() } })();'>
Inspect Element
</a>
<br>
<a href='javascript:(function(e,n,o,t){o=e.body,t="true"==o[n],o[n]=t?"false":"true",e.designMode=t?"off":"on"})(document,"contentEditable"'>
Edit Page content (toggleable)
</a>
</div>`;
})();