angulargoogle-chrome-extensionangular-cliangular2-mdlangular-mdl

Chrome extension + angular-cli : UI issues after build

I wrote an app with a sticky header on the top using angular2 mdl layouts. Recently I rewrote the code to get a more flexible custom header.

Since then, when I build the app (ng build) and import it as an unpacked extension, the content in my container doesn't scroll anymore. Nonetheless, the build works flawlessly in a 'casual' browser window, i.e when the app is hosted on a local server and opened in chrome.

What could be the problem ?

Here is the angular-cli project. You can test it with ng serve. Then load the result (dist folder) produced by the ng build command as an unpacked extension. Don't forget to add the manifest to the folder.

And here is a plunker

The code itself :

app.component.ts

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

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

app.component.html

  <div class="header-wrap" mdl-shadow="2">      
      <div class="header-title"> 
        <span class="header-title">{{title}}</span>
      </div>
      <div class="header-search-input">              
          <span class="header-search">{{search}}</span>
      </div>
  </div>

  <div class="container">
    <h6>test</h6>
    <br><br>
    <h6>test</h6>
    <br><br>
    <h6>test</h6>
    <br><br>
    <h6>test</h6>
    <br><br>
    <h6>test</h6>
    <br><br>
    <h6>test</h6>
    <br><br>
    <h6>test</h6>
    <br><br>
    <h6>test</h6>
    <br><br>
    <h6>test</h6>
    <br><br>
    <h6>test</h6>
    <br><br>
    <h6>test</h6>
    <br><br>
    <h6>test</h6>
    <br><br>
    <h6>test</h6>
    <br><br>
    <h6>test</h6>
    <br><br>
    <h6>test</h6>
    <br><br>
    <h6>test</h6>
    <br><br>
    <h6>test</h6>
    <br><br>
    <h6>test</h6>
    <br><br>
    <h6>test</h6>
    <br><br>
    <h6>test</h6>
    <br><br>
    <h6>test</h6>
    <br><br>
  </div>

index.html 

!doctype html>
<html>
<head>
  <base href="/">
  <meta charset="utf-8">
  <title>Mosaic Chrome Extension</title>
  <style>
    body {
      font-family: 'Roboto', sans-serif;
      font-family: 'Open Sans', sans-serif;
      font-size: 100%;
      height: 600px;
      width: 800px;
      min-width: 800px;
      max-width: 800px;
    }
    #status {
      /* avoid an excessively wide status text */
      white-space: pre;
      /*text-overflow: ellipsis;*/
      /*overflow: hidden;   */
      width: 800px;
      min-width: 800px;
      max-width: 800px;      
      height: 600px;

    }
  </style>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link href="https://fonts.googleapis.com/css?family=Open+Sans|Roboto" rel="stylesheet">
</head>
<body>
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.deep_orange-indigo.min.css" />
  <!-- charts -->
  <app-root>Loading...</app-root>
</body>
</html>
Solution

  • After much hair pulling, it appears that Google Chrome Extensions don't like the min & max width parameters.

    Setting both to :

      min-width: 799px;
  max-width: auto;

    Did the trick. Go figure.

    Edit Jun 17 : I also encountered afterwards awkward behaviour from Angular Material and Mdl components, that were not or partially working. Upon further investigation it appeared that the Angular Zones were broken and that I needed to refresh the UI state manually by calling zone.run(() => {}); From the different tests I did, it looks like this problem was also causing that weird scrolling issue.