изменить значок в расширении Chrome на основе URL сайта

Question

Я пытаюсь изменить значок расширения Chrome в зависимости от URL-адреса страницы, на которой сейчас находится пользователь.Другие ответы, которые я нашел работу, однако ломаются, когда я запускаю несколько открытых вкладок.

В настоящее время я могу достичь желаемой функциональности следующим образом:

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

  chrome.storage.sync.set({color: '#3aa757'}, function() {
    console.log('hello world');
  });

      var rule1 = {
        conditions: [
          new chrome.declarativeContent.PageStateMatcher({
            pageUrl: { hostEquals: 'xxxx.com'},
          })
        ],
        actions: [ new chrome.declarativeContent.ShowPageAction() ]
      };

      var rule2 = {
            conditions: [
              new chrome.declarativeContent.PageStateMatcher({
                pageUrl: { hostEquals: 'xxxx.com'},
              })
            ],
            actions: [ new chrome.declarativeContent.ShowPageAction() ]
          };

      var rule3 = {
            conditions: [
              new chrome.declarativeContent.PageStateMatcher({
                pageUrl: { hostEquals: 'xxxx.com'},
              })
            ],
            actions: [ new chrome.declarativeContent.ShowPageAction() ]
          };

      chrome.declarativeContent.onPageChanged.removeRules(undefined, function() {
          chrome.declarativeContent.onPageChanged.addRules([rule1, rule2, rule3]);
        });
});

Тем не менее, это кажется очень грязным и кажется, что должен быть более легкий путь.

Если я попытаюсь добавить или логику к pageUrl, она будет работать только для первого условного оператора.