just-jeb

chrome.runtime.onInstalled.addListener(() => {
  chrome.storage.sync.set({ color: '#3aa757' });
  chrome.webNavigation.onCompleted.addListener(() => {
    chrome.tabs.query({ active: true, currentWindow: true }, ([{ id }]) => {
      if (id) {
        chrome.action.disable(id);
      }
    });
  }, { url: [{ hostContains: 'google.com' }] });
});

just-jeb

{
  "name": "Great Extension",
  "version": "1.0",
  "description": "Build an Extension with Angular",
  "manifest_version": 3,
  "permissions": [
      "activeTab",
      "webNavigation",
      "storage",
      "scripting"

just-jeb

{
  "name": "Great Extension",
  "version": "1.0",
  "description": "Build an Extension with Angular",
  "manifest_version": 3,
  "permissions": [
      "activeTab",
      "webNavigation",
      "scripting"
  ],

just-jeb

export class AppComponent implements OnInit {
  color = '#ffffff';

  public colorize() {
    chrome.tabs.query({ active: true, currentWindow: true }, tabs => {
      chrome.scripting.executeScript({
        target: { tabId: tabs[0].id! },
        func: updateBackgroundColor,
        args: [this.color]
      });

just-jeb

/******/ (() => { // webpackBootstrap
/******/ 	"use strict";
var __webpack_exports__ = {};
/*!***************************!*\
  !*** ./src/background.ts ***!
  \***************************/

chrome.runtime.onInstalled.addListener(() => {
 // Blah blah the rest of our code
});

just-jeb

import type { Configuration } from 'webpack';

module.exports = {
  entry: { background: { import: 'src/background.ts', runtime: false } },
} as Configuration;

just-jeb

{
  "name": "Great Extension",
  "version": "1.0",
  "description": "Build an Extension with Angular",
  "manifest_version": 3,
  "permissions": [
      "activeTab",
      "webNavigation"
  ],
  "background": {

just-jeb

chrome.runtime.onInstalled.addListener(() => {
  chrome.webNavigation.onCompleted.addListener(() => {
    chrome.tabs.query({ active: true, currentWindow: true }, ([{ id }]) => {
      if (id) {
        chrome.action.disable(id);
      }
    });
  }, { url: [{ hostContains: 'google.com' }] });
});

just-jeb

"architect": {
  "build": {
      "options": {
        ...
        "optimization": {
          "styles": {
            "inlineCritical": false
          }
        }
      }

just-jeb

{
  "name": "Great Extension",
  "version": "1.0",
  "description": "Build an Extension with Angular",
  "manifest_version": 3,
  "action": {
      "default_popup": "index.html"
  }
}