Angular dev, body has an off white background in chrome?

Image of the issue

Anyone know why the body of my chrome when doing development shows an offwhite color? I’ve validated on other PC’s I don’t have this problem, even when using the same extensions/account in chrome.

It only effects the body and grows/shrinks accordingly. Even setting the background/color of body to #fff doesn’t change it, and looking in the console for chrome there doesn’t appear to be any styling being applied. Its driving me nuts.

RouterLink in Angular 5 not show real path on DevTooLs

I want to know is this bug or specification that i can’t find.
In Angular 5, when I use routerLink like this


All works fine and I can route to URL /account/order/5aaaa0c6fd204609b3bd2577/messages in my component.
But if I open Chrome DevTools (I try it in Firefox DevTools too) I see line like this:


I tried to use different assigns for routerLink, but for all of that I got cutting real href (I put creating url string in component.ts and put only string variable in routerLink and other methods like [routerLink] creation). For first time it looks like ng-reflect-router-link have not so much length.
But I try use simple string in href and in DevTools I see normal link like this:

Anybody know, why I getting cutting real href? Maybe exist specialization or documentation for this behaviour or this looks like a bug and i need create issue on GitHub angular repo?

Component cannot subscribe to data source

I have this component listening for messages from a service. Note that every console.log() statement shown below is hit at least once, everything gets logged.

Here is the component:

import {Component, OnInit, Inject} from '@angular/core';
import {ChromeDataService} from '../../../../shared/services/events';


@Component({
  providers: [ChromeDataService],
  selector: 'app-events-list',
  templateUrl: './events-list.component.html',
  styleUrls: ['./events-list.component.scss']
})

export class EventsListComponent implements OnInit {

  isShowEventsList = false;
  events = [];

  constructor(private data: ChromeDataService) {
       console.log('events list component is constructed.');
  }

  ngOnInit() {
    console.log('events list component ngOnInit called.');
    this.data.currentMessage.subscribe(message => {
      console.log('adding message to array: ', message);
      this.events.push(message);
    })
  }

  showEventsList() {
    this.isShowEventsList = true;
  }

  hideEventsList() {
    this.isShowEventsList = false;
  }

}

here is the data source (an Angular service):

///

import {Injectable, Component, Inject} from '@angular/core';
import {ReplaySubject} from "rxjs/ReplaySubject";

@Injectable()
export class ChromeDataService {

  private messageSource = new ReplaySubject();
  public currentMessage = this.messageSource.asObservable();
  private isListening: boolean = false;
  private listener: any;

  constructor() {

    const self = this;
    this.listener = function (msg, sender, sendResponse) {
      const parsed = JSON.parse(msg);
      console.log('extension received a message:', parsed);
      self.changeMessage(parsed);
    };
  }

  changeMessage(message: Object) {
    this.messageSource.next(message);
  }

  stopListening() {
    this.isListening = false;
    chrome.runtime.onMessage.removeListener(this.listener);
  }

  startListening() {
    this.isListening = true;
    chrome.runtime.onMessage.addListener(this.listener);
  }


}

does anyone know why when changeMessage() is called, that the subscribe() callback does not get invoked?

One big hint is that when I use new BehaviorSubject('initial'); instead of new Subject() – then initial does arrive and ‘adding message to array’ is logged.

content script is not showing up in Chrome Dev Tools

I have this setting in my manifest.json:

  "content_scripts": [
    {
      "matches": ["http://*/*"],
      "css": [],
      "js": ["content-script.js"]
    }
  ],

here is the code in the content-script.js file:

console.log('this is the content script.');

chrome.browserAction.onClicked.addListener(function(tab) {

  console.log('the following tab was clicked:', tab);

  chrome.tabs.executeScript({
    code: 'document.body.style.backgroundColor="red"'
  });
});

if I click on the popup button and open the Chrome extension, and click “inspect” and open Dev Tools, I don’t see any content scripts listed:

enter image description here

However, now it gets really weird, because Chrome says that it can’t find the manifest.json file:

enter image description here

However, it’s clear that it could find my background.js script, which is declared in my manifest.json file:

enter image description here

As you can see, the options page, and background page are recognized. So it seems like Chrome does recognize/detect the manifest file.

Anybody have an idea of what might be wrong? How can I get my content-scripts to be loaded?

Refused to evaluate a string as JavaScript because ‘unsafe-eval’ is not an allowed

I get this error when reloading my Chrome Extension:

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:".


    at new Function ()
    at evalExpression (compiler.js:33919)
    at jitStatements (compiler.js:33937)
    at JitCompiler.webpackJsonp.../../../compiler/esm5/compiler.js.JitCompiler._interpretOrJit (compiler.js:34520)
    at JitCompiler.webpackJsonp.../../../compiler/esm5/compiler.js.JitCompiler._compileTemplate (compiler.js:34448)
    at compiler.js:34347
    at Set.forEach ()
    at JitCompiler.webpackJsonp.../../../compiler/esm5/compiler.js.JitCompiler._compileComponents (compiler.js:34347)
    at compiler.js:34217
    at Object.then (compiler.js:474)

I have this in my manifest.json:

 "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'"

is there any other setting I can use to avoid that error?