How to make Chrome Extension icon change to indicate it has successfully placed a specific query string in a URL?

Question

Created my first ever Chrome extension. First post here.

It is used to place a search argument in a particular websites upon clicking the icon. It is very rough, but it works and successfully updates the search criteria returning the desired results, which is the core aim. (I am not a programmer, which is no doubt blatantly obvious!)

I am using page action to un grey the icon once at the applicable site. I us Onclick to append the query string to the URL and refresh by way of popup.js. This is seemingly a very rough way to do it, but it works.

How can I arrange things so the extension icon changes visually to indicate the query string has been placed in the URL & still exists there. This particular website subsequently flushes my search string out if the user manipulates the sites regular search criteria. So I would like the icon to be dynamic, changing when my query string is in place and change back when the site flushes it out. But also retaining the page action awareness so it greys and is inactive when off the website.

Manifest.json

{
  "manifest_version": 2,
  "name": "Filter",
  "description": "Filter a site for something.",
  "version": "1.4",

  "page_action": {
    "default_title": "Filter website for an item",
    "default_icon": {
      "16": "get_started16.png",
      "32": "get_started32.png",
      "48": "get_started48.png",
      "128": "get_started128.png"
    }
  },
  "icons": {
    "16": "get_started16.png",
    "32": "get_started32.png",
    "48": "get_started48.png",
    "128": "get_started128.png"
  },
  "background":{
    "scripts":["background.js", "backgroundicon.js"]
  },

  "permissions": ["activeTab", "tabs", "declarativeContent"]

}

background.js

chrome.pageAction.onClicked.addListener(function(tab) {
  chrome.tabs.executeScript(null, {
    "file": "popup.js"
  }, function(){ 
    "popup.js";
    console.log("Script Executed ...");
  });
})

backgroundicon.js

// When the extension is installed or upgraded ...
chrome.runtime.onInstalled.addListener(function() {
  // Replace all rules ...
  chrome.declarativeContent.onPageChanged.removeRules(undefined, function() {
    // With a new rule ...
    chrome.declarativeContent.onPageChanged.addRules([
      {
        // That fires when a page's URL contains text 'airbnb' ...
        conditions: [
          new chrome.declarativeContent.PageStateMatcher({
            pageUrl: { urlContains: 'website.com'},
                }),
           new chrome.declarativeContent.PageStateMatcher({
             pageUrl: { urlContains: 'website.co.uk' }
          })
        ],
        // And shows the extension's page action.
        actions: [ new chrome.declarativeContent.ShowPageAction() ]
      }
    ]);
  });
});

popup.js

// Change the url to include item Socks when clicked

window.location.search += '&socks3B%2D=22'

I have used popup.js because it works. I gather I should really be using some form of error checking to see if the string is present, so it is not duplicated. Also to place ? instead of & for a lone query, but the reality is this site always has a search query of some sort in place.

For now I am really just trying to work out how make the icon change to reflect my custom search argument is in place. The website does not let the user place this specific query at present. Hence the need for the extension.

How do I achieve this?