explode-the-web
2-Archicture and Debugging
- Extension architecture
- Background scripts
- Content scripts
- Debug an extension
Extension architecture
- The distinct "contexts" for scripts in an extension determine what your code can do and data it can access.
- This separation provides security, but increases complexity.
- Let's add the content and background files to the project and manifest.
Background service workers
- Background service workers are loaded just once, during installation.
- Background scripts operate continuously, and they can use certain browser APIs like `localStorage` and connect to external APIs or databases.
- We aren't going to do much with the background, but in a second well see how it is important.
👉 Add a new file `background.js` to the root of your project folder and paste this code.
```js
// background.js
console.log("💥 Hello from background.js");
```
Content scripts
- Content scripts run inside web pages that users visit.
- They are loaded ("injected") into *each* page a user visits, so can access web page content or listen for user events (the same as other scripts on a page).
- A content script's activity is limited to the current page, but they can send and receive data from the background via messages.
👉 Add a new file `content.js` to the root of your project and paste this code.
```js
// content.js
console.log("💥 Hello from content.js");
```
Update the manifest
Manifest files use JSON, which has a strict syntax. If you have issues then try checking your manifest code using jsonlint.com.
1. 👉 Update `manifest.json` to reference the new files.
1. Refresh your extension at `chrome://extensions`.
```json
{
"name": "Explode the Web! Tutorial",
"description": "🦆",
"version": "1.2.0",
"manifest_version": 3,
"background": {
"service_worker": "background.js"
},
"content_scripts": [{
"matches": [""],
"js": ["content.js"]
}]
}
```
</div>
</div>
---
## 👉 Debug an extension content script
To find proof the extension is "working" and that the content script has loaded:
1. Open any web page, for example: eff.org
1. Right-click on the page and select **Inspect** to open the DevTools panel.
1. Click on **Console** to confirm you can see your message.
---
## 👉 Debug an extension background script
Content scripts are injected into each page, but you can also view messages from the scripts running in the background using DevTools:
1. Go to `chrome://extensions` and click on "Inspect views service worker".
1. Click on **Console** and confirm you can see your message.
---
## Part 2 conclusion
- We added background and content scripts, updated the manifest, and learned how to inspect an extension in Chrome.
- 👉 Start the next section [Document Object Model](3-dom.html)
---
## 👉 Debug an extension background script
Content scripts are injected into each page, but you can also view messages from the scripts running in the background using DevTools:
1. Go to `chrome://extensions` and click on "Inspect views service worker".
1. Click on **Console** and confirm you can see your message.
---
## Part 2 conclusion
- We added background and content scripts, updated the manifest, and learned how to inspect an extension in Chrome.
- 👉 Start the next section [Document Object Model](3-dom.html)