Chrome Extension Help

Snapy1 · January 24, 2014

Okay so Im a new at making extensions for chrome, and ive been coding HTML 5.0, and CSS3 for a little over a year now, but I am very limited to my javascript, I know some but not alot. My main question is that I have a site with a embed site in it, how to I make the site inside the extension smaller so you can see most of the page without scrolling all around.

SSOB · January 24, 2014

@linusforsell

Snapy1 · January 24, 2014

also can you have a css file in chrome extensions or can you only have style tags in the html page

Sharif · January 24, 2014

also can you have a css file in chrome extensions or can you only have style tags?

ask @linusforsell

Snapy1 · January 24, 2014

ask @linusforsell

okay I did, now we play the waiting game

linusforsell · January 24, 2014

I'll get back to you soon, but currently I'm a bit busy, sorry.

Snapy1 · January 24, 2014

I'll get back to you soon, but currently I'm a bit busy, sorry.

Okay. Thanks

linusforsell · January 25, 2014

Alright, let's get started. (Lets go through this here, instead of in a PM, so that people possibly can refer to this in the future if they have similar issues)

First: I'm not sure of what you're trying to do, could you show a screenshot or something of what your plugin is doing?

Snapy1 · January 25, 2014

Alright, let's get started. (Lets go through this here, instead of in a PM, so that people possibly can refer to this in the future if they have similar issues)

First: I'm not sure of what you're trying to do, could you show a screenshot or something of what your plugin is doing?

Sorry for the late reply back I fell asleep, but the first problem i had has solved itself, but my current questions is, how did you get it to detect when linus's and slick's stream is up, what is the code, im amusing you used JavaScript, or JQuery. And what is the CSS you used to get the livestream to appear and disappear corresponding to them being live or not.

Thanks,

~Snapy

PS: Is their anyway I can get this embed stream to appear in the Extension, it of course works outside of the extension.

Embed Code ::

<object type="application/x-shockwave-flash" onDblClick="opendpstream()" height="350" width="380" id="live_embed_player_flash" data="http://www.twitch.tv/widgets/live_embed_player.swf?channel=deadpoolyplays" bgcolor="#000000"><param name="allowFullScreen" value="true" /><param name="allowScriptAccess" value="always" /><param name="allowNetworking" value="all" /><param name="movie" value="http://www.twitch.tv/widgets/live_embed_player.swf" /><param name="flashvars" value="hostname=www.twitch.tv&channel=deadpoolyplays&auto_play=true&start_volume=25" /></object>

If you want the current code I got here it is (yes I know my code is very sloppy)::

HTML ::

<!DOCTYPE html><!-- saved from url=(0079)http://developer.chrome.com/extensions/examples/tutorials/getstarted/popup.html --><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">    <title><ul>MouseJocksOfficialChromeExtension</ul></title>        <link href="style.css" rel="stylesheet" type="text/css">  <script>  function opendpstream() {	  str.link("http://www.twitch.tv/DeadpoolyPlays")  }    function showhide(r){var t=r.form['txt'];r.value=='none'?t.setAttribute('disabled','disabled'):t.removeAttribute('disabled');t.style.display=r.value;}function showlayer(layer) {            var mymap = document.getElementById(layer).style.display;            if (mymap == "block") {                document.getElementById(layer).style.display = "none";            } else {                document.getElementById(layer).style.display = "block";            }        }      </script>    <link href='http://fonts.googleapis.com/css?family=Duru+Sans' rel='stylesheet' type='text/css'>    </head><html><br><div id="msheader"><center>Mousejocks Official Extension</center></div><br><br><div id="iftwitchlive"></div><br><br><p><div id="navone"> </div></p><div id="navtwo"></div><br><div id="navthree"></div><div id="streampopuptext"><p id="showorHide" class="showmap"><a onclick="javascript:showlayer('mymap')">DeadpoolyPlays Stream</a></div><div id="mymap" style="display:none;"><center><object type="application/x-shockwave-flash" onDblClick="opendpstream()" height="350" width="380" id="live_embed_player_flash" data="http://www.twitch.tv/widgets/live_embed_player.swf?channel=deadpoolyplays" bgcolor="#000000"><param name="allowFullScreen" value="true" /><param name="allowScriptAccess" value="always" /><param name="allowNetworking" value="all" /><param name="movie" value="http://www.twitch.tv/widgets/live_embed_player.swf" /><param name="flashvars" value="hostname=www.twitch.tv&channel=deadpoolyplays&auto_play=true&start_volume=25" /></object></center></div>    </body></html>

CSS ::

@charset "utf-8";/* CSS Document */body {	height:500px;;	width:400px;	margin:0;	font-family: 'Duru Sans', sans-serif;	background:#FBFBFB;}a {	text-decoration:none;}a:hover {	text-decoration:underline;}br {	margin:10px;}p {margin:0 0 0.4em 0}	#Mousejocksstreamlogos {	width:380px;	height:100px;	background-color:#C60D11;	border-bottom: #000 medium solid;	z-index:1;	border-top: #000 medium solid;}#msheader {	text-align:center;	margin-left:auto;	margin-right:auto;	width:380px;	height:50px;	background-color:#FFF;	/*border-bottom: #000 medium solid;	image*/	-moz-box-shadow: 0px 0px 2px rgba(68,68,68,0.6);	-webkit-box-shadow: 0px 0px 2px rgba(68,68,68,0.6);	box-shadow: 0px 0px 2px rgba(68,68,68,0.6);	font-family: 'Duru Sans', sans-serif;	border-radius:1px;}#iftwitchlive {	width:380px;	height:50px;	background-image:url(images/ttvbck.png);	background-repeat:no-repeat;	margin-left:auto;	margin-right:auto;}#navone {	text-align:left;	margin-left:auto;	margin-right:auto;	width:380px;	height:50px;	background-color:#FFF;	/*border-bottom: #000 medium solid;	image*/	-moz-box-shadow: 0px 0px 2px rgba(68,68,68,0.6);	-webkit-box-shadow: 0px 0px 2px rgba(68,68,68,0.6);	box-shadow: 0px 0px 2px rgba(68,68,68,0.6);	font-family: 'Duru Sans', sans-serif;	border-radius:1px;}	.navone {		border: #000 medium solid;		height:50px;		width:50px;	}#navtwo {	text-align:center;	margin-left:auto;	margin-right:auto;	width:380px;	height:50px;	background-color:#FFF;	/*border-bottom: #000 medium solid;	image*/	-moz-box-shadow: 0px 0px 2px rgba(68,68,68,0.6);	-webkit-box-shadow: 0px 0px 2px rgba(68,68,68,0.6);	box-shadow: 0px 0px 2px rgba(68,68,68,0.6);	font-family: 'Duru Sans', sans-serif;	border-radius:1px;}#navthree {	text-align:center;	margin-left:auto;	margin-right:auto;	width:380px;	height:50px;	background-color:#FFF;	/*border-bottom: #000 medium solid;	image*/	-moz-box-shadow: 0px 0px 2px rgba(68,68,68,0.6);	-webkit-box-shadow: 0px 0px 2px rgba(68,68,68,0.6);	box-shadow: 0px 0px 2px rgba(68,68,68,0.6);	font-family: 'Duru Sans', sans-serif;	border-radius:1px;}#streampopuptext {	text-align:center;	margin-left:auto;	margin-right:auto;	width:380px;	height:50px;	background-color:#FFF;	/*border-bottom: #000 medium solid;	image*/		-moz-box-shadow: 0px 0px 2px rgba(68,68,68,0.6);	-webkit-box-shadow: 0px 0px 2px rgba(68,68,68,0.6);	box-shadow: 0px 0px 2px rgba(68,68,68,0.6);	font-family: 'Duru Sans', sans-serif;	border-radius:1px;}.infotext {	margin-left:auto;	margin-right:auto;	text-align:center;	width:200px;	height:50px;}

Yes the I know their is not a lot done of it so far, I only got to put like 2 hours into it, and been through 3 different designs.

linusforsell · January 25, 2014

Right, I'm not sure how you would go about including the stream inside the plugin, as I've never tried. It might not even be possible.. so test the waters, I guess.

Here's the simple script i run in my background.js file to get twitch status for the streams:

function checkTwitchStreams(){				//Check Twitch status		var streams = {"linusTwitchChannel": "LinusTech", "slickTwitchChannel": "Luke_Lafr" };		var foundStream = {"linus": false, "slick": false};		//Linus Status Test		$.ajax({ 			url: "https://api.twitch.tv/kraken/search/streams?limit=1&q=" + streams.linusTwitchChannel 		}).done(function(data_linus){			if(data_linus._total > 0){				if(data_linus.streams[0].channel.url === "http://www.twitch.tv/" + streams.linusTwitchChannel.toLowerCase()){					foundStream.linus = true;					twitchStreamMessages.linusStream = data_linus.streams[0].channel.status;				}				else {					//Found a similar channel, not the real one					foundStream.linus = false;					localStorage.linusStream = "false";				}			}			else {				//No Such Channel Online				foundStream.linus = false;				localStorage.linusStream = "false";			}			//Slick Twitch Status			$.ajax({ 				url: "https://api.twitch.tv/kraken/search/streams?limit=1&q=" + streams.slickTwitchChannel 			}).done(function(data_slick){				if(data_slick._total > 0){					if(data_slick.streams[0].channel.url === "http://www.twitch.tv/" + streams.slickTwitchChannel.toLowerCase()){						foundStream.slick = true;						twitchStreamMessages.slickStream = data_slick.streams[0].channel.status;					}					else {						//Found a similar channel, not the real one						foundStream.slick = false;						localStorage.slickStream = "false";					}				}				else {					//No Such Channel Online					foundStream.slick = false;					localStorage.slickStream = "false";				}				//Did we find any streams?				if(foundStream.linus || foundStream.slick)				{					//We sure did, let's see who's there					if(foundStream.linus && localStorage.linusStream == "true")					{						//Still online					}					else if(foundStream.linus && localStorage.linusStream == "false")					{						//Has come online since last check						localStorage.linusStream = "true";							var options = {								type: "basic",								title: "Linus' Stream is now Live!",								message: data_linus.streams[0].channel.status,								contextMessage: "Click here to check it out",								iconUrl: "linus_twitch.png"							}							var notID = "ltt_twitch_linus";							notify(notID, options, true, false);					}					if(foundStream.slick && localStorage.slickStream == "true")					{						//Still online					}					else if(foundStream.slick && localStorage.slickStream =="false")					{						//Has come online since last check						localStorage.slickStream = "true";							var options = {								type: "basic",								title: "Slicks' Stream is now Live!",								message: data_slick.streams[0].channel.status,								contextMessage: "Click here to check it out",								iconUrl: "slick_twitch.png"							}							var notID = "ltt_twitch_slick";							notify(notID, options, true, false);					}					//At least one stream was online, so switch icon					chrome.browserAction.setIcon({"path": "icon_twitch.png"});				}				else				{					//Neither stream is online					chrome.browserAction.setIcon({"path": "icon.png"});				}			});		});		}

When I open the extension popup I query the background.js script to get local storage data on which streams are online, and then handle the popup markup to show and hide the elements that I want in the callback for that query:

chrome.extension.sendMessage({twitch: "whatsup"},  function(callback)		{			//Twitch Status			if(callback.response === "twitch"){				var twitch = callback.data;				if(twitch.linus == "true" || twitch.slick == "true")				{					$('#twitch').addClass("live");					//at least one stream is online					console.log("at least one stream is online, show twitch");					if(twitch.linus == "true") {						$('#twitchLinus').addClass('live').find('.profileTitle > span').html(twitch.linusMessage);					}					else						$('#twitchLinus').removeClass('live');					if(twitch.slick == "true") {						$('#twitchSlick').addClass('live').find('.profileTitle > span').html(twitch.slickMessage);					}					else						$('#twitchSlick').removeClass('live');				}				else				{					//None is online, hide twitch					$('#twitch').removeClass("show");				}				//$('#content').css('height', $('#main').height());			}		});

Here's how the background.js recieves the status query:

chrome.runtime.onMessage.addListener(	  	function(request, sender, sendResponse)	  	{		  if(request.twitch == "whatsup"){		        var twitchData = '{"linus": localStorage.linusStream, "slick": localStorage.slickStream, "linusMessage": twitchStreamMessages.linusStream, "slickMessage": twitchStreamMessages.slickStream}';		        sendResponse({response : "twitch", data : {		  			"linus": localStorage.linusStream, 		  			"slick": localStorage.slickStream, 		  			"linusMessage": twitchStreamMessages.linusStream, 		  			"slickMessage": twitchStreamMessages.slickStream		  			}		  		});		  	}	  	}	);

You can't quite copy-paste this thing, but you should be able to figure out how to use it.

Cheers,

Linus Forsell

Snapy1 · January 25, 2014

Right, I'm not sure how you would go about including the stream inside the plugin, as I've never tried. It might not even be possible.. so test the waters, I guess.

Here's the simple script i run in my background.js file to get twitch status for the streams:

function checkTwitchStreams(){				//Check Twitch status		var streams = {"linusTwitchChannel": "LinusTech", "slickTwitchChannel": "Luke_Lafr" };		var foundStream = {"linus": false, "slick": false};		//Linus Status Test		$.ajax({ 			url: "https://api.twitch.tv/kraken/search/streams?limit=1&q=" + streams.linusTwitchChannel 		}).done(function(data_linus){			if(data_linus._total > 0){				if(data_linus.streams[0].channel.url === "http://www.twitch.tv/" + streams.linusTwitchChannel.toLowerCase()){					foundStream.linus = true;					twitchStreamMessages.linusStream = data_linus.streams[0].channel.status;				}				else {					//Found a similar channel, not the real one					foundStream.linus = false;					localStorage.linusStream = "false";				}			}			else {				//No Such Channel Online				foundStream.linus = false;				localStorage.linusStream = "false";			}			//Slick Twitch Status			$.ajax({ 				url: "https://api.twitch.tv/kraken/search/streams?limit=1&q=" + streams.slickTwitchChannel 			}).done(function(data_slick){				if(data_slick._total > 0){					if(data_slick.streams[0].channel.url === "http://www.twitch.tv/" + streams.slickTwitchChannel.toLowerCase()){						foundStream.slick = true;						twitchStreamMessages.slickStream = data_slick.streams[0].channel.status;					}					else {						//Found a similar channel, not the real one						foundStream.slick = false;						localStorage.slickStream = "false";					}				}				else {					//No Such Channel Online					foundStream.slick = false;					localStorage.slickStream = "false";				}				//Did we find any streams?				if(foundStream.linus || foundStream.slick)				{					//We sure did, let's see who's there					if(foundStream.linus && localStorage.linusStream == "true")					{						//Still online					}					else if(foundStream.linus && localStorage.linusStream == "false")					{						//Has come online since last check						localStorage.linusStream = "true";							var options = {								type: "basic",								title: "Linus' Stream is now Live!",								message: data_linus.streams[0].channel.status,								contextMessage: "Click here to check it out",								iconUrl: "linus_twitch.png"							}							var notID = "ltt_twitch_linus";							notify(notID, options, true, false);					}					if(foundStream.slick && localStorage.slickStream == "true")					{						//Still online					}					else if(foundStream.slick && localStorage.slickStream =="false")					{						//Has come online since last check						localStorage.slickStream = "true";							var options = {								type: "basic",								title: "Slicks' Stream is now Live!",								message: data_slick.streams[0].channel.status,								contextMessage: "Click here to check it out",								iconUrl: "slick_twitch.png"							}							var notID = "ltt_twitch_slick";							notify(notID, options, true, false);					}					//At least one stream was online, so switch icon					chrome.browserAction.setIcon({"path": "icon_twitch.png"});				}				else				{					//Neither stream is online					chrome.browserAction.setIcon({"path": "icon.png"});				}			});		});		}

When I open the extension popup I query the background.js script to get local storage data on which streams are online, and then handle the popup markup to show and hide the elements that I want in the callback for that query:

chrome.extension.sendMessage({twitch: "whatsup"},  function(callback)		{			//Twitch Status			if(callback.response === "twitch"){				var twitch = callback.data;				if(twitch.linus == "true" || twitch.slick == "true")				{					$('#twitch').addClass("live");					//at least one stream is online					console.log("at least one stream is online, show twitch");					if(twitch.linus == "true") {						$('#twitchLinus').addClass('live').find('.profileTitle > span').html(twitch.linusMessage);					}					else						$('#twitchLinus').removeClass('live');					if(twitch.slick == "true") {						$('#twitchSlick').addClass('live').find('.profileTitle > span').html(twitch.slickMessage);					}					else						$('#twitchSlick').removeClass('live');				}				else				{					//None is online, hide twitch					$('#twitch').removeClass("show");				}				//$('#content').css('height', $('#main').height());			}		});

Here's how the background.js recieves the status query:

chrome.runtime.onMessage.addListener(	  	function(request, sender, sendResponse)	  	{		  if(request.twitch == "whatsup"){		        var twitchData = '{"linus": localStorage.linusStream, "slick": localStorage.slickStream, "linusMessage": twitchStreamMessages.linusStream, "slickMessage": twitchStreamMessages.slickStream}';		        sendResponse({response : "twitch", data : {		  			"linus": localStorage.linusStream, 		  			"slick": localStorage.slickStream, 		  			"linusMessage": twitchStreamMessages.linusStream, 		  			"slickMessage": twitchStreamMessages.slickStream		  			}		  		});		  	}	  	}	);

You can't quite copy-paste this thing, but you should be able to figure out how to use it.

Cheers,

Linus Forsell

thanks ,

snapy

Sign In

Chrome Extension Help

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Topics

Latest From Linus Tech Tips:

The Humble PC

Latest From Tech Quickie:

What Are the Download Speeds in Space?

Latest From TechLinked:

Goodbye, TikTok

Latest From GameLinked:

Video Games Are Dying.

Latest From ShortCircuit:

The World's Fastest CPU (Technically...) - Intel i9-14900KS

Latest From Mac Address:

Why did you buy an Apple Vision Pro?

Latest From Channel Super Fun:

I Swapped the CEO's Assistant For a Day!