Bit Of A Hack

Home Archives
logo

Keep up to date with Bit Of A Hack...

Another Chrome extension... Why not? [Permalink]

My last post was about a chrome extension. So, while we are on the subject, here's one I wrote a while ago. It is a dial up simulator. It simulates the sound and load time of you 56k modem. It isn't technically accurate as I'm sure many will like to point out. It is just a gimmick and great fun to install on people computers while they're not looking and turn the volume to max.

So, because I had to, here is a video of the Hackaday retro edition being loaded in chrome with this extension installed...

This is also a fairly simple extension to make.

It starts as always with the manifest that injects some files into all webpages.

manifest.json...

{
  "manifest_version": 2,

  "name": "DialSim",
  "description": "Simulates the sounds and speeds of your old 56k dial up connection.",
  "version": "1.0",

  "permissions": [
    "tabs"
  ],

  "background": {
    "page": "backgroundSounds.html"
  },

  "content_scripts": [
    {
      "matches": ["http://*/*", "https://*/*"],
      "js": ["contentScript.js"]
    }
  ]

}

This starts a background html page which is nothing more than just a handler for a javascript file that controls all of the sounds and ensure only one tab can use the sound at once.

backgroundSounds.html...

<!DOCTYPE html>
<html>
<body>
<script src='soundEvents.js' > </script>
</body>
</html>

soundEvents.js...

var lineAvailable = true;

function prepareSound(fileName){
	var mySound = document.createElement('audio'); 
	var mySoundSource = document.createElement('source'); mySoundSource.src=fileName; mySoundSource.type="audio/ogg";
	mySound.appendChild(mySoundSource);
	return mySound;
}

function playSoundCallback(sound, callback){
	sound.addEventListener("ended", callback);
	sound.play();
}

//allow only one page to load at a time
chrome.runtime.onMessage.addListener(
function(request, sender, sendResponse) {

console.log(sender.tab ?
                "Request made from content script on page:" + sender.tab.url :
                "Request made from the extension");

	//Request to get access to the line...
	if (request.requestLine == "true"){
		console.log('>>>Requesting line access');
		if (lineAvailable){
			console.log('>>>Line is available');
			lineAvailable = false;
			sendResponse({canLoad: "true"});
			return;
		}
		else{
			console.log('>>>Line is unavailable');
			sendResponse({canLoad: "false"});
			return;
		}
	}
	//request to releast the line
	if (request.releaseLine == "true"){
		console.log('>>>Line Released');
		lineAvailable = true;
		return;
	}
	//request to play a sound
	if (request.playSound == "true"){
		console.log('>>>Sound play request');
		if (request.sound == "tone") { playSoundCallback(prepareSound("newTab.ogg"), function (){ sendResponse({toneDone: "true"}); });	console.log('>>>Played tone'); }
		if (request.sound == "dial") { playSoundCallback(prepareSound("dial.ogg"), function (){ sendResponse({dialDone: "true"}); }); console.log('>>>Played dial'); }
		if (request.sound == "data") { playSoundCallback(prepareSound("data.ogg"), function (){ sendResponse({dataDone: "true"}); }); console.log('>>>Played data'); }
		return true;
	}
});

Then there is the script that gets injected into all pages to handle sound requests for that page.

contentScript.js...

/////////////////////////////////////////////////////////////////////////////////////////
//Initial blocker div tag...
var body = document.getElementsByTagName('body')[0];

var blocker = document.createElement('div'); 
blocker.style.position="absolute"; 
blocker.style.top="0px"; 
blocker.style.left="0px"; 
blocker.style.width="100%"; 
blocker.style.height="100%"; 
blocker.style.backgroundColor="white"; 
blocker.style.textAlign="center"; 
blocker.style.zIndex="99999999";
blocker.innerHTML = "<p style='font-size:large;'><br><br>Waiting for line...</p>";
body.appendChild(blocker);

/////////////////////////////////////////////////////////////////////////////////////////
//functions for making the page look like it is loading slowly

var p = 0;
var loadfunc;

function loadPage(){
	blocker.innerHTML = "";
	loadfunc = window.setInterval(function(){step()}, 60);
}

function step(){
	if (p<100){
		var num = Math.floor((Math.random()*10)-5);
		if (num>0){
			p+=num;
		}
	}
	else
	{
		clearInterval(loadfunc);
		blocker.style.width="0px";
		blocker.style.height="0px";
	}
	blocker.style.top = p+"%";
	blocker.style.height = (100-p)+"%";
}

/////////////////////////////////////////////////////////////////////////////////////////
//soundy stuff

var lineFunc;

lineFunc = window.setInterval(function(){requestLine()}, 10);

function doneData(response){
	chrome.runtime.sendMessage({releaseLine: "true"}, function(response) {});
}

function doneDial(response){
	window.setTimeout(loadPage, 2000);
	chrome.runtime.sendMessage({playSound: "true", sound: "data"}, doneData);
}

function doneTone(response){
	blocker.innerHTML = "<p style='font-size:large;'><br><br>Dialing, please wait...</p>";
	chrome.runtime.sendMessage({playSound: "true", sound: "dial"}, doneDial);	
}

function requestLine(){
chrome.runtime.sendMessage({requestLine: "true"}, function(response) {
	if (response.canLoad == "true") {

		clearInterval(lineFunc);
		console.log('Playing first sound');
		chrome.runtime.sendMessage({playSound: "true", sound: "tone"}, doneTone);

	}
});
}

That's it really. You also need to have the sound files available. If you want to get the whole thing then you can find it on github here: https://github.com/danieljabailey/dialsim

You can also get the extension and try it for yourself through the chrome webstore here: https://chrome.google.com/webstore/detail/dialsim/ochdoomldmgineionnknabkjdbafmbbd

By .

comments powered by Disqus

This website uses cookies. If you don't like this, please stop using this site.