Update api sample for action (#838)

* add sample for catifier that replaces every jpg image on web by another cat image

* add readme for catifier

* add section for set/get  badge text color

* add usage of isEnabled,getBadgeTextColor and setBadgeTextColor

* capitalize  button text

* use single quote and update badge text to test

* use <all_urls> host_permission

api-samples/action/demo/index.html

@@ -131,10 +131,48 @@
             <input type="text" id="current-badge-bg-color" disabled />
           </label>
           <button id="reset-badge-background-color-button">
-            reset badge color
+            Reset badge color
           </button>
         </div>
       </section>
+      <!-- Badge Text Color !-->
+      <section>
+        <h2>Badge Text Color</h2>
+        <p>
+          The
+          <a
+            href="https://developer.chrome.com/docs/extensions/reference/action/#method-setBadgeTextColor"
+            ><code>action.setBadgeTextColor</code></a
+          >
+          method allows you to change the color of the badge text.
+        </p>
+
+        <div class="spaced">
+          <button id="set-badge-txt-color-button">
+            Randomize badge text color
+          </button>
+        </div>
+
+        <p>
+          The
+          <a
+            href="https://developer.chrome.com/docs/extensions/reference/action/#method-getBadgeTextColor"
+            ><code>action.getBadgeTextColor</code></a
+          >
+          method allows you to read the current color of the badge text.
+        </p>
+
+        <div class="flex">
+          <label class="full-width">
+            Current badge text color
+            <input type="text" id="current-badge-txt-color" disabled />
+          </label>
+          <button id="reset-badge-txt-color-button">
+            Reset badge text color
+          </button>
+        </div>
+      </section>
+
 
       <!-- badge - icon -->
 

api-samples/action/demo/index.js

@@ -21,20 +21,19 @@ function debounce(timeout, callback) {
 // .enable / .disable
 // ------------------
 
-// The action API does not expose a way to read the action's current enabled/disabled state, so we
-// have to track it ourselves.
-// Relevant feature request: https://bugs.chromium.org/p/chromium/issues/detail?id=1189295
-let actionEnabled = true;
+
 const showToggleState = document.getElementById('show-toggle-state');
 document
   .getElementById('toggle-state-button')
-  .addEventListener('click', (_event) => {
+  .addEventListener('click', async (_event) => {
+    // Use the isEnabled method to read the action's current state.
+    let actionEnabled = await chrome.action.isEnabled();
+    // when the button is clicked negate the state
     if (actionEnabled) {
       chrome.action.disable();
     } else {
       chrome.action.enable();
     }
-    actionEnabled = !actionEnabled;
   });
 
 document
@@ -123,6 +122,55 @@ document
     showBadgeText();
   });
 
+// --------------------------
+// get/set badge text color
+// --------------------------
+async function showBadgeTextColor() {
+  const color = await chrome.action.getBadgeTextColor({});
+  document.getElementById('current-badge-txt-color').value = JSON.stringify(
+    color,
+    null,
+    0
+  );
+}
+
+showBadgeTextColor();
+
+document
+  .getElementById('set-badge-txt-color-button')
+  .addEventListener('click', async () => {
+    // To show off this method, we must first make sure the badge has text
+    let currentText = await chrome.action.getBadgeText({});
+    if (!currentText) {
+      chrome.action.setBadgeText({ text: 'Test' });
+      showBadgeText();
+    }
+
+    // Next, generate a random RGBA color
+    const color = [0, 0, 0].map(() => Math.floor(Math.random() * 255));
+
+    // Use the default background color ~10% of the time.
+    //
+    // NOTE: Alpha color cannot be set due to crbug.com/1184905. At the time of writing (Chrome 89),
+    // an alpha value of 0 sets the default color while a value of 1-255 will make the RGB color
+    // fully opaque.
+    if (Math.random() < 0.1) {
+      color.push(0);
+    } else {
+      color.push(255);
+    }
+
+    chrome.action.setBadgeTextColor({ color });
+    showBadgeTextColor();
+  });
+
+  document
+  .getElementById('reset-badge-txt-color-button')
+  .addEventListener('click', async () => {
+    chrome.action.setBadgeTextColor({ color: '#000000' });
+    showBadgeTextColor();
+  });
+
 // ----------------------
 // badge background color
 // ----------------------

functional-samples/sample.catifier/README.md

@@ -0,0 +1,8 @@
+# Catifier
+
+When the extension is enabled, it replaces every image of extension jpg or jpeg, with [this](https://i.chzbgr.com/completestore/12/8/23/S__rxG9hIUK4sNuMdTIY9w2.jpg) image.
+
+## Testing the extension
+
+1. Follow the instructions to load an [unpacked extension](https://developer.chrome.com/docs/extensions/mv3/getstarted/development-basics/#load-unpacked).
+2. Navigate to any website, you should see every jpg or jpeg image being replaced by an image of a cat.

functional-samples/sample.catifier/manifest.json

@@ -0,0 +1,16 @@
+{
+    "name": "Catifier",
+    "version": "1.0",
+    "description": "Replace every image by a cat's image in a website you visit",
+    "permissions": ["declarativeNetRequest"],
+    "host_permissions": ["<all_urls>"],
+    "declarative_net_request": {
+        "rule_resources": [{
+          "id": "ruleset_1",
+          "enabled": true,
+          "path": "rules.json"
+        }]
+      },
+  
+    "manifest_version": 3
+  }

functional-samples/sample.catifier/rules.json

@@ -0,0 +1,14 @@
+[
+    {
+      "id": 1,
+      "priority": 100,
+      "action": { "type": "redirect", "redirect": { "url": "https://i.chzbgr.com/completestore/12/8/23/S__rxG9hIUK4sNuMdTIY9w2.jpg" } },
+      "condition": {"urlFilter": "*.jpeg", "resourceType": ["image"]} 
+    },
+    {
+       "id": 2,
+       "priority": 100,
+       "action": { "type": "redirect", "redirect": { "url": "https://i.chzbgr.com/completestore/12/8/23/S__rxG9hIUK4sNuMdTIY9w2.jpg" } },
+       "condition": {"urlFilter": "*.jpg", "resourceType": ["image"]} 
+    }
+  ]