12

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?

Aryan Beezadhur
  • 4,503
  • 4
  • 21
  • 42
Parag Bandewar
  • 297
  • 1
  • 2
  • 10
  • 1
    The fact that you are using `chrome.tabs.executeScript(tabs[0].id, {file: "xyz.js"});` Means that you *are* using a content script: *xyz.js*. In addition that call to `chrome.tabs.executeScript()` is being executed in the background context, but probably from within a popup (at a guess). – Makyen Jan 27 '17 at 08:29
  • 1
    I would suggest that you read the [Chrome extension overview](https://developer.chrome.com/extensions/overview) (and perhaps along with the pages linked from the overview). The [architecture section](https://developer.chrome.com/extensions/overview#arch) has overall architecture information which should help your understanding of how things are generally organized/done. You will probably also want to read [Content Scripts](https://developer.chrome.com/extensions/content_scripts), and [Message Passing](https://developer.chrome.com/extensions/messaging). – Makyen Jan 27 '17 at 08:30

3 Answers3

14

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.

Chirag Arora
  • 877
  • 1
  • 9
  • 22
  • Now I know that if I include content script in the manifest.json, I can load the content script immediately after page is refreshed. What if I want to keep the content script in manifest but want to trigger only when button is clicked? – Parag Bandewar Jan 27 '17 at 09:42
  • @ParagBandewar In that case, move the code inside a function and call it when the button is clicked. – Chirag Arora Jan 27 '17 at 09:50
  • any ideas about https://stackoverflow.com/questions/44909642/how-to-get-background-script-to-call-function-in-content-script-for-chrome-exten – SuperUberDuper Jul 04 '17 at 15:26
6

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

vasil oreshenski
  • 2,788
  • 1
  • 14
  • 21
4

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

mbvee
  • 383
  • 2
  • 4
  • 16