Lightning Autofill Quick Start Guide

Install Chrome extension Install Firefox add-on Install Edge extension

Introduction

Welcome to the world of programmable instant autofill! Lightning Autofill does not magically autofill form fields for you. It’s a rule-based system where you define rules that match the fields you want to autofill. The rules tell Lightning Autofill what values to fill out or what JavaScript actions to perform for each field. Autofilling is the core functionality, but Lightning Autofill can do a lot of other things like automation, storing boilerplate text (text snippets), and backing up your form data as you type.

Try it out

To autofill your first form, visit the demo form. You should see most of the fields automatically filled out—congrats on your first autofill! 🥳 The autofilled values come from the “Sample address” profile. Let’s open up this profile by going to OptionsForm Fields tab.

This profile contains a set of generic address rules that match the autocomplete attribute, so they should work in a lot of forms out of the box. To prevent the sample address rules from executing on every page, the profile has a Site filter restricting the rules to only the greenido.github.io domain. For more practice, head over to the Practice Form to get familiar with manually creating rules in Lightning Autofill.

How rules work

When you land on a web page, Lightning Autofill looks through all of the rules in the active profile and execute rules where the Name value matches the value of one of the supported attributes in a form field. Common attributes to match against are name and id, but Lightning Autofill supports a bunch more (see Online Help).

The special markers like ^ and \b in the “Sample address” rules are part of regular expressions (regex), a powerful text matching engine supported by Lightning Autofill. This allows you to match almost any form field you come across, even ones where the attribute values change on every load. You can sharpen your regex skills on regex101.com. If regex is not your cup of tea, then you can also match form fields using CSS selectors.

Generating rules

For most forms that use standard HTML tags, Lightning Autofill should be able to generate the autofill rules for you, which is a lot faster than manually creating them yourself. To see this in action, follow these steps:

  1. After autofilling the demo form from above, right-click on the page and select Lightning AutofillAdd rules for this page.
  2. Let’s store the new rules in a different profile. Select “New” from the profile dropdown menu and give it the name “Practice”. The newly created profile will become the active profile. Profiles are a great way to organize your rules.
  3. Reload the demo form. You should see the form fields autofill using the new rules you just generated.

Resources