0

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.

Highspeed
  • 442
  • 3
  • 18
  • `"persistent": false` means the background script is unloaded after 5 seconds of inactivity. Clicking the icon is an activity which wakes up the background page. – wOxxOm Aug 02 '18 at 11:22
  • Also, the documentation says your listeners should be re-added each time the script runs - I'm not familiar with Angular so I don't know if this is happening in your script. – wOxxOm Aug 02 '18 at 11:25
  • Did you manage to set it up? – Srdan Jun 28 '21 at 14:36
  • 1
    Hi @Srdan; sorry, it's been so long I don't remember. I ended up foregoing the idea of utilizing angular in a chrome extension though. – Highspeed Jul 10 '21 at 19:28

1 Answers1

0

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.

Patrick
  • 48
  • 5
  • I have indeed added the background.js to my manifest under background scripts. The background.js runs just fine. My problem is that I need my angular script to run to authenticate the user and store a bearer token. Perhaps I've approached this all wrong. My experience so far has been that until I click on my extension icon the angular application doesn't run. Likely because my index.html where angular begins at is my default_popup. I had hoped to use my angular script as the background.js, but it seems this isn't going to work. – Highspeed Aug 02 '18 at 21:12