CODEWITHSUNDEEP
google-chromegoogle-chrome-extension
Shalin Shah
Shalin Shah

Reputation: 8183

Google Extensions - Running in background

I am trying to make a google extension that plays music. I want the extension to also play when I close the extension and surf other sites. Do I have to change the code of the manifest.json, background.html, or main.html (my index/popup file)? Here is the code of my manifest.json:

{
    "name": "SpeedSongz.fm",
    "description": "Instantly listen to your favorite music and radios.",
    "version": "1.0",
    "browser_action": {
        "default_icon": "icon.png",
        "default_title": "SpeedSongz.fm",
        "popup": "main.html"
    },
    "background_page" : "background.html"
}

So how do I make the code so that the music will keep running in the background even thought the actual extension is closed? Is it possible? Thanks!

Upvotes: 1

Views: 2105

Answers (2)

Attila Kling
Attila Kling

Reputation: 1787

plus feature could be, to create two function in bakcround page, one stops the music, and the other restarts it:

function stop(){

}

function start(){

}

So, when the user opens main.html, there could be two icons with two listeners on it, each one could call background pages function, like:

var backgroundpage = chrome.extension.getBackgroundPage();
$("start_button").click(function(){
backgroundpage.start();
});

$("stop_button").click(function(){
backgroundpage.stop();
});

:)

Edit:

popup.html:

<html><head><script type="text/javascript" src="jquery.js"></script> 
<script>
$(document).ready(function(){
    var bgp = chrome.extension.getBackgroundPage();
    $("#start_btn").click(function(){
        bgp.start();
    });

    $("#stop_btn").click(function(){
        bgp.stop();
    });
});
</script>
</head><body>
<div>
    <button type="button" id="start_btn">Start</button>
    <button type="button" id="stop_btn">Stop</button>
</div>
</body></html>

background.html:

<html><head><script type="text/javascript" src="jquery.js"></script> 
<script>
var audio = new Audio('guitar.mp3');
audio.loop="loop";
audio.play();

function start(){
    audio.play();
}

function stop(){
    audio.pause();
}

</script>
</head><body></body></html>

And thats it :)

Upvotes: 4

Greg Inozemtsev
Greg Inozemtsev

Reputation: 4671

Background pages serve exactly this purpose. They act like regular pages, but are invisible (unless you access developer mode of course). A background page is active the entire time that your extension is loaded.

In order to communicate with the background page from your site you would use a content script and send a message to the page.

Upvotes: 2

Related Questions