Q:

Can Not Set Value of DOM Element Unless New Value Is Strictly Numeric

DISCLAIMER: total beginner with regards to browser extensions and javascript.
BACKGROUND:
I'm trying to develop a proof-of-concept Chrome extension that picks up the text from the input fields in the HTML form of the web page loaded into one tab, and enters the same text on analogous fields of the page in another tab. 
In my particular example, the source page is a minimal, local HTML file with two input fields ("user name" and "password"), and the destination is the login page for Apple's Developer Website (https://developer.apple.com/account/).
Reading the official guides and questions here, I've put together some code that seems to work. 
THE PROBLEM:
Only text consisting of digits (e.g.: "111111") gets copied from one tab to the other. As soon as my input field contains letters (e.g.: "111111a"), nothing happens.

This is the source page (local file:///):
<html>
  <head>
    <title>Source Page</title>
    <meta charset="utf-8" />
    <script src="popup.js"></script>
  </head>
  <body>
    <form>
      <input id="accountname_src" name="appleId" placeholder="Apple ID" /><br />
      <input id="accountpassword_src" name="password" placeholder="Password" />
    </form>
  </body>
</html>

The destination HTML (Apple's page) has similar input fields with element ids of accountname and accountpassword, respectively.
My extension's script is as follows:
document.addEventListener('DOMContentLoaded', function(){
    // The button in the browser action popup:
    var button = document.getElementById('autofill');

    var sourceTabID = null;
    var destTabID = null;

    // Get the SOURCE tab id:
    chrome.tabs.query({'title': 'Source Page'}, function(tabArray){
        sourceTabID = tabArray[0].id;
    });

    // Get the DESTINATION tab id:
    chrome.tabs.query({'title': 'Sign in with your Apple ID - Apple Developer'}, function(tabArray){
        destTabID = tabArray[0].id;
    });

    if (button !== null){
        button.addEventListener('click', function(){

            // Get entered text from Source page:
            chrome.tabs.executeScript(sourceTabID, {file: "read_input.js"}, function(results){

                var credentials = results[0];
                var userName = String(credentials[0]); 
                var password = String(credentials[1]);

                // Pass values to Apple login page:
                var insertUserNameCode = "document.getElementById('accountname').value = " + userName + ";"
                var insertPasswordCode = "document.getElementById('accountpassword').value = " + password + ";"
                var autofillCode = insertUserNameCode + insertPasswordCode;

                chrome.tabs.executeScript(destTabID, {code:autofillCode});
            });

            //window.close();
        });
    }
}); 

of course, the contents of read_input.js are:
var userName = document.getElementById("accountname_src").value;
var password = document.getElementById("accountpassword_src").value;

var attributes = [userName, password]; 

attributes  // (Final expression, passed to callback of executeScript() as 'results')

It feels like there could be a type inference problem somewhere, but can't tell where.

Bonus Question:
I can read the input fields in the source page using an external script (read_input.js above) and the method chrome.tabs.executeScript(..., file:...; but when I try to write the values to the destination tab using a similar approach, the script does not run (that is why I'm using chrome.tabs.executeScript(..., code:... in my code). Any idea what can be happening?

A:

Silly me (again)... Some console.logging led me in the right direction...
I was not escaping the value in the script; these lines:
var insertUserNameCode = "document.getElementById('accountname').value = " + userName + ";"
var insertPasswordCode = "document.getElementById('accountpassword').value = " + password + ";"

...should be:
var insertUserNameCode = "document.getElementById('accountname').value = '" + userName + "';"
var insertPasswordCode = "document.getElementById('accountpassword').value = '" + password + "';"

(added single ticks around the values)
...so that the code ends up as:
document.getElementById('accountname').value = '111111a';

...instead of:
document.getElementById('accountname').value = 111111a;

Still not sure why a numbers-only value works, though.

