Omnibar | Text field component that supports term auto | Autocomplete library

Looking through your site and CSS files I found that this is a problem with hierarchy. CSS works its way from top to bottom. Whichever comes last is most likely to be used. And it seems that the CSS from your idx-omnibar comes in last. It is loaded at the bottom of the document.

Check if you can configure the placement of the idx-omnibar CSS file in your document to make it load on the top of your page. There might be a plugin setting.

However, it is possible to use other features of CSS to work around this, such as specificity. The more specific a CSS selector is, the more likely it will be used. Unless another selector with the same specificity comes after it. Read more about this in this article on MDN.

You can use ul[hidden] to select the ul elements with that attribute.

That error message definitely means the port has been disconnected. There are a few reasons this might happen. A common one is that the extension reloaded/updated/reinstalled. If you hit the reload button from chrome://extensions, all old ports disconnect. Another possible cause is that something anomalous happened (e.g. your laptop's battery ran low and entered low-power mode).

The fix is a little bit complicated... You have to detect the port's disconnection (using port.onDisconnect form the content script) and establish a new connection. Unfortunately, it's not as simple as calling chrome.runtime.connect() again. If your extension was updated to a new version, you lose access to the old extension context and its chrome.* APIs. You have to reload a whole new iframe (and remove the old iframe).

I do this in my extension Saka Key. You can check its source code.

By the way, iframes that contain extension pages aren't content scripts. They actually are privileged contexts with direct access to the background page.