[Chrome Extension] Live Bomb! - Live video notifier

Hey chrome users!

I've been meaning to do this for a while and it's finally done. I tried out @chrisharrisgreat little app and it was really useful but I sincerely dislike Java running in the background. So I decided to code my own using web technologies and a Chrome extension was the best way to go for me. Once I got it working I decided to share with the gb community so I put some work on the interface, threw some configurations in and here it is.

What is it?

Livebomb is a simple extension that notifies you when there's a live video on the site. If you set to, it'll display a html5 notification with sound, the icon will have a 'live' message and if you click on it, you can see which show is on. It is a chrome background extension, which means that it keeps running even when the browser is closed.

It is customizable, so you can disable sound/notifications/change how often the extension will look for live video and there's a dark and a light theme.

You can also check the schedule although there's a caveat (read below).

Features:

• Notifies you when a show is up
• Html5 notifications
• Customizable
• Light/Dark Theme
• Animated!

Screenshots:

Download, installation and updates:

Since I'm using the official chrome store, just go to the link below and install it. Any future updates I push are automatically installed.

Download page

Feedback, bugs and feature requests:

I have done some testing on a smaller scale but as it always happens something will break. If you find any bugs please post them on the chrome store support page so I can keep track of any problems that appear.

I'll listen to feature requests but since I'm pretty much busy all the time I cant guarantee I'll add them but please, share any requests you have.

If you have one minute to spare, please post a review on the store page. :)

I need your help:

Right now I only have one sound available for notifications. I simply dont have the time to search through all the gb library for awesome notification sounds as I'm sure there are a ton. If you have the time and the skill to cut the audio clip of your favorite moment I'd really appreciate if you send them to me. It should be only 5-8 seconds long. If the sound is good and appropriate for a notification sound I'll include them in the next version and credit you on the about page of course.

Known bugs/problems

As I mentioned earlier, there's a problem with the schedule right now. Since there's no API for schedule items I'm using my own method of fetching that data. Problem is, unlike the GB website schedule, the time stamps for the events are not in your timezone/location. Sorry about that, but as far as I know there's nothing I can do about it until the API endpoints that I need are available.

I labeled the dates with PST/EST (Pacific Standard Time/Eastern Standard Time) because those are the most likely to appear, although sometimes the data is from some european server and totally different. I'll fix that right away once the API is available.

There's also a problem fetching the show image when the live video is a premium stream. My code will grab the wrong image untill the promo-image for the premium show is up. I should be able to fix this when I get the time to look into it.

Dev Stuff:

Having never coded an extension before, this was a fun project. Chrome has a lot of different APIs and it was fun to try some of them. The whole system is pretty well thought out.

I'm using YQL (Yahoo query language) to fetch the data that I need from GB and the then I filter the data.

If you want to take a look at my code the files you may be interested in are:

functions.js - These are the base functions that I use for checking live video, checking the schedule and grabbing the promo image.

background.js - This is where I run the background routines.

livebomb.js - LB interface.

A complete list of the stuff that used in the extension is available in the about page.

Future Updates and plans for V2:

Once the API is ready I'll refactor my code right away to use it and that should speed up a bit the performance and solve the promo-image bug.

Even though the current extension is really usefull, I'd like to bring a lot of features for a future v2 release, like:

• Revamped interface
• Reed the RSS feed for articles and videos
• Listen to the podcast directly from the extension
• Search function with filters.

But this will take a while. I'll get to it when I have the time.

Changelog:

v1.1 :

-Fixed some wrong default values and problematic lines.

Thanks to @chaser324 and @chance_s for testing the extension.

If you like the extension and would like to buy me a coffee there's a donation link in the about page, but that's absolutely not necessary.

v1.2 :

• Schedule now shows the correct dates in your local time*
• Improved live detection
• Two new sounds: Gb Bumper and 'Drop a bomb on it'
• Extension will open the schedule by default if there's no live video (configurable)
• Fixed css bugs
• Improved security, stricter permissions

V.1.2.3

• Removed a part of the code that was causing errors.
• Changed some of the default preferences

Hope you guys find it useful.

Rad. I much prefer a browser extension over a desktop app. (No offense to the author of that great desktop app, though.) The animations and the notification sound are nice touches!

God damn do we have an awesome community (unless this ends up being spyware then fuck you). This is just amazing.

Cool extension, how about the "Drop a bomb on it" from this video? KSingle from this

This is fantastic! Thanks a bunch duder.

@hammondoftexas: Well, it is certainly possible. But you have to take into account that every one of those platforms is a different environment and that's a lot of work. I know Firefox also has a pretty robust extension system so a port should be relatively straightforward. I know nothing about Safari.

Mobile apps are other beasts entirely but a hybrid app is totally doable. In fact, building one should fun but it's a lot of work involved as well. I'll take a look on mozillas documentation to see how it's done.

My thoughts exactly

@themanwithnoplan No problem, enjoy :)

This looks great, nice job! Animations and layout are pretty sleek.

Two things. I'm still learning about extensions too, but I'd suggest tightening up your permissions in manifest.json. It seems like you shouldn't need any special permissions at all, and it might make people more likely to install it:

• When you're just using localStorage, you don't need to have the "storage" permission. chrome.storage is something different. It seems mostly for syncing settings to other computers or to incognito windows, and it doesn't look like you're actually using it.
• After chrome 7, you don't need to specify "tabs" to create new tabs.
• I'm not as familiar with this, but it seems like you don't need "http://*/*" or even any specific uri with YQL (looks like you just have that permission to XHR with yahoo). If removing it completely doesn't seem to work (it did on a local version), at least try to narrow it down to "https://query.yahooapis.com/v1/public/*" or whatever is most specific that works. I've never really messed with YQL, but I might after looking at into it. Seems really handy!

The other thing is that the way you're injecting content with $().html() is vulnerable to an XSS attack if giantbomb or yahoo sends bad content. Not a big deal because they're fairly trustworthy, but would be good practice to use .text() or other ways to escape it first.

I would also like to formally request the "PI PI PI" ringtone from Persona 4 as an alert sound :D

@catsakimbo: Thanks. About the storage, that's a mistake on my part. Initially I was using the sync API but that ended up being a hassle so I switched to a simpler jquery storage plugin. But I forgot to remove the permission. It'll be gone on the next version.

Now for the rest, I'm pretty sure the permissions I ask are needed. If you are a heavy chrome extension user you probably saw them before:

The problem with permissions is that they are not granular, it's pretty much all or nothing. But in the end, I'm in the same boat as you, I don't know how many permissions do I really need. I'll try removing ,see if the extension still works and do some more tests.

But you make a valid point, and I totally forgot to write about permissions in the first post so that might scare some users away.

Regarding XSS attacks I think that's a bit of a stretch. I'm running all requests through secure servers since it's an extension requirement. The only vulnerability would be the giant bomb website but again, that's highly unlikely. But still, I'm all for good practices so I'll implement something on this front.

I really appreciate the feedback catsakimbo. If you wanna be a tester and continue improving the code for future versions, pm me. :)

@cencen123: That drop a bomb sound could totally work. I'll try it out.

Well perfect day to try it out in like two hours brad is playing Demon's Souls again!

Thank you very much.

So YQL pretty much crapped out around the time of the show... in truly gb fashion that thing broke. I'm running tests here and it's working fine again. Problem wasn't on my end. But anyway let me know if you didnt get the notification.

@andmm: I got it 44 min too late lol, love the music tough.

Nice work! I've been thinking about doing some GB related development myself. Did you use their API for this?

Edit: Never mind that question. Didn't see you answered it in your post. Great job though!

As he mentions, the GB API doesn't currently have this schedule information. An API update in the future should add it, but for the time being, your only option for getting this data is to scrape the front page.

@afabs515: What Chaser said. If you need live video status or the schedule function that I use feel free to fork my code and use it in your project.

I took a look on mozilla's documentation on addons and... a port of livebomb wouldn't be so straightforward as I thought. They use their own XUL language and even including jquery inside the extension sounds like a pain, which is a problem since my code relies heavily on it. I'll keep digging every now and then because I'm curious how firefox extensions work, but don't expect a port any time soon.

I stripped a lot of the permissions I asked, ran some tests and to my surprise @catsakimbo was totally right. Extension is running fine with only a minor permission for accessing yahoo.com:

I still have to run more tests and send a dev release to the testers, but it should work.

v1.2 should be out by the end of the week with a new sound and improved security.

Absolutely awesome. Love the early design, very slick, very useful. Fantastic work, @andmm!

Great work!

Would be cool if there was a way to filter certain type of streams like for example only show live shows that have Unprofessional Fridays in the title. Allowing users to make their own blacklists or a whitelist is probably the easiest way to implement this.

Having rounded edges on the left and right buttons in the button group does look kind of odd when they cover the entire width of the window. I think removing the border radius and the outer margin out the buttons would look better and would be more fit better with the style you are going with as you are trying to kind of mimic the design of the giant bomb page.

RADICAL! Big ups

Live chat shouted this thread out, installed it. Seems pretty good so far. Great work!

Fantastic work. Thanks alot.

sorry duder!
the guys are busy windjamming :[

nice touch! also the sad bomb, this is great dude. nice work! !

Awesome! Thanks duder.

Personally, I think the notification noise should be the chord from the beginning of the videos.

Nice work, duder.

Thanks guys!

I remember someone suggesting that on the chat page, was that you? Anyway that actually is a pretty good idea and shouldn't be too difficult to implement.Which filters though? From the top of my head:

• Quick Look Live
• Breaking Brad
• Binding of Patrick
• UPF
• Bombing the AM
• Random Live Video

Maybe a premium general filter? You gotta take these things into consideration. Regarding the buttons, I guess that's a matter of taste since I thought the opposite (lol) and put the margin there. If more people agree with you and want that changed I have no problem doing it.

I'm working on improving the live detection right now, even though it's totally working as it is, it can be better and it will probably be in the next 1.2 version. Been also messing with Firefox and I think I found to way to port the extension and keep most of my code base. But I 'm really not sure at this point, so dont get your hopes up ff users.

Nice! I was just thinking about this since the Java notifier interrupts full-screen games. Thanks mate.

@andmm said:

I was watching the stream but no that was not me.

The buttons are not a problem, i only noticed it cause i stare at pixels and code all day. I could just edit my local popup.html and add my own CSS file with custom rules if i wanted to. I have noticed a few other small design details that are also bothering me but that is only because i am crazy. It honestly looks great i just have a problem and tend to be bothered by these kind of things.

Adding custom filers can be kind of troublesome as i am guessing all you can really do is look at the title. Giantbomb is always introducing new stuff and doing one-off streams you might want to allow users to add their own filters on top of the filters that come "out of the box" unless you feel like updating the app every month for the rest of your life. The filters you have suggest sound good, i can't think of any other regularly reoccurring live shows.

@audiobusting said:

That's probably because the JDialogs apparently steal focus by default when they pop-up. The testing build (just waiting on API update) shouldn't do that because setFocusableWindowState is now set to false. I'll boot up a game in full-screen in a little while just to be sure.

I see what you mean. Even though updating it regularly wouldn't be that much of a problem, a custom solution in this case might be better suited. Maybe a text input with some auto complete suggestions then I check for any filters before the notification. I'll look into it.

Many of you probably noticed, the extension didn't trigger during tonight's UPF. I'm well aware and I know what caused the problem. Since I'm scrapping the front page for the info, when it doesn't behave the way I predicted the extension understands that there is no live show. I already have rewritten my code and my function should detect live video more accurately now. Still have to properly test it before I push a broken version, but things are looking good for version 1.2.

@chrisharris said:

That's probably because the JDialogs apparently steal focus by default when they pop-up. The testing build (just waiting on API update) shouldn't do that because setFocusableWindowState is now set to false. I'll boot up a game in full-screen in a little while just to be sure.

Ah cool, thanks for the update.

Wow, super awesome work.

@andmm: So I noticed that all the times are wrong on the calendar. Is there something I need to do to get it on my time zone? It seems to be effecting the 3 computers I use.

@nightriff: I mention this on the thread under Known Problems/Bugs.

There's nothing I can do about that right now. It's not a bug, it's just the way I get the data and there's not enough information for me to make a conversion to your local timezone.

There's a simple solution without having to wait for the API, if they printed UTC time stamps somewhere in the schedule I could use that to display your correct time. I've been bugging @mrpibb about it but this should be fixed once the API endpoints are available.

I could just remove the time from the schedule items right now, but I guess that would make the whole thing pointless. lol

@andmm: Ok, thats fine, just wanted to make sure I wasn't the only one.

Good work. I will be getting some use out of this!

Works for me so far, nice work duder!

if someone more talented than me could slice up a small chunk of this to use as a notification, that'd be fantastic. With @hamst3r's blessing, of course! Nothing like a little dubstep to let you know that the bomb's about to go off.

@andmm: sorry, it's on our list, just that we've had a mountain of other bugs popping up that we've been working on. Rest assured I do want to support your extension as much as possible

If I was to pick an audio clip it would either be the strum that comes up on the "video feature/thing" screen or of Ryan saying "hey!"

Installed!

Dope as hell!

Awesome! I was using the Java app as well, but this will work much better and wont pop up when I'm in a game or something. I do miss the "Oh Snap Drop a Bomb On It" clip though, that should be one of the options :p

@pudge: I'd say a sound pretty much like that one is in the next version. :)

@hammondoftexas said:

Making a Firefox version would be more work than a Safari version, from my understanding. Safari & Chrome are generally pretty close in how they go about doing things, and Safari's definitely robust enough to implement something like this.

I do have a minor request for @andmm, any chance it could open the schedule instead of the live panel if there isn't a show that's currently live? Seems like the schedule should be default & give preference to the live panel when a show is going on.

Great work!

@andmm: Just wanted to post and say thanks for this dude it rocks.

@i_stay_puft Enjoy it!

@kzeni Yup, a Safari port would be way easier. Chrome and safari are based off the same project and they even share most of the apis in a way. Firefox on the other hand I'm finding it to be quite the headache. Documentation is all over the place, XUL is not that straightforward and overall Chrome is so much easier in comparison that just exacerbates all the negatives.

If there is any Firefox developer here, I'd love some directions.

Also, we fixed the wrong schedule dates and now it should show your local time. Should be in version 1.2 later this week. I just want to improve a bit more my live function cause I'm pretty sure there's a bug in there, then I'll push the update.

Version 1.2 should be up shortly. Here's the change log:

• Schedule now shows the correct dates in your local time!
• Improved live detection
• Two new sounds: Gb Bumper and 'Drop a bomb on it'
• Extension will open the schedule by default if there's no live video (configurable)
• Fixed css bugs
• Improved security, stricter permissions

Major improvement in this version, the extension will now show the the same date that the site is displaying. It will display the correct date 99% of the time, but YQL still sends some different data every now and then, so when that happens, just refresh a couple of times until the date is in your local time.

Permissions are much more strict now, so anyone that was on the fence regarding security can now install it without fear.

Did some minor improvement for the live video detection. That said, I'm sure I can make that better and more reliable so I'll probably push a silent update after UPF tomorrow when I have plenty of time to test my code against a premium stream.

Big thanks to @chaser324 and @catsakimbo for taking their time to test the extension and help me improve the code.

If you find any bugs, please let me know!