Why is chrome.tabs undefined in the background page?

Question

I'm trying to write a Google Chrome extension.

The documentation and even sample code say that a background page can run JavaScript on the active tab using the chrome.tabs.executeScript method, but chrome.tabs is always undefined when I break in the debugger.

This behavior is manifest in both my code and the Google sample code.

The Real Question: How do I run JavaScript on the active tab from a background page in a Chrome extension?

---

background.js:

chrome.browserAction.onClicked.addListener(function(tab) {
  debugger;
  // chrome.tabs is undefined here
  chrome.tabs.executeScript({
    code: "console.log('hi')"
  });
});

manifest.js:

{
  "manifest_version": 2,

  "name": "Hello World",
  "description": "Says 'hello' to the world.",
  "version": "0.1",

  "permissions": ["tabs", "activeTab"],

  "browser_action": {
    "default_title": "hi"
  },

  "background": {
    "scripts": ["background.js"]
  }
}

---

Things I've tried:

• Setting the persistent flag on background in the manifest file to false, true, "false", and "true"
• Including the "tabs" permission

---

The runtime throws this error when I try access chrome.tabs:

Lazy require of tabs.binding did not set the binding field

Answer 1

wOxxOm's comment diagnosed this correctly:

This is a bug [in Chrome] when you use debugger; statement.

However, I've found it goes deeper than that. A breakpoint alone was sufficient to give me this issue. Thanks to this SO answer for pointing out that breakpoints can also cause this problem.

You have to be thorough to "clear out" the debugger. The debugger window must be closed when the extension is reloaded. Simply closing the debugger window without reloading was not enough to make the problem go away.