I am working on a bookmarklet (currently just javascript code) that will prompt the user, asking for a domain name, and whatever domain name they enter will change the favicon of the current site they are on to the one of the domain they entered. I have gotten the code to work without errors, but the favicon doesn't change.
The code does not error, it simply prints "Favicon changed" in the console, but nothing changes.
here is my code:
var script = document.createElement('script');
script.src = '//code.jquery.com/jquery-3.4.1.min.js';
script.type = 'text/javascript';
document.getElementsByTagName('head')[0].appendChild(script);
var waitForJQuery = setInterval(function () {
if (typeof $ != 'undefined') {
function changeFavicon(src) {
$('link[rel="shortcut icon"]').attr('href', src);
}
let url;
url = prompt("Please enter the URL you wish to mask this page as. Example: www.google.com", "www.google.com");
changeFavicon("//www.google.com/s2/favicons?domain=" + url);
console.log("Favicon Changed!");
clearInterval(waitForJQuery);
}
}, 10);
Edit: I would like to let it be known I am very inexperienced with javascript, I originally came from Python so I know a bit but a lot of this code may be inefficient or defective. if that is the case feel free to comment or message me about it! Thanks :D
Edit 2: I have tried some other code, this time eliminating jquery.
function changeFavicon(src) {
var link = document.createElement('link'),
oldLink = document.getElementById('dynamic-favicon');
link.id = 'dynamic-favicon';
link.rel = 'shortcut icon';
link.href = src;
if (oldLink) {
document.head.removeChild(oldLink);
}
document.head.appendChild(link);
}
let url;
url = prompt("Please enter the URL you wish to mask this page as. Example: google.com", "google.com");
iconURL = "//www.google.com/s2/favicons?domain=" + url
changeFavicon(iconURL);
It still does not work though.
Consider the following.
$(function() {
function getIcon(url) {
var myData = [
"//www.google.com/s2/favicons?domain=" + url
]
if (url) {
$.get(myData[0], function(results) {
console.log(results);
myData.push(results);
});
}
return myData;
}
$("#get-btn").click(function() {
var newIcon = getIcon($("#url").val());
$("<div>").appendTo($(".prompt"));
$("<img>", {
class: "shortcut icon",
src: newIcon[0]
}).appendTo($(".prompt > div"));
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="prompt">
<p>Please enter the URL you wish to mask this page as.</p>
<input type="text" id="url" placeholder="www.google.com">
<button id="get-btn">Get FavIcon</button>
</div>
I have found the thing that was wrong!
www.google.com/s2/favicons?domain= does NOT Return an ico file so it failed to work because of so.
Related
My English is not good sorry,
I do not want to let one of the URLSearchParams change.
And when the URLSearchParams is changed, returne to the my input value.
URL address : example.com/action.php?id=1&name=john&penalty=365
<input name='penalty' value='365' hidden>
<script>
$(document).ready(function() {
const url = window.location.href;
const paramspenalt = new URLSearchParams(url.split('?')[1]);
var penaltyvar = $('input[name=penalty]').val();
paramspenalt.set('penalty', penaltyvar);
const resultpenalty = paramspenalt.toString();
window.location = 'action.php?'+resultpenalty+'';
});
</script>
Everything is fine with this code, But the page is constantly loading.
It is very good if the page is loaded only once.
#ksav helping me and
fixed my problem from How do I modify the URL without reloading the page?
:
<input name='penalty' value='365' hidden>
<script>
$(document).ready(function() {
const url = window.location.href;
const paramspenalt = new URLSearchParams(url.split('?')[1]);
var penaltyvar = $('input[name=penalty]').val();
paramspenalt.set('penalty', penaltyvar);
const resultpenalty = paramspenalt.toString();
//****
window.history.pushState("object or string", "Title", 'action.php?'+resultpenalty+'');
//****
});
</script>
I was wondering if anyone can help me correct this code.
I am trying to setup 3 different button menus using var path = window.location.href; for main URL, Russian site and Spanish site.
I seem to have 2 out of 3 working.
I am also sorry if I'm not the best at explaining this but below is what I'm trying to do. Hopefully someone can figure out what I'm doing wrong and help.
var path = window.location.href;
if (~path.indexOf("/ru/")){
$j("#button1").append("<a class=\"ru-text\" href=\"http://#/\"> <span>Отслеживание </span><br/>отгрузки</a>");
}
var path = window.location.href;
if (~path.indexOf("/es/")){
$j("#button1").append("<a class=\"es-text\" href=\"http://#/\"> <span>RASTREAR </span><br/>ENVIO</a>");
}
}else{
$j("#button1").append("<span>Track Your</span> <br/>shipment here");
};
};
You have wrong if-else conditional, it should be as follows:
var path = window.location.href, linkEl = "";
if (~path.indexOf("/ru/")) {
linkEl = "<a class=\"ru-text\" href=\"http://#/\"><span>Отслеживание</span><br/>отгрузки</a>";
} else if (~path.indexOf("/es/")) {
linkEl = "<a class=\"es-text\" href=\"http://#/\"><span>RASTREAR </span><br/>ENVIO</a>";
} else {
linkEl = "<span>Track Your</span><br/>shipment here";
}
$j("#button1").append(linkEl);
I need to pass back a unique ID in place of "INSERT+ORDER+ID" for when a user clicks on our "Request Information" button to better track our visitors. Does anyone know how I can accomplish this? Any help would be much appreciated, thanks!
<script type="text/javascript">
var _qevents = _qevents || [];
(function() {
var elem = document.createElement('script');
elem.src = (document.location.protocol == "https:" ? "https://secure" : "http://edge") +
".quantserve.com/quant.js";
elem.async = true;
elem.type = "text/javascript";
var scpt = document.getElementsByTagName('script')[0];
scpt.parentNode.insertBefore(elem, scpt);
})();
_qevents.push(
{qacct:"p-yeADJca0S9FXE",labels:"_fp.event.Request Information Confirmation
Page",orderid:"INSERT+ORDER+ID"}
);
</script>
<noscript>
<img src="//pixel.quantserve.com/pixel
/p-yeADJca0S9FXE.gif?labels=_fp.event.Request+Information+Confirmation+Page&
orderid=INSERT+ORDER+ID" style="display: none;" border="0" height="1" width="1" alt="Quantcast"/>
</noscript>
assuming you mean a random unique ID,
for the javascript event tracking this should work:
// function to generate random id in js
function getRandomId() {
var id = +new Date() + Math.random();
return id.toString().replace('.','');
}
var btnReqInfo = document.getElementById('request_information_btn');
// bind the click on button
btnReqInfo.addEventListener('click', function() {
// track the event
_qevents.push({ qacct:"p-yeADJca0S9FXE", labels: "_fp.event.Request Information ConfirmationPage",orderid: getRandomId() });
, false);
About the content in the noscript tag, you can't do it with static html of course so you have to put in the context of your template (in the php file), something like this that generates a unique ID and then echo it in place of your placeholder.
Since I'm in the mood for structuring and cleaning, I took the liberty of refactoring a bit the code, in case, you can replace all your script with this (assuming you're using plain js (vanilla) and html 5):
<script>
var _qevents = _qevents || [];
(function() {
var
init = function() {
loadScript();
bindUi();
},
loadScript = function() {
var elem = document.createElement('script');
elem.src = (document.location.protocol == "https:" ? "https://secure" : "http://edge") + ".quantserve.com/quant.js";
elem.async = true;
elem.type = "text/javascript";
var scrpt = document.getElementsByTagName('script')[0];
scrpt.parentNode.insertBefore(elem, scrpt);
},
bindUi = function() {
var btnReqInfo = document.getElementById('request_information_btn');
btnReqInfo.addEventListener('click', track.order, false);
},
track = {
order: function() {
_qevents.push({ qacct:"p-yeADJca0S9FXE", labels: "_fp.event.Request Information ConfirmationPage", orderid: utils.getRandomId() });
}
},
utils = {
getRandomId : function() {
var id = +new Date() + Math.random();
return id.toString().replace('.','');
}
};
init();
})();
</script>
I would suggest using an AJAX call that is binded to the onclick event or .click if you're using JQuery
The AJAX call would hit a PHP script or call whatever you're using for analytics.
I am using Vanilla 2 as forum with buttonbar plugin to create pre tags in the message area.
When clicking on the url button, he generates in the message box, but I would prefer <a href="" target="_blank></a> to generate.
Here is is the .js with the case for the url attribute:
case 'url':
var urlOpts = {};
var thisOpts = $.extend(htmlOpts, {
center: 'href'
});
var hasSelection = $(TextArea).hasSelection();
var NewURL = '';
if (hasSelection !== false) {
NewURL = hasSelection;
delete thisOpts.center;
} else
NewURL = prompt("Enter your URL:",'http://');
urlOpts.href = NewURL;
$(TextArea).insertRoundTag('a',thisOpts,urlOpts);
break;
Can someone tell me how to add the target="_blank" in it?
It seems to be solved so maybe here could be useful for anyone:
I don't know exactly the technologies u are using but have u tried with
urlOpts.target = '_blank';
before
$(TextArea).insertRoundTag('a',thisOpts,urlOpts);
I wrote simplest extension as an exercise in JS coding. This extension checks if some user (of certain social network) is online, and then outputs his/her small image, name and online status in notification alert. It checks profile page every 2 minutes via (setTimeout), but when user becomes "online", i set setTimeout to 45 minutes.(to avoid online alerts every 2 minutes).
It works, but not exactly as i expected. I have 2 issues:
1)When certain user is online and i change user id (via options page) to check another one, it doesnt happen because it waits 45 or less minutes. i tried the following code (in options.html), but it doesnt help.
2)When i change users, image output doesnt work correctly!! It outputs image of previous user!!
How do i fix these problems??
Thanks!
options.html
<script>
onload = function() {
if (localStorage.id){
document.getElementById("identifier").value = localStorage.id;
}
else {
var el = document.createElement("div");
el.innerHTML = "Enter ID!!";
document.getElementsByTagName("body")[0].appendChild(el);
}
};
function onch(){
localStorage.id = document.getElementById("identifier").value;
var bg = chrome.extension.getBackgroundPage();
if(bg.id1){
clearTimeout(bg.id1);
bg.getdata();
}
}
</script>
<body>
<h1>
</h1>
<form id="options">
<h2>Settings</h2>
<label><input type='text' id ='identifier' value='' onchange="onch()"> Enter ID </label>
</form>
</body>
</html>
backg.html
<script type="text/javascript">
var domurl = "http://www.xxxxxxxxxxxxxx.xxx/id";
var txt;
var id1;
var id2;
var imgarres = [];
var imgarr = [];
var imgels = [];
function getdata() {
if (id1){clearTimeout(id1);}
if (id2){clearTimeout(id2);}
var url = getUrl();
var xhr = new XMLHttpRequest();
xhr.open('GET',url, true);
xhr.setRequestHeader('Cache-Control', 'no-cache');
xhr.setRequestHeader('Pragma', 'no-cache');
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
txt = xhr.responseText;
var r = txt.indexOf('<b class="fl_r">Online</b>');
var el = document.createElement("div");
el.innerHTML = txt;
var n = imgprocess(el,url);
var nam = el.getElementsByTagName("title")[0].innerHTML;
if (r != -1) {
var notification = webkitNotifications.createNotification(n, nam, 'online!!' );
notification.show();
var id1 = setTimeout(getdata, 60000*45);
}
else {
var id2 = setTimeout(getdata, 60000*2);
}
}}
xhr.send();
}
function imgprocess(text,url){
imgels = text.getElementsByTagName("IMG");
for (var i=0;i< imgels.length;i++){
if (imgels[i].src.indexOf(parse(url)) != -1){
imgarr.push(imgels[i]);
}
}
for (var p=0; p< imgarr.length; p++){
if (imgarr[p].parentNode.nodeName=="A"){
imgarres.push(imgarr[p]);
}
}
var z = imgarres[0].src;
return z;
}
function getUrl(){
if (localStorage.id){
var ur = domurl + localStorage.id;
return ur;
}
else {
var notif = webkitNotifications.createNotification(null, 'blah,blah,blah', 'Enter ID in options!!' );
notif.show();
getdata();
}
}
function init() {
getdata();
}
</script>
</head>
<body onload="init();">
</body>
</html>
In options instead of clearTimeout(bg.id1); try bg.clearTimeout(bg.id1);
For image problem looks like you never clean imgarres array, only adding elements to it and then taking the first one.
PS. You code is very hard to read, maybe if you made it well formatted and didn't use cryptic variable names you would be able to find bugs easier.
UPDATE
I think I know what the problem is. When you are setting the timeout you are using local scope variable because of var keyword, so your id1 is visible only inside this function and global id1 is still undefined. So instead of:
var id1 = setTimeout(getdata, 60000*45);
try:
id1 = setTimeout(getdata, 60000*45);
Because of this if(bg.id1){} inside options is never executed.
(bg.clearTimeout(bg.id1); should work after that, but it is not needed as you are clearing the timeout inside getdata() anyway)