Add: inclusion/exclusion API

background/background.js

@@ -22,6 +22,11 @@ window.API_METHODS = Object.assign(window.API_METHODS || {}, {
   styleExists: styleManager.styleExists,
   toggleStyle: styleManager.toggleStyle,
 
+  addInclusion: styleManager.addInclusion,
+  removeInclusion: styleManager.removeInclusion,
+  addExclusion: styleManager.addExclusion,
+  removeExclusion: styleManager.removeExclusion,
+
   getTabUrlPrefix() {
     return this.sender.tab.url.match(/^([\w-]+:\/+[^/#]+)/)[1];
   },

background/style-manager.js

@@ -57,10 +57,13 @@ const styleManager = (() => {
     importStyle,
     importMany,
     toggleStyle,
-    setStyleExclusions,
     getAllStyles, // used by import-export
     getStylesByUrl, // used by popup
     styleExists,
+    addExclusion,
+    removeExclusion,
+    addInclusion,
+    removeInclusion
   });
 
   function handleLivePreviewConnections() {
@@ -92,6 +95,11 @@ const styleManager = (() => {
     });
   }
 
+  function escapeRegExp(text) {
+    // https://github.com/lodash/lodash/blob/0843bd46ef805dd03c0c8d804630804f3ba0ca3c/lodash.js#L152
+    return text.replace(/[\\^$.*+?()[\]{}|]/g, '\\$&');
+  }
+
   function get(id, noCode = false) {
     const data = styles.get(id).data;
     return noCode ? getStyleWithNoCode(data) : data;
@@ -182,10 +190,47 @@ const styleManager = (() => {
       .then(newData => handleSave(newData, 'editSave'));
   }
 
-  function setStyleExclusions(id, exclusions) {
+  function addIncludeExclude(id, rule, type) {
-    const data = Object.assign({}, styles.get(id).data, {exclusions});
+    const data = Object.assign({}, styles.get(id).data);
+    if (!data[type]) {
+      data[type] = [];
+    }
+    if (data[type].includes(rule)) {
+      throw new Error('The rule already exists');
+    }
+    data[type].push(rule);
     return saveStyle(data)
-      .then(newData => handleSave(newData, 'exclusions'));
+      .then(newData => handleSave(newData, 'styleSettings'));
+  }
+
+  function removeIncludeExclude(id, rule, type) {
+    const data = Object.assign({}, styles.get(id).data);
+    if (!data[type]) {
+      return;
+    }
+    const index = data[type].indexOf(rule);
+    if (index < 0) {
+      return;
+    }
+    data[type].splice(index, 1);
+    return saveStyle(data)
+      .then(newData => handleSave(newData, 'styleSettings'));
+  }
+
+  function addExclusion(id, rule) {
+    return addIncludeExclude(id, rule, 'exclusions');
+  }
+
+  function removeExclusion(id, rule) {
+    return removeIncludeExclude(id, rule, 'exclusions');
+  }
+
+  function addInclusion(id, rule) {
+    return addIncludeExclude(id, rule, 'inclusions');
+  }
+
+  function removeInclusion(id, rule) {
+    return removeIncludeExclude(id, rule, 'inclusions');
   }
 
   function deleteStyle(id) {
@@ -479,14 +524,7 @@ const styleManager = (() => {
   }
 
   function buildGlob(text) {
-    const prefix = text[0] === '^' ? '' : '\\b';
+    return '^' + escapeRegExp(text).replace(/\\?\*/g, m => m.length > 1 ? m : '.*') + '$';
-    const suffix = text[text.length - 1] === '$' ? '' : '\\b';
-    return `${prefix}${escape(text)}${suffix}`;
-
-    function escape(text) {
-      // FIXME: using .* everywhere is slow
-      return text.replace(/[.*]/g, m => m === '.' ? '\\.' : '.*');
-    }
   }
 
   function getDomain(url) {