Set default height in Chrome BrowserAction Popup

I use following code to open a chrome browser action popup. I have specified min-width & min-height to html & body element, but it doesn’t seem to work, as I can see a small white box when I click on icon & then my content & styles get applied. I am trying to set default dimensions so there shouldn’t be a small white box at first at all!

chrome.browserAction.setPopup({
  popup: 'index.html',
})

In my css:

html,
body {
  margin: 0;
  min-width: 200px;
  min-height: 300px;
}

Angular as background script will not execute unless icon is clicked

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.

Chrome Extension use both declarativeContent and browserAction

We are trying to write a chrome extension which displays a sidebar but only on certain pages to add additional information. We are using code like so:

chrome.runtime.onInstalled.addListener(function () {

chrome.declarativeContent.onPageChanged.removeRules(undefined, function () {
    chrome.declarativeContent.onPageChanged.addRules([{
        conditions: [new chrome.declarativeContent.PageStateMatcher({
            pageUrl:
            {
                schemes: ['http', 'https'],
                hostSuffix: urlHosttoFilter
            },
        })
        ],
        actions: [new chrome.declarativeContent.ShowPageAction()]
    }]);
});

chrome.webNavigation.onCompleted.addListener(function (e) {
    console.log("webNavigation onCompleted");
    console.log(e);

    sendMessage(e.tabId, e.url);
}, { url: [{ urlContains: urlFilter }] });

chrome.webNavigation.onHistoryStateUpdated.addListener(function (e) {

    console.log("webNavigation onHistoryStateUpdated");
    console.log(e);

    sendMessage(e.tabId, e.url);
}, { url: [{ urlContains: urlFilter }] });

});

This is all working well and the content-script receives the message but because of the way we are using filters sometimes if they navigate to a url that should not display it appears to remain as the filter stops the action from ever firing. Also we want to be able to let the users hide the sidebar using the icon but when we try to use:

chrome.browserAction.onClicked.addListener(function () {
chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
    console.log("Send toggle message to content scripts");
    chrome.tabs.sendMessage(tabs[0].id, "toggle");
})
});

We have to add “browser_action”: {} which then prevents the declarativeContent from working.

Is there a better way to do this, should we not use declarativeContent and if not what is the best way in a chrome extension of running the content script based on the host and url filters we are using?

chrome.browserAction.onClicked fires when I load a new page

I am developing a very simple extension for Google Chrome which sets a badge text when the user presses the browser action icon. Here is the background.js:

chrome.browserAction.onClicked.addListener(function() {
        chrome.browserAction.setBadgeText({text: "Ko"});});

When I load the extension for the first time in chrome://extensions there’s no problem and works properly, but if I close and open the browser and then I go to a webpage the Badge text appears automatically even when I have not pressed the browser action icon as you can see in the image:

enter image description here

This is my manifest.json:

{
"name": "Hello Extensions",
"description": "Base level extension",
"version": "1.0",
"manifest_version": 2,
"browser_action": {
    "default_icon": "check-circle-green-512.png"
},

"background": {
    "scripts":["background.js"]
  },

  "permissions": ["storage", "alarms", "notifications"]

}

Thanks for the help and greetings.

Fill form via chrome extension popup

I want to load values from fill.js and when the anchor link in extension popup.html is clicked it will autofill form fields on a remote page that has field IDs of #user + #pw. This is what i currently have in my extension but i’m not sure if it’s missing something in the manifest file or if back.js is needed.

fill.js

$(document).ready(function() {
 $("#fill").click(function(){
 $("#user").val("[email protected]")
 $("#pw").val("pass123")
 })
})

Popup.html

Fill

Manifest

 {
   "manifest_version": 2,

       "name": "Fill",
       "description": "",
       "version": "1.0",

        "background" : {
        "scripts" : ["back.js"]
         },

        "content_scripts": [
          {
          "matches": ["http://*/*","https://*/*"],
          "js": ["jquery.js","fill.js"]
          }
          ],

          "browser_action": {
            "default_icon": "icon.png",
             "default_title": "fill",
             "default_popup": "popup.html"
          },

          "permissions": [
            "tabs",
            "http://*/*",
            "https://*/*"    
          ]
        }

Back.js

chrome.browserAction.onClicked.addListener(function() {
        chrome.tabs.executeScript(null, {file: "jquery.js"});
        chrome.tabs.executeScript(null, {file: "fill.js"});
});

Remote form fields