1- Hello World!

slides | markdown | HTML

⌂ | 0-Introduction | 1-Hello World! | 2-Architecture | 3-DOM | 4-Explosion | 5-Examples

  1. HTML, CSS, and Javascript
  2. Create manifest.json
  3. Load an extension
  4. Edit and refresh an extension
  5. Next steps

HTML, CSS, Javascript

  • Like all web pages, extensions are built using HTML, CSS, and Javascript code.
  • HTML (HyperText Markup Language) structures content for the web.
  • CSS (Cascading StyleSheets) control the presentation of content.
  • JS (Javascript) is the programming language for web pages.
  • This simple example will look like:

    This is a paragraph

<!-- hello.html -->
<html>
<head>
<title>Hello world!</title>
<link rel="stylesheet" href="styles.css">
<body>
<h1>Hello world!</h1>
<p>This is a <span style="color:red">paragraph</span></p>
<script src="main.js"></script>
</body>
</html>

/* styles.css */
span { color: red; }

// main.js
alert("This is a simple Javascript alert");

👉 Create the manifest file

The manifest file tells the browser how to install and run the extension code.

  1. Create a new folder and call it explode-tutorial
  2. Create a new file manifest.json inside this folder.
  3. Paste or type the example.
  4. Install the extension in your browser using the instructions below.
{
    "name": "My First Browser Extension",
    "description": "🐌",
    "version": "1.1.0",
    "manifest_version": 3
}
We are using Manifest version 3, which is now required for all new published extensions.

👉 Install an extension for development

Chromium Browsers

  1. Go to chrome://extensions
  2. Enable Developer mode by toggling the checkbox in the upper-right corner.
  3. Click "Load unpacked" and select the folder with your extension manifest file.

Mozilla Firefox

  1. Go to about:debugging.
  2. Click "This Firefox".
  3. Click "Load Temporary Add-on" and select any file in your extension folder.
  4. The extension will remain installed until you restart Firefox.
We are building a "cross-browser extension" so, from this point instructions refer to Chromium browsers (Chrome, Brave, Opera, Edge, and others), but it will work fine in Chrome or Firefox.

👉 Confirm the extension has loaded

  1. Confirm your extension has loaded at chrome://extensions
  2. Examine the panel for your extension to see the name, description, and version from your manifest file.
  3. Notice also the enable|disable toggle and reload button.
Note that, "unpacked" simply means the folder and files have not yet been zipped to upload and distribute on Chrome or Firefox platforms. You can recognize unpacked extensions by the orange "hard drive" icon.

👉 Edit and refresh an extension

These are basic steps you repeat will to build and test any extension. Try updating your manifest to match the example.

  1. Edit and save the extension files in your code editor.
  2. Click the small "refresh" button at chrome://extensions to reload the extension.
  3. Normally you'll refresh a test page to run the extension on that page. Let's add one now.
{
    "name": "Explode the Web! Tutorial",
    "description": "🐢",
    "version": "1.1.1",
    "manifest_version": 3
}
You may have probably aleady noticed that the 👉 emoji lets you know there are steps to complete.

Part 1 conclusion

  • So far we have created a project folder and manifest, and learned how to load, update, and refresh the extension in Chrome.
  • You check your progress by looking at the completed files for each section, for example in extensions/explode-tutorial-1.
  • 👉 Start the next section Architecture and Debugging