Angular as background script will not execute unless icon is clicked

Question

I have setup my chrome extension's background to use angular. Here is my manifest.

{
    "manifest_version": 2,
    "name": "Canary",
    "description": "Provides a means to add shopping items to your Canary wishlists",
    "version": "1.0",
    "author": "Enlisted Innovations LLC",
    "icons": {
        "96": "/assets/icons/canary-icon.png"
    },
    "browser_action": {
        "default_title": "Canary",
        "default_popup": "index.html#/home"
    },
    "background": {
        "scripts": [
            "/main.js"
        ],
        "persistent": false
    },
    "content_scripts": [{
        "matches": ["*://*.google.com/*"],
        "js": ["content-script.js"]
    }],
    "permissions": [
        "webNavigation",
        "activeTab",
        "identity",
        "tabs",
        "activeTab",
        "http://*/*",
        "https://*/*/*"
    ],
    "content_security_policy": "script-src 'self' 'unsafe-eval' https://maxcdn.bootstrapcdn.com https://ajax.googleapis.com; object-src 'self'"
}

I create a listener for messages in my app.component.ts just as a test to see if it would work.

import { Component, OnInit} from '@angular/core';
import { GlobalRef } from './globalref';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'app';

  private window;

  constructor(private globalRef: GlobalRef) {
    this.window = this.globalRef.nativeGlobal.window;
    this.chromeConnect();
  }

  public ngOnInit() {
    // this.chromeConnect()
  }

  private chromeConnect() {
    const tabQueryData = { active : true, currentWindow: true };

    this.window.chrome.tabs.query(tabQueryData, (tabs) => {
        const port = window.chrome.tabs.connect(tabs[0].id);
        port.postMessage("Hello");
        port.onMessage.addListener((response) => {
          alert("Content script responded: " + response);
        });
    });

    this.window.chrome.runtime.onMessage.addListener((req, sender, sendResponse) => {
      alert("Message received");
      const response = "hello";
      sendResponse(response);
    });
  }
}

If I include a background.js file such as

(function() {
    alert("testing");
    this.window.chrome.runtime.onMessage.addListener((req, sender, sendResponse) => {
        alert("Message received");
        const response = "hello";
        sendResponse(response);
      });
})()

Then I can bundle a content-script using gulp that sends a message to be intercepted by it just fine. Everything works.

My problem is that unless I open my chrome extension by clicking on the icon in the browser, the angular application doesn't not run and the call from my content-script receives an undefined response. If I open the popup by clicking on the icon, I can then send messages to it and it responds just fine.

Can someone tell me how to force my background angular code to run? I'm fairly new to chrome extensions and have not been able to find anything helpful online.

If I obtain the popup html, will it also execute the angular that is behind it? If so then I'll just call the getPopup and inject it into the active page.

Answer 1

runtime.onMessage is only called when a message is sent, what you need is runtime.onStartup which is called whenever Chrome starts up. You also need to add background.js to background scripts in your manifest.json.