Develop Reference

How do i make my tampermonkey script work with soundcloud?

I have a tampermonkey script that i make a while ago.
And i want to improve it so it uses soundcloud's SPA and doesn't reload the page everytime you click on one of the shortcuts.
I have looked at some other questions in stackoverflow and tried many things can't figure out a way for it to work.
For example, if i use history.pushState it does change the URL ! But it doesn't update the page.
function insertButton(playlistname,playlistlink) {
let playlist = document.createElement('Button');
let header = document.querySelector('.header__middle');
playlist.innerHTML = playlistname;
playlist.onclick = function(){ history.pushState({}, '', playlistlink);};
playlist.className = 'playlist-button';
header.insertBefore(playlist, header.children[2]);
}

How to store a newly created element to localStorage or Cookie with Javascript?

I am making an idle clicker game for fun, everything was going fine until I encountered a problem.
What I basically want to happen is when the image is clicked and the clickCounter element is over one, the new image element is created. No problem here, the main problem is saving the image. If the user refreshes the page, I want the created element to still be there. I have tried using outerHTML and following some other Stack Overflow forum questions but I could never get a proper solution to this certain problem. I have also tried localStorage and cookies but I believe I am using them wrong.
My code is below, my sololearn will be linked below, consisting of the full code to my project.
function oneHundThou() {
var countvar = document.getElementById("clickCounter")
if(document.getElementById("clickCounter").innerHTML > 1) {
alert("Achievement! 1 pat!")
var achievement1k = document.createElement("img");
// create a cookie so when the user refreshes the page, the achievement is shown again
document.cookie = "achievement1k=true";
achievement1k.src = "https://c.pxhere.com/images/f2/ec/a3fcfba7993c96fe881024fe21e7-1460589.jpg!d";
achievement1k.style.height = "1000px"
achievement1k.style.width = "1000px"
achievement1k.style.backgroundColor = "red"
document.body.appendChild(achievement1k);
oneHundThou = function(){}; // emptying my function after it is run once instead of using a standard switch statement
}
else {
return
}
}
oneHundThou();
I am aware that there is another post that is similar to this, however, my answer could not be answered on that post.
Full code is here: https://code.sololearn.com/Wwdw59oenFqB
Please help! Thank you. (:

Instead of storing the image, try storing the innerHTML, then create the image on document load:
function oneHundThou() {
countvar.innerHTML = localStorage.getItem('clickCount') ? localStorage.getItem('clickCount') : 0; //before if
//original code
localStorage.setItem('clickCount', countvar.innerHTML); //instead of doc.cookie
}
window.addEventListener('DOMContentLoaded', (event) => {
oneHundThou();
});
or, if you don't care that clickCounter may initialize to null, you can remove the ? : and just put
countvar.innerHTML = localStorage.getItem('clickCount');
Edit: shortened code with the countvar variable

Loading External JS Files After Mouse Move or 5 Seconds Later for Better Page Speed Optimization

I am using smartsupp live chat script for my website. It is good however it dramatically increases my page loading time.
According to gtmetrix.com, my normal page load details:
Fully Loaded Time
2.6s
Total Page Size
751KB
Requests
42
But when I add this script:
Fully Loaded Time
20.6s
Total Page Size
2.00MB
Requests
66
So, I want to use this script but I don't want to load it firstly. I want to load it when visitors mouse move or 3-5 seconds later.
Do you have any solution for this? Thank you.
Default smartsupp codes like this:
<!-- Smartsupp Live Chat script -->
<script type="text/javascript">
var _smartsupp = _smartsupp || {};
_smartsupp.key = 'mykeynumber';
window.smartsupp||(function(d) {
var s,c,o=smartsupp=function(){ o._.push(arguments)};o._=[];
s=d.getElementsByTagName('script')[0];c=d.createElement('script');
c.type='text/javascript';c.charset='utf-8';c.async=true;c.defer=true;
c.src='//www.smartsuppchat.com/loader.js?';s.parentNode.insertBefore(c,s);
})(document);
</script>
EDIT:
I think this is not related with my question but I think this is another side of this problem too. According to gtmetrix.com I have "Leverage browser caching" problem beacuse of this script too. They said:
Leverage browser caching for the following cacheable resources:
https://s2.smartlook.com/rec/check (expiration not specified)
https://s2.smartlook.com/rec/init (expiration not specified)
https://s2.smartlook.com/rec/tag (expiration not specified)
https://static.smartsupp.co/chats/112939/avatar-gasqccul5z.png (expiration not specified)
https://rec-src.smartlook.com/recorder.js (5 minutes)
https://www.google-analytics.com/analytics.js (2 hours)
Maybe you can find a good solution for all of these problems. Thank you very much again.

Unfortunately other solutions are not fit for my problem. So I found a code like this:
<script>
window.onload = function(){
setTimeout(loadAfterTime, 5000)
};
function loadAfterTime() {
// your code here
}
</script>
And used it like:
<script>
var _smartsupp = _smartsupp || {};
_smartsupp.key = 'mykeynumber';
window.onload = function(){
setTimeout(loadAfterTime, 5000)
};
function loadAfterTime() {
window.smartsupp||(function(d) {
var s,c,o=smartsupp=function(){ o._.push(arguments)};o._=[];
s=d.getElementsByTagName('script')[0];c=d.createElement('script');
c.type='text/javascript';c.charset='utf-8';c.async=true;
c.src='//www.smartsuppchat.com/loader.js?';s.parentNode.insertBefore(c,s);
})(document);
}
</script>
After that, gtmetrix.com results:
Fully Loaded Time
2.7s
Total Page Size
650KB
Requests
34
So, it works! I recommend this solutions for all webmasters.

You can use javascript onload native method or document.ready from jquery library.
It is hard to accept that those loading time will be same or more or less same all the time, since it depends on internet speed and server capability.Instead of depending on setTimeout you can rely on window.onload
window.onload fires when the resource has loaded.
window.onload = function() {
// script for Smartsupp Live Chat
};

Its easy to do achieve this with jQuery. You just need to get the external js file after the document is ready and apply a set timeout function for your external script.
<script>
$(document).ready(function() {
setTimeout(function() {
var _smartsupp = _smartsupp || {};
_smartsupp.key = 'mykeynumber';
window.smartsupp || (function(d) {
var s, c, o = smartsupp = function() {
o._.push(arguments)
};
o._ = [];
s = d.getElementsByTagName('script')[0];
c = d.createElement('script');
c.type = 'text/javascript';
c.charset = 'utf-8';
c.async = true;
c.defer = true;
c.src = '//www.smartsuppchat.com/loader.js?';
s.parentNode.insertBefore(c, s);
})(document);
console.log("External js file loaded");
}, 5 * 1000) //calls the external chat after 5 seconds
});
</script>
Edit #1
Leverage browser caching doesn't works on external resources :)

Using URL fragment to determine which jquery function is run [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I want to link to a page like (domain.com/page#loadThickBox1) and have it run jquery function that loads a thickbox by default. What code do I need to run to accomplish this?
For instance, these might be a few links:
domain.com/page#loadThickBox1
domain.com/page#loadThickBox2
domain.com/page#loadThickBox3
NOT like this:
domain.com/page/loadThickBox1
domain.com/page/loadThickBox2
domain.com/page/loadThickBox3

Use location.hash
$(function() {
switch( location.hash.replace('#','') ){
case 'loadThickBox1':
//do something!
loadThickBox1();
break;
case 'loadThickBox2':
//do something!
loadThickBox2();
break;
case 'loadThickBox3':
//do something!
loadThickBox3();
break;
}
});

location.href.split('#')[1]
This will get you the words after the #. Load the appropriate box given this value.

You can listen to the hashchange event, parse the hash and run your function accordingly.
DEMO
function handleHash(hash) {
var hash = hash.replace('#', '');
if (!hash) return;
console.log('Loading thick box ' + hash.slice(-1));
}
window.addEventListener('hashchange', function () {
handleHash(location.hash);
});
//handle initial hash when page loads
handleHash(location.hash);

Follow all users on a twitter page [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking us to recommend or find a tool, library or favorite off-site resource are off-topic for Stack Overflow as they tend to attract opinionated answers and spam. Instead, describe the problem and what has been done so far to solve it.
Closed 9 years ago.
Improve this question
I'm on https://twitter.com/#!/username/followers ; is there any greasemonkey script to follow all the twitter users on that page?

Here's a new one which also employs a delay to prevent spam issues.
var FOLLOW_PAUSE = 1250;
var FOLLOW_RAND = 250;
var PAGE_WAIT = 2000;
__cnt__ = 0;
var f;
f = function() {
var eles;
var __lcnt__ = 0;
eles = jQuery('.Grid-cell .not-following .follow-text').each(function(i, ele) {
ele = jQuery(ele);
if (ele.css('display') != 'block') {
console.trace('Already following: ' + i);
return;
}
setTimeout(function() {
console.trace("Following " + i + " of " + eles.length);
ele.click();
if ((eles.length - 1) == i) {
console.trace("Scrolling...");
window.scrollTo(0, document.body.scrollHeight);
setTimeout(function() {
f();
}, PAGE_WAIT);
}
}, __lcnt__++ * FOLLOW_PAUSE + Math.random()*(FOLLOW_RAND) - FOLLOW_RAND/2);
__cnt__++;
});
}
f();
What it does:
Looks for follow buttons
Checks that you aren't already following or pending (display: block check)
Sets a timer to click the FOLLOW buttons every 500ms to prevent spam issues.
NEW! When it's done them all, scrolls the page and waits a couple seconds for the next loads to appear, then repeats the whole process!
Notes for hackers:
Works on Chrome latest version and Twitter as of the 30th of Sep 2016.
You seem to need to "click" the DIV inside the A tag, not the A tag itself.
HOMEWORK: Maybe try jQuery's live() function to auto-click any new buttons which show up after the initial page load :)
Disclaimer: This is not a hack...just a technique to save some wrist and finger RSI :) Regardless, use cautiously and respectfully.
UPDATE: Improved for latest twitter. Now employs randomness in the timing to make you look less like a bot

Twitter uses JQuery, so a way to do this, assuming that you aren't doing this so much as to trigger the rate limits (the rate limits will apply more aggressively to web client users as compared to API users) is to do the equivalent of:
$('.button.follow-button').click()
You can accomplish this in GreaseMonkey if you'd like, or setting it as a JavaScript bookmarklet, or by copy-pasting this into your address bar and hitting enter:
javascript:$('.button.follow-button').click()

I modified the code that Hari Karam Singh posted earlier to work to the to-date Twitter.
__cnt__=0; jQuery('.stream button.follow-button > span.follow-text').each(function (i, ele) { ele = jQuery(ele); if (ele.css('display')!='block') {console.log('already following:', i); return;} setTimeout(function () {ele.click();}, __cnt__++*500); });

It doesn´t work anymore, but if you use the object instead of the alias i´ll do javascript:jQuery('.button.follow-button').click();.
You can also use the in-built debugger in chrome or firebug to add a button that cam do this for you, and add a settimeout to avoid interference with the api's restrictions.
<input type="button" onclick="javascript:jQuery('.button.follow-button').click();" value="follow!
">