From 3091fb8d39591d3b64b11b27cc08b1bf8df4a0a1 Mon Sep 17 00:00:00 2001 From: Abhilekh Gautam <67783712+Abhilekhgautam@users.noreply.github.com> Date: Thu, 9 Mar 2023 21:53:28 +0545 Subject: [PATCH] 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 host_permission --- api-samples/action/demo/index.html | 40 ++++++++++++- api-samples/action/demo/index.js | 60 +++++++++++++++++-- functional-samples/sample.catifier/README.md | 8 +++ .../sample.catifier/manifest.json | 16 +++++ functional-samples/sample.catifier/rules.json | 14 +++++ 5 files changed, 131 insertions(+), 7 deletions(-) create mode 100644 functional-samples/sample.catifier/README.md create mode 100644 functional-samples/sample.catifier/manifest.json create mode 100644 functional-samples/sample.catifier/rules.json diff --git a/api-samples/action/demo/index.html b/api-samples/action/demo/index.html index 534c2f7d..287e8d56 100644 --- a/api-samples/action/demo/index.html +++ b/api-samples/action/demo/index.html @@ -131,10 +131,48 @@ + +
+

Badge Text Color

+

+ The + action.setBadgeTextColor + method allows you to change the color of the badge text. +

+ +
+ +
+ +

+ The + action.getBadgeTextColor + method allows you to read the current color of the badge text. +

+ +
+ + +
+
+ diff --git a/api-samples/action/demo/index.js b/api-samples/action/demo/index.js index a8c401d9..75a89926 100644 --- a/api-samples/action/demo/index.js +++ b/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 // ---------------------- diff --git a/functional-samples/sample.catifier/README.md b/functional-samples/sample.catifier/README.md new file mode 100644 index 00000000..fe31d0d0 --- /dev/null +++ b/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. diff --git a/functional-samples/sample.catifier/manifest.json b/functional-samples/sample.catifier/manifest.json new file mode 100644 index 00000000..239a2625 --- /dev/null +++ b/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": [""], + "declarative_net_request": { + "rule_resources": [{ + "id": "ruleset_1", + "enabled": true, + "path": "rules.json" + }] + }, + + "manifest_version": 3 + } \ No newline at end of file diff --git a/functional-samples/sample.catifier/rules.json b/functional-samples/sample.catifier/rules.json new file mode 100644 index 00000000..feb8de0f --- /dev/null +++ b/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"]} + } + ] \ No newline at end of file