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?
Background Pages. A common need for extensions is to have a single long-running script to manage some task or state. Background pages to the rescue. As the architecture overview explains, the background page is an HTML page that runs in the extension process.
Depending on the extensions you have installed, sometimes Google Chrome will continue to run in the background on your computer after closing it. You might notice this, especially after setting up a new computer and when you install a fresh version of the browser.
The background script ('background. js') is a JavaScript script that runs once our extension either gets installed or the user refreshes the extension manually. THIS IS CRUCIAL TO NOTE.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With