How to use BOTH theme and content-scripts in manifest.json Chrome Extension?

Question

I'm trying to make a chrome theme that has both stylistic features (in the manifest "theme" element) and a content script (in "content-scripts" element). I've encountered a strange error where the content script only runs when there is no "theme" element.

My content-script.js is just-

console.log("content-script.js");

When I format my manifest.json file like this with no "theme" element it works-

{
   "manifest_version": 2,
   "name": "Test",
   "version": "1.0",
   "content_scripts": [
      {
          "matches": ["<all_urls>"],
          "js": ["content-script.js"]
      }
   ]
}

But when I add even an empty theme element my content script does not run-

{
   "manifest_version": 2,
   "name": "Test",
   "version": "1.0",
   "content_scripts": [
      {
          "matches": ["<all_urls>"],
          "js": ["content-script.js"]
      }
   ],
   "theme": {}
}

Anyone know why this happens, and how I can fix it?

Answer 1

You cannot. In Chrome, themes and extensions are two different things.

A theme is a special kind of extension that changes the way the browser looks. Themes are packaged like regular extensions, but they don't contain JavaScript or HTML code.

That's why when you include the "theme" field in your manifest.json, your extension can't run any content scripts.

I'd recommend you check the Regular Extension Documentation and also the Theme Documentation to see differences between each of them.

For Firefox, though, there is a theme API available.