Chrome extension simulate keyboard typing - google-chrome

Question

Currently im working with personal chrome extension tool via javascript, im having a hard time with this payment form since the form inputs only accepts user input keypress. I already do some research and i find that the chrome.debugger might work but as of now im not sure how do this work like normal javascript that will get the id of input text then set the value to my desired value
Payment form
current code
chrome.runtime.onMessage.addListener(function(message,sender,sendResponse){
if(message.pressEnter){
chrome.tabs.query({active: true}, function(tabs) {
chrome.debugger.attach({ tabId: tabs[0].id }, "1.0");
// chrome.debugger.sendCommand({ tabId: tabs[0].id }, 'Input.insertText', { text: '1234567'});
chrome.debugger.sendCommand({ tabId: tabs[0].id }, 'Input.dispatchKeyEvent', { type: 'char', text: "testttt" });
chrome.debugger.sendCommand({ tabId: tabs[0].id }, 'Input.dispatchKeyEvent', { type: 'char', text: "\r" });
chrome.debugger.sendCommand({ tabId: tabs[0].id }, 'Input.dispatchKeyEvent', { type: 'char', text: "\t" });
// chrome.debugger.sendCommand({ tabId: tabs[0].id }, 'Input.dispatchKeyEvent', { type: 'char', text: "123456789" });
// chrome.debugger.sendCommand({ tabId: tabs[0].id }, 'Input.dispatchKeyEvent', { type: 'keyDown', windowsVirtualKeyCode:13, nativeVirtualKeyCode : 13, macCharCode: 13 });
chrome.debugger.detach({ tabId: tabs[0].id });
});
}
});
here is the IDs of those input types
#firstName
#lastName
#cardNumber
#expiryDate
#cvv