2-Archicture and Debugging

• 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 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.

// background.js
console.log("💥 Hello from background.js");

• 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.

// content.js
console.log("💥 Hello from content.js");

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.
2. Refresh your extension at chrome://extensions.

{
    "name": "Explode the Web! Tutorial",
    "description": "🦆",
    "version": "1.2.0",
    "manifest_version": 3,

    "background": {
        "service_worker": "background.js"
    },

    "content_scripts": [{
        "matches": ["<all_urls>"],
        "js": ["content.js"]
    }]
}