background.html vs. background.js - chrome extension

Question

I am really confused here. I am trying to understand the file architecture of chrome extension. I am reading this doc: https://developer.chrome.com/extensions/overview#arch

My situation:

I want to setup the oauth flow so that user can log in inside the extension (the other endpoint is my django backend). Till now, I have these files:

background.js 
content.js
popup.html
manifest.json

where my content.js sends message to background.js and gets response back. so far so fine!

But now while reading the doc for oauth, i am confused not knowing what the background.html is. is it actually the file which should contain all js code of my background.js? but, if i change this in manifest to .html, like:

"background": {
"persistent": false,
"scripts": ["jquery111.js", "background.html"]

extension isnot working anymore. In OAuth doc, it says:

Place the four library files in the root of your extension directory 
(or wherever your JavaScript is stored). Then include the .js files in your 
background page...
Your background page will manage the OAuth flow.

but in the architecture doc, it says:

This figure shows the browser action's background page, which is defined by
background.html and has JavaScript code that controls the behavior of 
the browser action in both windows.

what is the difference between background.html and background.js?

Your background.html is just a container for background scripts basically, you could write it simply as <html><script src=background.js></html>. When you're debugging your extension, the background pages can be inspected in Chrome's dev tools from the chrome://extensions page. — phette23
@phette23 thanks, but why after changing my manifest's background from background.js to background.html, extension isnot working. it should work, right? — doniyor
It doesn't make sense to list "background.html" as a script, it's a page. Read the Background Pages documentation: developer.chrome.com/extensions/background_pages You likely either need to do "background": { "scripts": ["background.js"] } or "background": { "page": "background.html" } (where that HTML includes a bunch of script tags), but not the mixed up hybrid you have currently where an HTML page is listed as a script. — phette23

Grant Winney Grant Winney · Accepted Answer · 2019-05-09T14:29:14

You're only allowed to specify either an array of scripts...

"background": {
    "persistent": false,
    "scripts": [ "jquery111.js"]
}

... or a page, which can then reference the script(s) the page needs:

"background": {
    "persistent": false,
    "page": "background.html"
}

Your background.html page could in theory be nothing else other than a list of needed scripts.

<script src="jquery111.js"></script>

If you try to specify both, the extension won't load:

The background.page and background.scripts properties cannot be used at the same time. Could not load manifest.

background.html vs. background.js - chrome extension

1 Answers