Add storage sample (GoogleChrome#947)

* Add storage sample `stylizr` * Update description * Update api-samples/storage/stylizr/README.md Co-authored-by: Joe Medley <[email protected]> * Clear previous timer if message called twice * Remove innerHTML * Update tips * Remove IIFE --------- Co-authored-by: Joe Medley <[email protected]>
ChiefUSA · Aug 21, 2023 · 3f07cee · 3f07cee
1 parent 45bbd8d
commit 3f07cee
Show file tree

Hide file tree

Showing 7 changed files with 189 additions and 0 deletions.
diff --git a/api-samples/storage/stylizr/README.md b/api-samples/storage/stylizr/README.md
@@ -0,0 +1,13 @@
+# chrome.storage - Stylizr
+
+A sample that demonstrates how to use the [`chrome.storage`](https://developer.chrome.com/docs/extensions/reference/storage/) API.
+
+## Overview
+
+In this sample, the `chrome.storage` API stores a custom style string that will be applied to the active page when the extension's action icon is clicked.
+
+## Running this extension
+
+1. Clone this repository.
+2. Load this directory in Chrome as an [unpacked extension](https://developer.chrome.com/docs/extensions/mv3/getstarted/development-basics/#load-unpacked).
+3. Click the extension's action icon to see the effect.
diff --git a/api-samples/storage/stylizr/icon.png b/api-samples/storage/stylizr/icon.png
diff --git a/api-samples/storage/stylizr/manifest.json b/api-samples/storage/stylizr/manifest.json
@@ -0,0 +1,13 @@
+{
+  "name": "Stylizr",
+  "description": "Demonstrates how to use the chrome.storage API.",
+  "version": "1.0",
+  "permissions": ["activeTab", "storage", "scripting"],
+  "options_page": "options.html",
+  "action": {
+    "default_icon": "icon.png",
+    "default_title": "Stylize!",
+    "default_popup": "popup.html"
+  },
+  "manifest_version": 3
+}
diff --git a/api-samples/storage/stylizr/options.html b/api-samples/storage/stylizr/options.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Stylizr</title>
+    <style>
+      body {
+        font-family: sans-serif;
+      }
+
+      label {
+        display: block;
+      }
+
+      textarea {
+        font-family: monospace;
+      }
+
+      .message {
+        height: 20px;
+        background: #eee;
+        padding: 5px;
+      }
+    </style>
+  </head>
+
+  <body>
+    <div class="message"></div>
+    <h3>Stylizr Instructions</h3>
+
+    <ol>
+      <li>Write CSS in this textarea and save</li>
+      <li>Navigate to some page</li>
+      <li>Click the browser action icon <img src="icon.png" /></li>
+      <li>Hey presto! CSS is injected!</li>
+    </ol>
+
+    <textarea
+      name="style_url"
+      id="style_url"
+      cols="80"
+      rows="24"
+      placeholder="eg: * { font-size: 110%; }"
+    ></textarea>
+
+    <br />
+    <button class="submit">Save</button>
+    <button class="reset">Reset</button>
+
+    <script src="options.js"></script>
+  </body>
+</html>
diff --git a/api-samples/storage/stylizr/options.js b/api-samples/storage/stylizr/options.js
@@ -0,0 +1,56 @@
+// Store CSS data in the "local" storage area.
+const storage = chrome.storage.local;
+
+// Get at the DOM controls used in the sample.
+const resetButton = document.querySelector('button.reset');
+const submitButton = document.querySelector('button.submit');
+const textarea = document.querySelector('textarea');
+
+// Load any CSS that may have previously been saved.
+loadChanges();
+
+submitButton.addEventListener('click', saveChanges);
+resetButton.addEventListener('click', reset);
+
+async function saveChanges() {
+  // Get the current CSS snippet from the form.
+  const cssCode = textarea.value;
+  // Check that there's some code there.
+  if (!cssCode) {
+    message('Error: No CSS specified');
+    return;
+  }
+  // Save it using the Chrome extension storage API.
+  await storage.set({ css: cssCode });
+  message('Settings saved');
+}
+
+function loadChanges() {
+  storage.get('css', function (items) {
+    // To avoid checking items.css we could specify storage.get({css: ''}) to
+    // return a default value of '' if there is no css value yet.
+    if (items.css) {
+      textarea.value = items.css;
+      message('Loaded saved CSS.');
+    }
+  });
+}
+
+async function reset() {
+  // Remove the saved value from storage. storage.clear would achieve the same
+  // thing.
+  await storage.remove('css');
+  message('Reset stored CSS');
+  // Refresh the text area.
+  textarea.value = '';
+}
+
+let messageClearTimer;
+function message(msg) {
+  clearTimeout(messageClearTimer);
+  const message = document.querySelector('.message');
+  message.innerText = msg;
+  messageClearTimer = setTimeout(function () {
+    message.innerText = '';
+  }, 3000);
+}
diff --git a/api-samples/storage/stylizr/popup.html b/api-samples/storage/stylizr/popup.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Stylizr</title>
+    <style>
+      body {
+        font-family: sans-serif;
+        width: 200px;
+      }
+    </style>
+  </head>
+
+  <body>
+    <div id="message"></div>
+    <script src="popup.js"></script>
+  </body>
+</html>
diff --git a/api-samples/storage/stylizr/popup.js b/api-samples/storage/stylizr/popup.js
@@ -0,0 +1,39 @@
+// Store CSS data in the "local" storage area.
+const storage = chrome.storage.local;
+
+const message = document.querySelector('#message');
+
+// Check if there is CSS specified.
+async function run() {
+  const items = await storage.get('css');
+  if (items.css) {
+    const [currentTab] = await chrome.tabs.query({
+      active: true,
+      currentWindow: true
+    });
+    try {
+      await chrome.scripting.insertCSS({
+        css: items.css,
+        target: {
+          tabId: currentTab.id
+        }
+      });
+      message.innerText = 'Injected style!';
+    } catch (e) {
+      console.error(e);
+      message.innerText = 'Injection failed. Are you on a special page?';
+    }
+  } else {
+    const optionsUrl = chrome.runtime.getURL('options.html');
+    const optionsPageLink = document.createElement('a');
+    optionsPageLink.target = '_blank';
+    optionsPageLink.href = optionsUrl;
+    optionsPageLink.textContent = 'options page';
+    message.innerText = '';
+    message.appendChild(document.createTextNode('Set a style in the '));
+    message.appendChild(optionsPageLink);
+    message.appendChild(document.createTextNode(' first.'));
+  }
+}
+
+run();