132

I could get the extension to work in Orion but here is the code for the firefox extension (there is also one for chrome) https://github.com/thdoan/autofill-firefox (https://addons.mozilla.org/en-US/firefox/addon/autofill-quantum/?utm_source=addons.mozilla.org&utm_medium=referral&utm_content=search)

It seems to work by generating rules (manaully telling it to) when you fill in a form. Thess rules are then resued later if another site used the same CSS tags or HTML tags or something like that.

I tested it on chrome and it worked great for the two sites I tried it on. I went to a site added things to the cart then went to check out and filled in my info, clicked the Generate AutoFill Rules button. Went to another site and added things to the cart went to checkout and it autofilled the info.

  • Vlad replied to this.

    jpp46 Thanks! So the user has to manually create rules for each new site?

      Vlad Yes and No, if the new site matches the same (what I think might be regex patterns or perhaps it is css tags) as the previous sites then it will do the autofill automatically but if it is different another rule must be added.

      So for instance I tested it with a site that had a checkout that looks like this:

      And then I went to another site and it had the same setup and it autofilled all of my info (although in the extension I had to change that I wanted the rules it learned to apply to other sites as well by default they seem to be set as per site)

      I don't know if it is a great solution, it would obviously be nicer to have a bunch of built in rules that give maybe 90% coverage but then more could be added...?

      Here are the rules it made just so you can see:

      I made the site field blank and then it works on other sites.

      Anyways I know I am just one person but I think a solution like this that come pre loaded with a bunch of rules (especially for known cases where there is a proper html tag) that gives good general coverage but allows for new rules to be learned would be great.

      And of course it would be nice to have the option to have multiple credit cards or addresses you select from
      to use on the rules.

      I also wanted to mention (if you might be interested) that we could do a machine learning based approach where we determine appropriate autofill based on image inference. I work at a university and have many studetns who would be interested in testing something like that out as a fun project (it might be to heavy for a browser extension though...?).

      • Vlad replied to this.

        jpp46 Thanks this is excellent information. This is exactly how other pbrowsers do it just come with a DB of predefined rules. I did not see any browser allow this db to be 'expanded'.

        I am wondering can you export the rules from the extension? So that we can crowdsource initial rules from the most popular sites?

          2 months later

          I just tried Orion and it's pretty much my dream browser: an up-to-date Safari on my old Mojave installation (which I have no intention of upgrading from), only better! But there appears to be one gaping hole in the feature set: no forms autofill, so I can't store my name, address, credit card details etc. This must surely be coming in the release version right? Or am I somehow missing this functionality?

            Merged 2 posts from Forms Autofill?.

              Vlad Using the Firefox add-on, you can easily export and import in CSV : )

              • Vlad replied to this.

                CitizenEldon Right, what I meant was someone using the extensions to get the basic rules for popular sites that we can use as a base.

                  3 months later

                  Vlad

                  regarding rules, I made this as a programmable button a while ago. and been using it ever since and it works in vast majority of cases for me.

                  I also couldnt find any open source rules to just copy, so what i did was just search signup and then make rules for each signup page it didnt work on. and i would say it works on 9 out of 10 of them now, so as a base it should be sufficient. the cases where it doesnt work its often not because it doesnt have the rules for it, just something with the way you input text that doesnt work.

                  // Replace the values below with your own contact information
                  const firstNameValue = "John";
                  const lastNameValue = "Doe";
                  const emailValue = "john.smith@example.com";
                  const phoneValue = "555-555-5555";
                  const streetNumberValue = "9,";
                  const streetNameValue = "Main St";
                  const unitNumberValue = "123";
                  const cityValue = "Anytown";
                  const stateValue = "CA";
                  const zipValue = "12345";
                  const fullNameValue = `${firstNameValue} ${lastNameValue}`;
                  const addressValue = `${streetNumberValue} ${streetNameValue} ${unitNumberValue}`;
                  
                  // Get a reference to the form fields
                  const fullNameField = document.querySelector('input[name*="navn"], input[name="name"], input[id="BillingAddress_Name"], #name');
                  const firstNameField = document.querySelector("input[id*='first'][type='text'], input[id*='fornavn'][type='text'], pwr-lib-form-field[label='Fornavn'] input[type='text'], input[name='firstName'], input[formcontrolname='firstName'], input[autocomplete='given-name'],input[id*='givenName'][type='text'], input[id*='FirstName'][type='text']");
                  const lastNameField = document.querySelector("input[id*='last'][type='text'], input[id*='efternavn'][type='text'], input[formcontrolname='lastName'], input[autocomplete='family-name'], input[id*='familyName'][type='text'], input[id*='LastName'][type='text']");
                  const emailField = document.querySelector("input[type='text'][autocomplete='email'], input[id*='email'][type='email'], input[id*='mail'][type='email'], input[id='BillingAddress_Email'], input[type='email'][formcontrolname='email'], input[name*='email'], input[type='email'], #email");
                  const phoneField = document.querySelector("input[type='tel'][autocomplete='tel'], input[id*='phone'][type='tel'], input[id*='telefon'][type='tel'], input[id='BillingAddress_TelefonPrimaer'], input[type='tel'][formcontrolname='phone'], input[name*='mobile'], input[name*='phone']");
                  const addressField = document.querySelector("input[type='text'][autocomplete*='address'], input[id*='address'][type='text'], input[id*='adresse'][type='text'], input[id='BillingAddress_Line1'], input[name*='streetName']");
                  const streetNameField = document.querySelector("input[id='street_name'][name='street_name'], input[name='street']");
                  const streetNumberField = document.querySelector("input[name='street_number'], input[name='streetNo']");
                  const unitNumberField = document.querySelector ("input[name='street_floor'], input[name='unitNo'], input[name='number']");
                  const cityField = document.querySelector("input[id*='city'][type='text'], input[id*='by'][type='text'], input[id='BillingAddress_City']");
                  const stateField = document.querySelector("input[id*='state'][type='text'], input[id*='stat'][type='text']");
                  const zipField = document.querySelector("input[name='postCode'], input[id*='zip'][type='text'], input[id*='postnr'][type='text'], input[id='BillingAddress_PostalCode'][type='text'], input[name='zipcode'], input[type='text'][autocomplete='postal-code']");
                  
                  
                  // Define an async function to simulate typing
                  async function typeInInput(value, inputField) {
                      // Iterate over each character in the value
                      for (var i = 0; i < value.length; i++) {
                        // Add the current character to the input field
                        inputField.value += value.charAt(i);
                    
                        // Trigger the "input" event to simulate typing
                        var inputEvent = new Event("input", { bubbles: true });
                        inputField.dispatchEvent(inputEvent);
                    
                        // Wait for a short delay before adding the next character
                        await new Promise(resolve => setTimeout(resolve, 50));
                      }
                    }
                    
                    // Define a function to set input field value and simulate typing
                    function setInputFieldValue(value, inputField) {
                      inputField.value = '';
                      typeInInput(value, inputField);
                    }
                    
                    // Set input field values and simulate typing
                    if (fullNameField) {
                      setInputFieldValue(fullNameValue, fullNameField);
                    }
                    
                    if (firstNameField) {
                      setInputFieldValue(firstNameValue, firstNameField);
                    }
                    
                    if (lastNameField) {
                      setInputFieldValue(lastNameValue, lastNameField);
                    }
                    
                    if (emailField) {
                      setInputFieldValue(emailValue, emailField);
                    }
                    
                    if (phoneField) {
                      setInputFieldValue(phoneValue, phoneField);
                    }
                    
                    if (streetNameField) {
                      setInputFieldValue(streetNameValue, streetNameField);
                    }
                    
                    if (addressField) {
                      setInputFieldValue(addressValue, addressField);
                    }
                    
                    if (cityField) {
                      setInputFieldValue(cityValue, cityField);
                    }
                    
                    if (stateField) {
                      setInputFieldValue(stateValue, stateField);
                    }
                    
                    if (zipField) {
                      setInputFieldValue(zipValue, zipField);
                    }
                    
                    if (streetNumberField) {
                      setInputFieldValue(streetNumberValue, streetNumberField);
                    }
                    
                    if (unitNumberField) {
                      setInputFieldValue(unitNumberValue, unitNumberField);
                    }
                    
                    // Set focus on input fields
                    if (fullNameField) {
                      fullNameField.focus();
                      fullNameField.dispatchEvent(new Event("change"));
                      fullNameField.blur();
                    }
                    
                    if (firstNameField) {
                      firstNameField.focus();
                      firstNameField.dispatchEvent(new Event("change"));
                      firstNameField.blur();
                    }
                    
                    if (lastNameField) {
                      lastNameField.focus();
                      lastNameField.dispatchEvent(new Event("change"));
                      lastNameField.blur();
                    }
                    
                    if (emailField) {
                      emailField.focus();
                      emailField.dispatchEvent(new Event("change"));
                      emailField.blur();
                    }
                    
                    if (phoneField) {
                      phoneField.focus();
                      phoneField.dispatchEvent(new Event("change"));
                      phoneField.blur();
                    }
                    
                    if (streetNameField) {
                      streetNameField.focus();
                      streetNameField.dispatchEvent(new Event("change"));
                      streetNameField.blur();
                    }
                    
                    if (addressField) {
                      addressField.focus();
                      addressField.dispatchEvent(new Event("change"));
                      addressField.blur();
                    }
                    
                    if (cityField) {
                      cityField.focus();
                      cityField.dispatchEvent(new Event("change"));
                      cityField.blur();
                    }
                    
                    if (stateField) {
                      stateField.focus();
                      stateField.dispatchEvent(new Event("change"));
                      stateField.blur();
                    }
                    
                    if (zipField) {
                      zipField.focus();
                      zipField.dispatchEvent(new Event("change"));
                      zipField.blur();
                    }
                    
                    if (streetNumberField) {
                      streetNumberField.focus();
                      streetNumberField.dispatchEvent(new Event("change"));
                      streetNumberField.blur();
                    }
                    
                    if (unitNumberField) {
                      unitNumberField.focus();
                      unitNumberField.dispatchEvent(new Event("change"));
                      unitNumberField.blur();
                    }

                  It doesnt contain credit card as i wasnt interested in that, anyone can copy the above code into a button, and it will work for now

                  • Vlad replied to this.

                    To add to this discussion, could Orion be made to integrate with the contacts app in macOS and iOS? Safari will not only suggest your details for autofill, but details from anybody in your contacts. I use this extensively in my work, and I'm sure many others do as well.

                      carl

                      I guess its kinda two seperate issues. first one is being able to identify what feilds need to be filled out, and second is where it pulls the information from to fill out, if thats Apples contacts app or keychain or something Orion makes up themself

                        Vlad

                        Yeah, as a start i bellieve it could be suffient, since finding all the rules where it doesnt work (where it isnt a matter of having problems typing in the feild) is pretty hard as one person. since I dont encounter sign up or postal forms that often. would make more sense to have people to report where it doesnt, and then add thoose if possible

                        I just got it to a state where i would be confident it would work on 9 out of 10 or more I encounter.

                        I'm actually not to familiar with other autofills. if they just confidently work everywhere?

                          2 months later

                          I use credit card details Autofill pretty often, having a dozen of cards stored in Safari. Would it be possible to migrate this data to Orion, like passwords and cookies? It's very inconvenient for me to switch from Orion to Safari every time I do online shopping. I'm either forced to redo my shopping cart step by step, or to manually copy name, number, expiry date, cvc fields one by one from Safari settings.

                            I can't find any option for autofill for orion other than passwords on desktop, am i missing something?

                            • Vlad replied to this.

                              jamesgasek Yes, that the browser is still in beta and written from scratch so some things will be missing - like this one 😉

                              a year later
                              Merged 3 posts from Autofill for name, address, etc.. like chrome.
                                23 days later

                                Auto filling credit card details into forms makes transactions much easier on Safari. Orion should implement that as well.

                                I do not need to add credit card details all the time, but I do notice how annoying it is when I do not have it.

                                When focused on a field that takes credit card numbers, suggest using one of the cards in the wallet. Data like the number, name, expiration and security code are automatically filled out.

                                  Merged 1 post from Allow Orion to suggest credit cards in wallet like Safari.
                                    3 months later

                                    The only thing on iOS keeping me from using Orion, or even Firefox, is that Chrome is the only iOS browser with a functioning credit card autofill. Alternatively, I tried using the Bitwarden Chrome extension inside of Orion for iOS, to autofill a credit card form, but it didn't work.