inform if the found style doesn't match site url

_locales/en/messages.json

@@ -1280,6 +1280,12 @@
     "message": "No styles found for this site.",
     "description": "Error text in the popup when inline search didn't find any site-specific styles"
   },
+  "searchResultNotMatching": {
+    "message": "The style is installed but it doesn't apply to the current site URL."
+  },
+  "searchResultNotMatchingNote": {
+    "message": "Try asking the author of this userstyle to add the URL.\n\nYou can also open the style in the manager and edit it yourself,\nbut be aware it disables automatic updates for this style."
+  },
   "searchResultRating": {
     "message": "Rating",
     "description": "Text for label that shows the search result's rating"

popup.html

@@ -172,6 +172,12 @@
     <div class="search-result-empty"></div>
   </template>
 
+  <template data-id="searchResultNotMatching">
+    <p class="not-matching-explainer"
+       i18n-text="searchResultNotMatching"
+       i18n-title="searchResultNotMatchingNote"></p>
+  </template>
+
   <script src="js/polyfill.js"></script>
   <script src="js/msg.js"></script>
   <script src="js/messaging.js"></script>

popup/search-results.css

@@ -36,8 +36,9 @@ body.search-results-shown {
 
 .search-result,
 .search-result-empty {
+  --pad: 8px;
   position: relative;
-  padding: 8px 8px 21px;
+  padding: var(--pad) var(--pad) 21px;
   min-height: 160px;
 }
 
@@ -209,6 +210,14 @@ body.search-results-shown {
   margin-top: 4px;
 }
 
+.not-matching-explainer {
+  padding: var(--pad);
+  margin: calc(-1 * var(--pad)) calc(-1 * var(--pad)) var(--pad);
+  border-bottom: 2px solid hsla(25, 100%, 60%, .5);
+  background-color: hsla(25, 100%, 60%, .2);
+  cursor: help;
+}
+
 .search-results-nav {
   flex-direction: row;
   text-align: center;

popup/search-results.js

@@ -366,6 +366,15 @@ window.addEventListener('showStyles:done', () => {
       $('.search-result-status', entry).textContent = '';
       hide('.search-result-customize', entry);
     }
+    const notMatching = installedId > 0 && !$.entry(installedId);
+    if (notMatching !== entry.classList.contains('not-matching')) {
+      entry.classList.toggle('not-matching');
+      if (notMatching) {
+        entry.prepend(t.template.searchResultNotMatching.cloneNode(true));
+      } else {
+        entry.firstElementChild.remove();
+      }
+    }
     Object.assign($('.search-result-screenshot', entry), {
       onclick: isInstalled ? uninstall : install,
       title: isInstalled ? '' : t('installButton'),