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?
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?
Vlad Using the Firefox add-on, you can easily export and import in CSV : )
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.
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
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.
Longely Very cool work, proves it can be done relatively easy for most cases. Of ocurse different languages pose a problem (how does Safari fare there?) but it is a start. Feel free to upload the button to Orions programmable button repo
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?
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?
jamesgasek Yes, that the browser is still in beta and written from scratch so some things will be missing - like this one 
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.
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.
The feature that Safari has where Safari will automatically fill your name and address from your defined contact is extremely useful when signing up for different websites. It would be great if Orion could duplicate this functionality in someway allowing a similar capability.
As a user is signing up for different websites, ordering goods and so on. The browser would understand that a name and address field was on the screen and prompted the user if the name and address should be auto filled. Naturally, this would be a feature that could be turned on and off.
