Add tab communication

background/storage.js

@@ -298,7 +298,6 @@ function filterStylesInternal({
   const filtered = asHash ? {length: 0} : [];
   const needSections = asHash || matchUrl !== null;
   const matchUrlBase = matchUrl && matchUrl.includes('#') && matchUrl.split('#', 1)[0];
-
   let style;
   for (let i = 0; (style = styles[i]); i++) {
     if ((enabled === null || style.enabled === enabled)
@@ -483,9 +482,14 @@ function getApplicableSections({
   // but the spec is outdated and doesn't account for SPA sites
   // so we only respect it in case of url("http://exact.url/without/hash")
 }) {
-  if (!skipUrlCheck && !URLS.supported(matchUrl) || omitCode !== false && isPageExcluded(matchUrl, style.exclusions)) {
+  const excluded = isPageExcluded(matchUrl, style.exclusions);
+  if (!skipUrlCheck && !URLS.supported(matchUrl) || omitCode !== false && excluded) {
     return [];
   }
+  // Show excluded style in popup
+  if (excluded) {
+    return [''];
+  }
   const sections = [];
   for (const section of style.sections) {
     const {urls, domains, urlPrefixes, regexps, code} = section;

edit/edit.js

@@ -190,6 +190,12 @@ function onRuntimeMessage(request) {
     case 'editDeleteText':
       document.execCommand('delete');
       break;
+    case 'exclusionsUpdated':
+      debounce(() => exclusions.update({
+        list: Object.keys(request.style.exclusions),
+        isUpdating: false
+      }), 100);
+      break;
   }
 }
 

js/exclusions.js

@@ -16,13 +16,17 @@ const exclusions = (() => {
 
   // get exclusions from a select element
   function get() {
-    exclusions.list = {};
+    const list = {};
     $$('#excluded-wrap input').forEach(input => {
       const url = input.value;
       if (url && validExclusionRegex.test(url)) {
-        exclusions.list[url] = createRegExp(url);
+        list[url] = createRegExp(url);
       }
     });
+    exclusions.list = Object.keys(list).sort().reduce((acc, ex) => {
+      acc[ex] = list[ex];
+      return acc;
+    }, {});
     return exclusions.list;
   }
 
@@ -54,7 +58,7 @@ const exclusions = (() => {
     const block = $('#excluded-wrap');
     block.textContent = '';
     const container = document.createDocumentFragment();
-    list.forEach(value => {
+    list.sort().forEach(value => {
       addExclusionEntry({container, value});
     });
     block.appendChild(container);
@@ -158,6 +162,7 @@ const exclusions = (() => {
       style.exclusions = exclusionList;
       style.reason = 'exclusionsUpdated';
       API.saveStyle(style);
+      notifyAllTabs({method: 'exclusionsUpdated', style, id});
     });
   }
 

popup/popup-exclusions.js

@@ -162,6 +162,7 @@ const popupExclusions = (() => {
         entry.styleMeta = style;
         entry.classList.toggle('excluded', isExcluded(tabURL, style.exclusions));
       }
+      notifyAllTabs({method: 'exclusionsUpdated', style, id: entry.styleId});
     }
     return Promise.resolve();
   }

popup/popup.js

@@ -35,6 +35,7 @@ function onRuntimeMessage(msg) {
   switch (msg.method) {
     case 'styleAdded':
     case 'styleUpdated':
+    case 'exclusionsUpdated':
       if (msg.reason === 'editPreview') return;
       handleUpdate(msg.style);
       break;