Angular 6 with Chrome device toolbar click event firing multiple times

I’m new to the world of Angular and am just starting a web app in Angular 6. I ran into this strange problem today while trying to show/hide my menu on a click. For some reason, in the Chrome device toolbar (trying to emulate a phone to develop for mobile first) it will fire the click event twice unless I use the very edge of the touch circle on the icon. It works in the normal Chrome window with the mouse pointer as well as in Firefox’s “responsive design mode” which basically is the same thing as Chrome’s device toolbar mode. This makes me suspect it has something to do with the simulated touch it’s doing, but I’m not sure. Is there anything I’m doing wrong or that I should be worried about? Or this a weird Chrome bug? I’m not to the point where I can actually test this on a phone, sadly.

In-progess code below:


And the component here:

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

  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.scss']
export class HeaderComponent implements OnInit {

  showMenu = false;

  constructor() {


  toggleMobileMenu() {
    this.showMenu = !this.showMenu;

  ngOnInit() {


angular elements in gmail chrome extension

i have project to insert angular elements in gmail chrome extension for injecting the elements i use inboxSDK(it can be make also with plain js).
the issue is un expected behave in the keyup events on inputs and also angular material not working properly. for example the open only on second click and inputs with matInput directive animation not applied on focus. and another wired issue with keyup event some keys not displayed on the input i see the event happen but the text inside the input not change. from what i checked (space and v but there is more). but when i check the angular element in plain html everything working as expected. what make it different when it in gmail chrome extension.

for compiling the angular element i used the instructions from:

attached my angular element code:

import {
} from '@angular/core';

  selector: 'custom-input',
  templateUrl: './custom-input.component.html',
  styleUrls: ['./custom-input.component.css'],
  encapsulation: ViewEncapsulation.Native
export class CustomInputComponent implements OnInit, AfterViewInit {

  public text: string = ' ';
  constructor() {

  ngOnInit() {
  ngAfterViewInit() {

  onkeyUp(x) {
    this.text = x;




import { BrowserModule } from '@angular/platform-browser';
import { NgModule, Injector } from '@angular/core';
import { createCustomElement } from '@angular/elements';

import { AppComponent } from './app.component';
import { CustomInputComponent } from './custom-input/custom-input.component';
import {BrowserAnimationsModule} from "@angular/platform-browser/animations";
import {MatButtonModule, MatInputModule, MatMenuModule} from "@angular/material";

  declarations: [
  imports: [
  providers: [],
  entryComponents: [
export class AppModule {

  constructor(private injector: Injector) {}

  ngDoBootstrap() {
    const el = createCustomElement(CustomInputComponent, {injector: this.injector});
    customElements.define('custom-input', el);


chrome.tabs.query callback in angular not refreshing view

I have created a simple extension for Chrome using angular-cli. I want the extension’s popup to display the URL of the current tab. However the view does not seem to get updated when setting a property from chrome.tabs.query callback. I have confirmed with a console.log that the callback is getting called and the correct URL is being returned.

What am I doing wrong?


import { Component } from '@angular/core';

  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
export class AppComponent {
  currentLocation = '';

  ngOnInit() {
    chrome.tabs.query({"active": true, "currentWindow": true}, (tabs) => {
      this.currentLocation = tabs[0].url;


You are at {{ currentLocation }}!


    "manifest_version": 2,
    "name": "Test Extension",
    "version": "1.0.0",
    "permissions": [
    "browser_action": {
        "default_title": "Open Popup!",
        "default_popup": "index.html"
    "icons": {
        "19": "assets/Icon-19.png",
        "38": "assets/Icon-38.png"
    "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'"

network request showing api call data Security

I have a WEB Api call (GetCustomers) which get a list of customers and that works fine.
Problem is in the Network Request after I have logged in I can see GetCustomers and on clicking this I can see the complete list of customers.

Is there a way to hide these calls from being displayed?
See attached – don’t want the GetRulesValidation call and resulting data to be displayed in the Network Request Tab within Chrome.

I am using Angular4 on the Front End and a C# WEB API.


NetworkRequest in Chrome

How can my chrome extension listen for a data loading event on a webpage with Angular?

I am creating a chrome extension which needs to modify data that is loaded after the user clicks on a button on the given webpage. I have tried simply using the HTML DOM onClick event, which doesn’t quite work because after the button is clicked, the data is not yet loaded so there is no data to be modified (I just want to add a column to the table that is loaded in after the button click). I have tried using the deprecated SubTreeModified route, but this does not seem like a good practice, among a myriad of other issues.

tl;dr: Website has a button -> click opens a panel which loads data into a table for display. I want to modify that table, but I can’t use onClick because there is a delay between the click and the loaded data.

Can Chrome Debugger exclude node_modules files?

I am debugging through an Angular 5 application in the Chrome Debugger. Skipping through the core.js, zone.js and observable files can become cumbersome. Are there any fancy tips or tricks for excluding those files from my debugging?

Angular 5 Chrome Devtools CPU maxed out after changed dropdown value

I am recently learning to optimize my application performance but I failed to get answer of my current problem.

Step to repro

  1. Go to with Chrome browser
  2. Click Open in new browser at top right
  3. Expand devtools and switch to Performance tab
  4. Start to record.
  5. Change value of dropdown “Hero Power” few times.
  6. Stay for few seconds and end recording

enter image description here

The CPU usage is constantly high after changed dropdown value.

This is an expected behaviour?

How to reduce the cpu usage back to normal?

Making a phone call app with Angular and install it as an Chrome extention

Pretty complicated right ?

I know its trivial to call a phone from a Ionic application, but I wonder if we can do the same thing in a Angular application installed on Chrome as an extention.

The reason says it wont work at least on desktop Chrome, as it doesnt have native support and functionality. It may work on mobile Chrome as we are on mobiles.

But I wonder if someone has tried something like that, and if yes, I would love to hear more details.


monitor the browser url in browser extension

I want to create a browser extension to help me search for words each time I open a web page.
I want to add a listener to the browser that will alert the extension each time the user enter a new website so it could scan the new page.
How can I add a listener (or perhaps there is another way to do it?)

Also I write my extension in angular 5 ,so if I can add a listener for angular it will be great

how to use angular 5 to build chrome extension

I am trying to build a chrome extension using angular 5.
I created a basic angular app using Angular Material and it worked great as an angular app (I used ng build to check).
I tried to move the application to be a chrome extension so I used ng build to create the code and I added the following manifest

   "name": "Getting Started Example",
   "version": "1.0",
   "description": "Build an Extension!",
   "background": {
      "scripts": ["runtime.js","polyfills.js","styles.js","vendor.js","main.js"],
      "persistent": false
    "page_action": {
       "default_popup": "index.html"
    "manifest_version": 2

the background scripts are the scripts the angular compiler created and are used to render the app.
I upload my extension but I got this error

Uncaught EvalError: Refused to evaluate a string as JavaScript because
‘unsafe-eval’ is not an allowed source of script in the following
Content Security Policy directive: “script-src ‘self’ blob:
filesystem: chrome-extension-resource:”.

what does it mean? how can I run my angular application as a chrome extension?