Adds simple Hello World example (#553)

2021-02-18 17:43:05 -08:00 · 2021-02-18 17:43:05 -08:00 · 6ca774c69c
--- a/README.md
+++ b/README.md
@ -14,7 +14,7 @@ The directory structure is as follows:
 * [api/](api/) - extensions focused on a single API package
 * (To be added) [howto/](howto/) - extensions that show how to perform a particular task
 * [tutorials/](tutorials/) - multi-step walkthroughs referenced inline in the docs
-* (To be added) [extensions/](extensions/) - full featured extensions spanning multiple API packages
+* [extensions/](extensions/) - full featured extensions spanning multiple API packages
 * [apps/](apps/) - deprecated Chrome Apps platform (not listed below)
 * [mv2-archive/](mv2-archive/) - resources for manifest version 2

@ -29,6 +29,19 @@ Read more on [Getting Started](https://developer.chrome.com/extensions/getstarte
    </tr>
  </thead>
  <tbody>
+    <tr>
+      <td style="vertical-align:top;">
+        Hello World <br>
+        <a href="examples/hello-world"><code>examples/hello-world</code></a>
+      </td>
+      <td  style="vertical-align:top;">
+        <ul>
+          <li><a href="https://developer.chrome.com/docs/extensions/reference/action/#event-onClicked">action.onClicked</a></li>
+          <li><a href="https://developer.chrome.com/docs/extensions/reference/runtime/#method-getURL">runtime.getURL</a></li>
+          <li><a href="https://developer.chrome.com/docs/extensions/reference/tabs/#method-create">tabs.create</a></li>
+        </ul>
+      </td>
+    </tr>
    <tr>
      <td style="vertical-align:top;">
        Cookie Clearer <br>
--- a/examples/hello-world/background.js
+++ b/examples/hello-world/background.js
@ -0,0 +1,32 @@
+// Extension event listeners are a little different from the patterns you may have seen in DOM or
+// Node.js APIs. The below event listener registration can be broken in to 4 distinct parts:
+//
+// * chrome      - the global namespace for Chrome's extension APIs
+// * runtime     – the namespace of the specific API we want to use
+// * onInstalled - the event we want to subscribe to
+// * addListener - what we want to do with this event
+//
+// See https://developer.chrome.com/docs/extensions/reference/events/ for additional details.
+chrome.runtime.onInstalled.addListener(async () => {
+
+  // While we could have used `let url = "hello.html"`, using runtime.getURL is a bit more robust as
+  // it returns a full URL rather than just a path that Chrome needs to be resolved contextually at
+  // runtime.
+  let url = chrome.runtime.getURL("hello.html");
+
+  // Open a new tab pointing at our page's URL using JavaScript's object initializer shorthand.
+  // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer#new_notations_in_ecmascript_2015
+  //
+  // Many of the extension platform's APIs are asynchronous and can either take a callback argument
+  // or return a promise. Since we're inside an async function, we can await the resolution of the
+  // promise returned by the tabs.create call. See the following link for more info on async/await.
+  // https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Asynchronous/Async_await
+  let tab = await chrome.tabs.create({ url });
+
+  // Finally, let's log the ID of the newly created tab using a template literal.
+  // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals
+  //
+  // To view this log message, open chrome://extensions, find "Hello, World!", and click the
+  // "service worker" link in th card to open DevTools.
+  console.log(`Created tab ${tab.id}`);
+});
--- a/examples/hello-world/hello.html
+++ b/examples/hello-world/hello.html
@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Hello, World!</title>
+</head>
+<body>
+  <p>Hello, World!</p>
+</body>
+</html>
--- a/examples/hello-world/manifest.json
+++ b/examples/hello-world/manifest.json
@ -0,0 +1,9 @@
+{
+  "name": "Hello, World!",
+  "version": "1.0",
+  "manifest_version": 3,
+  "background": {
+    "service_worker": "background.js"
+  },
+  "action": {}
+}