Greasemonkey script to auto fill the values of a form on a specified page I created a Greasemonkey script to allow me to quickly fill a specific form on a specific URL, for testing/dev purposes. If the current URL matches any of the urls found in the formsDefault array a button is added to the page that allows the user to auto fill with the default values.

This is my first time using arrow functions in JS.

/*jshint esversion: 6 */

(function($) {
    'use strict';

    var formDefaults = [
        {
            urlPattern : '/profile/user',
            valueSet : [
                { selector : '#username', value : 'bill' },
                { selector : '#lastname', value : 'miller' },
                { selector : '#auth_pin', value : '1234' },
            ]
        },
        {
            urlPattern : '/profile/company',
            valueSet : [
                { selector : '#companyname', value : 'bill' },
                { selector : '#state', value : 'washington' },
            ]
        },
    ];

    var formFiller = {
        valueSet : null,

        run(formDefaults) {
            var valueSetObj = this.tryEachPattern(this);
            if (valueSetObj !== null) {
                this.valueSet = valueSetObj.valueSet;
                this.showFormFillButton(this);
            }
        },

        tryEachPattern : (_this) =&gt; {
            var valueSetObj = null;
            for (var i = formDefaults.length - 1; i &gt;= 0; i--) {
                valueSetObj = formDefaults[i];
                var matched = _this.matchUrl(_this, valueSetObj.urlPattern);
                if (matched === true)
                {
                    break;
                }
            }
            return valueSetObj;
        },

        matchUrl : (_this, urlPattern) =&gt; {
            var matched = !!location.href.match(urlPattern);
            return matched;
        },

        fillForm : (_this) =&gt; {
            var valueSet = _this.valueSet;
            for (var i = valueSet.length - 1; i &gt;= 0; i--) {
                var value = valueSet[i];
                $(value.selector).val(value.value);
            }
        },

        showFormFillButton : (_this) =&gt; {
            var button = $('&lt;button type="button" style="position: absolute; right: 10px; bottom: 10px"&gt;Auto Fill&lt;/button&gt;');
            button.on('click', function(event) {
                event.preventDefault();
                _this.fillForm(_this);
            });
            $('body').append(button);
        },
    };

    // Ready, set, go
    formFiller.run(formDefaults);

})(jQuery);
While your code is generally easy to read and understand, I believe you have slightly over complicated things, there's no need to define an object with several methods to autocomplete a form.

Before I get to that though, let's take a look at your code.


Good work with encapsulating all of your code in an IIFE and forcing strict mode.
formDefaults is a decent name, I was able to guess almost exactly what it would contain when I first read it. However, since it also contains the page url, I would rename this to pages. urlPattern is also decent, though I expected it to be a regex due to the pattern suffix. valueSet on the other hand gives me absolutely no information about what it contains. I'd recommend renaming this to something like defaults.
The run method accepts a formDefaults parameter, but doesn't use it. It calls tryEachPattern and tryEachPattern uses the variable declared outside formFiller. If you take parameters, you should use them. 
Using arrow functions doesn't actually help you here. Every single arrow function in this code takes a _this parameter. Arrow functions are supposed to make working with this easier, not more cumbersome! Just use regular functions if you need to pass a _this argument.
tryEachPattern is more complex than it needs to be. There is an Array.find method which can find a match in an array for you and returns undefined if the value was not found.
Don't explicitly compare boolean values with ===, in tryEachPattern you can just do if (matched) which is easier to read.
Don't assign a result to a variable just to return that variable. var matched = ...; return matched can just be written as return ....
Don't use String.match to test if a string contains another string. Use String.includes.
Prefer const and let to var. const is especially helpful as it tells readers that the assigned value will not be changed (though it could be mutated).
In fillForm, there's no need to write a bounded for loop. Prefer for...of pattern or the Array.forEach call to make it easier to immediately know you are looping over everything.
I don't see any reason that the click handler should call event.preventDefault(), the button won't cause any navigation so it shouldn't be necessary unless the page does something odd.
If the page is already including jQuery, it makes sense to use it here as it simplifies the creation of the auto fill button. Otherwise, it only takes like 4 more lines of code and I would recommend dropping the jQuery dependency to speed up your script.
jQuery provides a .click method as a shorter alternative to .on('click', ...
Destructuring is an amazing tool that can make code easier to read by giving immediate access to desired properties on an object.


At the start I mentioned that this was more complicated than it needed to be. Here is how I would write an equivalent script.

/*jshint esversion: 6 */
(function ($) {
    'use strict';

    const pages = [
        {
            url: '/profile/user',
            defaults: [
                { selector: '#username', value: 'bill' },
                { selector: '#lastname', value: 'miller' },
                { selector: '#auth_pin', value: '1234' },
            ]
        },
        {
            url: '/profile/company',
            defaults: [
                { selector: '#companyname', value: 'bill' },
                { selector: '#state', value: 'washington' },
            ]
        },
    ];

    const page = pages.find(({ url }) =&gt; location.href.includes(url));

    if (page) {
        const button = $('&lt;button type="button" style="position: absolute; right: 10px; bottom: 10px"&gt;Auto Fill&lt;/button&gt;');
        button.click(() =&gt; {
            for (const { selector, value } of page.defaults) {
                $(selector).val(value);
            }
        });
        $('body').append(button);
    }

})(jQuery);