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

Question

I am working on a Chrome extension to auto-fill the demo data. I have created the JavaScript file xyz.js for auto-filling the data.

I am executing the script by clicking on the button with chrome.tabs.executeScript(tabs[0].id, {file: "xyz.js"}); and I am getting the required output.

I am not using a content script or background script. What benefits I will get by using a content script or background script?

Answer 1

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.