Page redder example (#562)

README.md

@@ -42,6 +42,18 @@ Read more on [Getting Started](https://developer.chrome.com/extensions/getstarte
         </ul>
       </td>
     </tr>
+    <tr>
+      <td style="vertical-align:top;">
+        Page Redder <br>
+        <a href="examples/page-redder"><code>examples/page-redder</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/scripting/#method-executeScript">scripting.executeScript</a></li>
+        </ul>
+      </td>
+    </tr>
     <tr>
       <td style="vertical-align:top;">
         Cookie Clearer <br>

examples/page-redder/background.js

@@ -0,0 +1,10 @@
+function reddenPage() {
+  document.body.style.backgroundColor = 'red';
+}
+
+chrome.action.onClicked.addListener((tab) => {
+  chrome.scripting.executeScript({
+    target: { tabId: tab.id },
+    function: reddenPage
+  });
+});

examples/page-redder/manifest.json

@@ -0,0 +1,14 @@
+{
+  "name": "Page Redder",
+  "action": {},
+  "manifest_version": 3,
+  "version": "0.1",
+  "description": "Turns the page red when you click the icon",
+  "permissions": [
+    "activeTab",
+    "scripting"
+  ],
+  "background": {
+    "service_worker": "background.js"
+  }
+}