Chrome Extension only works on "developer.chrome.com"

Question

This is my first chrome extension so please forgive me for asking such a novice question. My extension currently only works on 'developer.chrome.com' (icon has color) but I would like it to work on amazon.com (icon is gray). From googling, I didn't see anyone else come up with the same problem so I'm guessing it must be a mistake on my end. Here is my manifest.json:

{
  "name": "Reviews Extension",
  "version": "1.0",
  "description": "Get additional reviews from third party retailers",
  "permissions": [
    "https://api.walmartlabs.com/",
    "https://www.amazon.com/",
    "activeTab",
    "declarativeContent",
    "storage"
  ],
  "content_scripts": [
    {
      "matches": [
        "<all_urls>"
      ],
      "js": ["content.js"]
    }
  ],
  "options_page": "options.html",
  "background": {
    "scripts": [
      "background.js"
    ],
    "persistent": false
  },
  "page_action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "images/get_started16.png",
      "32": "images/get_started32.png",
      "48": "images/get_started48.png",
      "128": "images/get_started128.png"
    }
  },
  "icons": {
    "16": "images/get_started16.png",
    "32": "images/get_started32.png",
    "48": "images/get_started48.png",
    "128": "images/get_started128.png"
  },
  "manifest_version": 2
}

UPDATE: When I fiddled with background.js on the pageUrl: {hostEquals: 'developer.chrome.com'}, I found when I delete the URL, it no longer works on developer.chrome.com. But when I changed it to https://www.amazon.com/ in place of developer.chrome.com, it didn't work on amazon's main page either.

'use strict';

chrome.runtime.onInstalled.addListener(function () {
  chrome.storage.sync.set({ color: '#3aa757' }, function () {
    console.log('The color is green.');
  });
  chrome.declarativeContent.onPageChanged.removeRules(undefined, function () {
    chrome.declarativeContent.onPageChanged.addRules([{
      conditions: [new chrome.declarativeContent.PageStateMatcher({
        pageUrl: { hostEquals: 'developer.chrome.com' },
      })],
      actions: [new chrome.declarativeContent.ShowPageAction()]
    }]);
  });
});

UPDATE 2: Got it working by change the pageURL in background.js. It had to be formatted in a very specific way: www.amazon.com, NOT https://www.amazon.com, amazon.com, or any other variations. I am still unable to add multiple websites by adding commas in between, any ideas there?

Answer 1

Try adding more conditions and using hostContains or urlContains instead of hostEquals.

For example:

chrome.declarativeContent.onPageChanged.removeRules(undefined, function () {
    chrome.declarativeContent.onPageChanged.addRules([{
        conditions: [
            new chrome.declarativeContent.PageStateMatcher({
                pageUrl: { hostContains: '.developer.chrome.com' },
            }),
            new chrome.declarativeContent.PageStateMatcher({
                pageUrl: { hostContains: '.amazon.com' },
            })
        ],
        actions: [new chrome.declarativeContent.ShowPageAction()]
    }]);
});