How to detect debug extension tab?

Question

While building my Chrome extension, it's often very useful to open a new browser tab and paste this into it:

chrome-extension://xyzfegpcoexyzlibqrpmoeoodfiocgcn/popup.html

When I do that I'm able to work on my popup UI without it ever closing, and without having to click the extension icon at the top right and have the popup sometimes close on me.

Here's the problem: I need my js (referenced by popup.html) to know whether i'm in this debug tab, or whether it's running in "regular mode" (clicking the extension icon and running it normally). I first tried this:

var isDebugExtensionTab = (location.href.indexOf("chrome-extension:") == 0);

That doesn't work because it always evaluates to true -- that is the location.href in all cases, debug tab or regular mode.

How can I detect the difference?

Answer 1

Use chrome.tabs.getCurrent:

Gets the tab that this script call is being made from. May be undefined if called from a non-tab context (for example: a background page or popup view).

var isDebugExtensionTab = false;
chrome.tabs.getCurrent(function(tab) { isDebugExtensionTab = !!tab; });

It's asynchronous as all chrome.* API methods that may accept a callback so the result won't be available until the current context exits. If you need to use the value immediately, do it in the callback:

var isDebugExtensionTab = false;
chrome.tabs.getCurrent(function(tab) {
    isDebugExtensionTab = !!tab;
    runSomeDebugFunction();
});