Merge pull request #351 from 0styx0/feature/implement_replace_js_func…

…tion

#214 feature/implement replace js function

README.md

@@ -5,3 +5,15 @@ FoxReplace allows you to replace text fragments in a page by other text fragment
 You can have predefined substitutions in a substitution list to apply them all at once, and also do individual substitutions. You also have the option to apply the substitution list automatically whenever a page is loaded.
 
 [![Install From AMO](https://addons.cdn.mozilla.net/static/img/addons-buttons/AMO-button_1.png)](https://addons.mozilla.org/firefox/addon/foxreplace/)
+
+
+### Replace with Function
+- Syntax: JavaScript
+- The provided input will run as the `return` statement to `string.replace` and can use the same variables mentioned in [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace#specifying_a_function_as_the_replacement)
+  - Example:
+    - Replace: `dino(saur)`
+      - `Regular Expression`
+    - With: `"great big " + match + " biga" + p1.toUpperCase()`
+      - `Function`
+    - Result: `great big dinosaur bigaSAUR`
+

_locales/ca/messages.json

@@ -66,6 +66,14 @@
     "message": "Expressió regular"
   },
 
+  "outputType.text": {
+    "message": "Text"
+  },
+
+  "outputType.function": {
+    "message": "Funció"
+  },
+
   "options.title": {
     "message": "Opcions de FoxReplace"
   },
@@ -134,6 +142,10 @@
     "message": "Estat:"
   },
 
+  "options.output.function.warning": {
+    "message": "Avís: L'ús de la configuració \"substitueix per funció\" permet l'execució arbitrària de JavaScript"
+  },
+
   "options.subscription.warning.header": {
     "message": "Avís: feu servir només fonts de confiança"
   },
@@ -278,10 +290,18 @@
     "message": "Amb"
   },
 
+  "list.outputTypeHeader": {
+    "message": "Tipus de sortida"
+  },
+
   "list.outputHint": {
     "message": "Escriviu la sortida..."
   },
 
+  "list.outputFunction": {
+    "message": "Sortida de la funció"
+  },
+
   "list.caseSensitiveHeader": {
     "message": "Distingeix entre majúscules i minúscules"
   },
@@ -351,6 +371,10 @@
     "message": "Distingeix entre majúscules i minúscules"
   },
 
+  "toolbar.outputIsFunction": {
+    "message": "Funció de sortida"
+  },
+
   "toolbar.replace": {
     "message": "Reemplaça"
   },

_locales/en/messages.json

@@ -66,6 +66,14 @@
     "message": "Regular expression"
   },
 
+  "outputType.text": {
+    "message": "Text"
+  },
+
+  "outputType.function": {
+    "message": "Function"
+  },
+
   "options.title": {
     "message": "FoxReplace options"
   },
@@ -134,6 +142,10 @@
     "message": "Status:"
   },
 
+  "options.output.function.warning": {
+    "message": "Warning: Using \"replace with function\" setting allows for arbitrary JavaScript execution"
+  },
+
   "options.subscription.warning.header": {
     "message": "Warning: use only trusted sources"
   },
@@ -278,10 +290,18 @@
     "message": "With"
   },
 
+  "list.outputTypeHeader": {
+    "message": "Output Type"
+  },
+
   "list.outputHint": {
     "message": "Type output..."
   },
 
+  "list.outputFunction": {
+    "message": "Function output"
+  },
+
   "list.caseSensitiveHeader": {
     "message": "Match case"
   },
@@ -351,6 +371,10 @@
     "message": "Match case"
   },
 
+  "toolbar.outputIsFunction": {
+    "message": "Output function"
+  },
+
   "toolbar.replace": {
     "message": "Replace"
   },

manifest.json

@@ -17,7 +17,7 @@
 
   "description": "__MSG_extensionDescription__",
 
-  "content_security_policy": "script-src 'self'; object-src 'self'; style-src 'self' 'unsafe-inline'",
+  "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'; style-src 'self' 'unsafe-inline'",
 
   "permissions": ["<all_urls>", "alarms", "menus", "downloads", "storage"],
 

options/gridcomponents.js

@@ -126,19 +126,28 @@ class DeleteButtonCellRenderer {
 }
 
 /**
- *  Cell editor for the input type. Shows a dropdown menu with the options.
+ * Provides base functionality for creating dropdowns within ag-grid's cell editor
+ *
+ * to use, specify `this.colId` and `this.options`
+ * @param colId - agGrid's `field` name
+ * @param options - <option>s generated by `DropdownEditor` appear in the form <option value={i}>{this.options[i]}</option>
  */
-class InputTypeEditor {
+class DropdownEditor {
+
+  /** @type {string} */
+  colId;
+  /** @type {string[]} */
+  options = [];
 
   static getOption(params, value, text) {
     return '<option value="' + value + '"' + (value == params.value ? ' selected' : '') + '>' + text + '</option>';
   }
 
   init(params) {
     this.gui = $('<select>' +
-                  InputTypeEditor.getOption(params, 0, browser.i18n.getMessage("inputType.text")) +
-                  InputTypeEditor.getOption(params, 1, browser.i18n.getMessage("inputType.wholeWords")) +
-                  InputTypeEditor.getOption(params, 2, browser.i18n.getMessage("inputType.regExp")) +
+                  this.options.reduce((accum, curOption, i) =>
+                    accum + DropdownEditor.getOption(params, i, browser.i18n.getMessage(curOption))
+                  , '') +
                  '</select>')[0];
     this.width = params.column.actualWidth;
     this.api = params.api;
@@ -151,7 +160,7 @@ class InputTypeEditor {
   afterGuiAttached() {
     this.gui.style = `width: ${this.width}px`;
 
-    if (this.api.getFocusedCell().column.colId == "inputType") {
+    if (this.api.getFocusedCell().column.colId == this.colId) {
       this.focusIn(); // special case for when edition starts in this cell
     }
   }
@@ -170,6 +179,33 @@ class InputTypeEditor {
 
 }
 
+/**
+ *  Cell editor for the input type. Shows a dropdown menu with the options.
+ */
+class InputTypeEditor extends DropdownEditor {
+
+  colId = "inputType"
+
+  options = [
+    "inputType.text",
+    "inputType.wholeWords",
+    "inputType.regExp"
+  ];
+}
+
+
+/**
+ *  Cell editor for the output type. Shows a dropdown menu with the options.
+ */
+class OutputTypeEditor extends DropdownEditor {
+  colId = "outputType"
+
+  options = [
+    "outputType.text",
+    "outputType.function",
+  ];
+}
+
 /**
  *  A cell editor that shows a checkbox.
  */
@@ -203,3 +239,4 @@ class CheckboxCellEditor {
   }
 
 }
+