What exactly are content script and background script in the Chrome extension?

First of all, you are indeed using a content script. Here you are just controlling the execution of the content script through an event.

background scripts are something that run in background and listen for triggers while the user interacts with the chrome browser (such as listening for a click event on a tab)

While content scripts are the one's that actually interacts with the webpage (essentially DOM elements).

Now, the difference between your method and including them in manifest is that if they are included in manifest, the content scripts will load as soon as the page loads and hence(in this case) will auto-fill data simultaneously, while chrome.tabs.executeScript(tabs[0].id, {file: "xyz.js"}); will load the content script upon a certain triggering event and hence(in this case) auto-fill data on a trigger(such as on button click).

Here are all the methods to inject content scripts.

The main purpose of having the background.js file and the content scripts is to increase the performance of the extension.

If suppose you have an extension that displays something on its click, then it can be kept dumb. The main functionality can be written inside the background.js and the other content scripts which in turn will populate the view which we kept dumb.

In a simpler sense, having the background.js and content scripts in place improves the efficiency and that is what the Google extension developers suggest. And lastly, the file you are running is itself a content script as it interacts with the web page. I hope you have an entry of the file under the content scripts section of the manifest.json file

Actually executing scripts in chrome extension is another way of using content script. Content scripts may also be defined in the manifest of the extension.

Shortly the Content script can access small portion of the extension api and can work fully on the DOM of the page. They are loaded into the page when navigated automatically if they are defined in the manifest or you can inject them uisng the api that you are using, but the final result is the same.

Background script can't access the DOM of the page, but gives you full access to the api of the extension.

In the background script you store the state of your extension, because it lives until the browser is closed.

Here is alot more detailed information about the architecture of chrome extension, also you can find information about content and background scripts there. https://developer.chrome.com/extensions/overview