Bit Of A Hack

Home Archives

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_version": 2,

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

  "permissions": [

  "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.


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


var lineAvailable = true;

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

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

//allow only one page to load at a time
function(request, sender, sendResponse) {

console.log( ?
                "Request made from content script on page:" + :
                "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"});
			console.log('>>>Line is unavailable');
			sendResponse({canLoad: "false"});
	//request to releast the line
	if (request.releaseLine == "true"){
		console.log('>>>Line Released');
		lineAvailable = true;
	//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.


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

var blocker = document.createElement('div');"absolute";"0px";"0px";"100%";"100%";"white";"center";"99999999";
blocker.innerHTML = "<p style='font-size:large;'><br><br>Waiting for line...</p>";

//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+"%"; = (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") {

		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:

You can also get the extension and try it for yourself through the chrome webstore here:

By .

comments powered by Disqus

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