I'm working on a small Chrome extension that needs to run in the background. However, I understand that that isn't possible when I'm using a popup. After some reading it seems that the best option is to create popup.js in order run the background.js, using chrome.extension.getBackgroundPage() function.

Can someone please show me an example of how it's done?

here's the manifest:

"browser_action": {
"permissions": ["background"],
"default_popup": "popup.html"},
"options_page": "options.html",
"background": {
    "scripts": ["background.js"],
    "persistent" : true
}

I've included the popup.js reference in popup.html:

<script src="popup.js"></script>

And created a variable in popup.js

var bkg = chrome.runtime.getBackgroundPage();

so now I need a way to activate the background.js Do I need to run the relevant function inside background.js from popup.js, or give a general command for the background.js to run?

I'm working on a small Chrome extension that needs to run in the background. However, I understand that that isn't possible when I'm using a popup. After some reading it seems that the best option is to create popup.js in order run the background.js, using chrome.extension.getBackgroundPage() function.

Can someone please show me an example of how it's done?

here's the manifest:

"browser_action": {
"permissions": ["background"],
"default_popup": "popup.html"},
"options_page": "options.html",
"background": {
    "scripts": ["background.js"],
    "persistent" : true
}

I've included the popup.js reference in popup.html:

<script src="popup.js"></script>

And created a variable in popup.js

var bkg = chrome.runtime.getBackgroundPage();

so now I need a way to activate the background.js Do I need to run the relevant function inside background.js from popup.js, or give a general command for the background.js to run?

• javascript
• google-chrome
• google-chrome-extension

• I have edited my answer. Note that this solution is OK if you do not have "persistent": false in your manifest.json. Otherwise see the answer from @Pawelmhm – lexasss Commented Jan 15, 2014 at 21:17

2 Answers 2

Yes, you need to call function from background in your popup. Here's a simple example which demonstrates how it works.

background.js

function backgroundFunction () {
    return "hello from the background!"
}

popup.js

(function () {
    var otherWindows = chrome.extension.getBackgroundPage();
    console.log(otherWindows.backgroundFunction()); 
})();

When you inspect your popup.js you'll see "hello from the background!" in your console. GetBackgroundPage() simply returns window object for your background page, as you probably know all variables are attached to this window object so in this way you will get access to function defined in background scripts.

There is a sample code demonstrating this in chrome documentation see Idle Simple Example and look at file history.js

The background page is loaded then you extension is loaded into Chrome.

Consider the popup page just as a normal web-page: here, you need to use chrome.runtime to make requests to the background page.

Usually, I do it using an implicit (temporal) or explicit (permanent) channel. With temporal channel:

popup.js

chrome.runtime.onMessage.addListener(function (answer) { /* your code */ });
chrome.runtime.sendMessage({cmd: "shutdown"});

background.js

chrome.runtime.onMessage.addListener(function (request) {
    if (request.cmd === "shutdown") {
        shutdown();
    }
});   

With permanent channel:

popup.js

var port = chrome.runtime.connect({name: "myChannel"});

port.onMessage.addListener(function (answer) { /* your code */ });
port.postMessage({cmd: "shutdown"});

background.js

chrome.runtime.onConnect.addListener(function (port) {
    port.onMessage.addListener(function (request) {
        if (request.cmd === "shutdown") {
            shutdown();
        }
    }
});

UPD. While this way of content-backgrounf communication is fully functional, the current specs advice using chrome.runtime.getBackgroundPage() to call a function in the background script is the requests shouldn't be asynchronous (thus, less coding is needed and easier to read the code). See the manual and other answers to this post to clarify this matter.