Google Background Changer v1.0

ArtGames101 · Mar 17, 2018 · ba96dcb · ba96dcb
1 parent 8a95d72
commit ba96dcb
Show file tree

Hide file tree

Showing 4 changed files with 199 additions and 0 deletions.
diff --git a/icon.png b/icon.png
diff --git a/manifest.json b/manifest.json
@@ -0,0 +1,16 @@
+{
+  "manifest_version": 2,
+
+  "name": "Google Background Changer",
+  "description": "Change the Backround of Google or another page!",
+  "version": "1.0",
+
+  "browser_action": {
+    "default_icon": "icon.png",
+    "default_popup": "popup.html"
+  },
+  "permissions": [
+    "activeTab",
+    "storage"
+  ]
+}
diff --git a/popup.html b/popup.html
@@ -0,0 +1,57 @@
+<!doctype html>
+<!--
+ This page is shown when the extension button is clicked, because the
+ "browser_action" field in manifest.json contains the "default_popup" key with
+ value "popup.html".
+ -->
+<html>
+  <head>
+    <title>GBC</title>
+    <style type="text/css">
+      body {
+        margin: 10px;
+        white-space: nowrap;
+      }
+
+      h1 {
+        font-size: 15px;
+      }
+
+      #container {
+        align-items: center;
+        display: flex;
+        justify-content: space-between;
+      }
+    </style>
+
+    <!--
+      - JavaScript and HTML must be in separate files: see our Content Security
+      - Policy documentation[1] for details and explanation.
+      -
+      - [1]: https://developer.chrome.com/extensions/contentSecurityPolicy
+    -->
+    <script src="popup.js"></script>
+  </head>
+
+  <body>
+    <h1>Background Color Changer</h1>
+    <div id="container">
+      <span>Choose a color</span>
+      <select id="dropdown">
+        <option selected disabled hidden value=''></option>
+        <option value="white">Default (White)</option>
+        <option value="pink">Pink</option>
+        <option value="green">Green</option>
+        <option value="yellow">Yellow</option>
+        <option value="blue">Blue</option>
+        <option value="red">Red</option>
+      </select>
+    </div>
+  <br>
+  <br>
+  <br>
+  <br>
+  </br>
+  <p>Made by ArtGames101</p>
+  </body>
+</html>
diff --git a/popup.js b/popup.js
@@ -0,0 +1,126 @@
+// Copyright (c) 2014 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+/**
+ * Get the current URL.
+ *
+ * @param {function(string)} callback called when the URL of the current tab
+ *   is found.
+ */
+function getCurrentTabUrl(callback) {
+  // Query filter to be passed to chrome.tabs.query - see
+  // https://developer.chrome.com/extensions/tabs#method-query
+  var queryInfo = {
+    active: true,
+    currentWindow: true
+  };
+
+  chrome.tabs.query(queryInfo, (tabs) => {
+    // chrome.tabs.query invokes the callback with a list of tabs that match the
+    // query. When the popup is opened, there is certainly a window and at least
+    // one tab, so we can safely assume that |tabs| is a non-empty array.
+    // A window can only have one active tab at a time, so the array consists of
+    // exactly one tab.
+    var tab = tabs[0];
+
+    // A tab is a plain object that provides information about the tab.
+    // See https://developer.chrome.com/extensions/tabs#type-Tab
+    var url = tab.url;
+
+    // tab.url is only available if the "activeTab" permission is declared.
+    // If you want to see the URL of other tabs (e.g. after removing active:true
+    // from |queryInfo|), then the "tabs" permission is required to see their
+    // "url" properties.
+    console.assert(typeof url == 'string', 'tab.url should be a string');
+
+    callback(url);
+  });
+
+  // Most methods of the Chrome extension APIs are asynchronous. This means that
+  // you CANNOT do something like this:
+  //
+  // var url;
+  // chrome.tabs.query(queryInfo, (tabs) => {
+  //   url = tabs[0].url;
+  // });
+  // alert(url); // Shows "undefined", because chrome.tabs.query is async.
+}
+
+/**
+ * Change the background color of the current page.
+ *
+ * @param {string} color The new background color.
+ */
+function changeBackgroundColor(color) {
+  var script = 'document.body.style.backgroundColor="' + color + '";';
+  // See https://developer.chrome.com/extensions/tabs#method-executeScript.
+  // chrome.tabs.executeScript allows us to programmatically inject JavaScript
+  // into a page. Since we omit the optional first argument "tabId", the script
+  // is inserted into the active tab of the current window, which serves as the
+  // default.
+  chrome.tabs.executeScript({
+    code: script
+  });
+}
+
+/**
+ * Gets the saved background color for url.
+ *
+ * @param {string} url URL whose background color is to be retrieved.
+ * @param {function(string)} callback called with the saved background color for
+ *     the given url on success, or a falsy value if no color is retrieved.
+ */
+function getSavedBackgroundColor(url, callback) {
+  // See https://developer.chrome.com/apps/storage#type-StorageArea. We check
+  // for chrome.runtime.lastError to ensure correctness even when the API call
+  // fails.
+  chrome.storage.sync.get(url, (items) => {
+    callback(chrome.runtime.lastError ? null : items[url]);
+  });
+}
+
+/**
+ * Sets the given background color for url.
+ *
+ * @param {string} url URL for which background color is to be saved.
+ * @param {string} color The background color to be saved.
+ */
+function saveBackgroundColor(url, color) {
+  var items = {};
+  items[url] = color;
+  // See https://developer.chrome.com/apps/storage#type-StorageArea. We omit the
+  // optional callback since we don't need to perform any action once the
+  // background color is saved.
+  chrome.storage.sync.set(items);
+}
+
+// This extension loads the saved background color for the current tab if one
+// exists. The user can select a new background color from the dropdown for the
+// current page, and it will be saved as part of the extension's isolated
+// storage. The chrome.storage API is used for this purpose. This is different
+// from the window.localStorage API, which is synchronous and stores data bound
+// to a document's origin. Also, using chrome.storage.sync instead of
+// chrome.storage.local allows the extension data to be synced across multiple
+// user devices.
+document.addEventListener('DOMContentLoaded', () => {
+  getCurrentTabUrl((url) => {
+    var dropdown = document.getElementById('dropdown');
+
+    // Load the saved background color for this page and modify the dropdown
+    // value, if needed.
+    getSavedBackgroundColor(url, (savedColor) => {
+      if (savedColor) {
+        changeBackgroundColor(savedColor);
+        dropdown.value = savedColor;
+      }
+    });
+
+    // Ensure the background color is changed and saved when the dropdown
+    // selection changes.
+    dropdown.addEventListener('change', () => {
+      changeBackgroundColor(dropdown.value);
+      saveBackgroundColor(url, dropdown.value);
+    });
+  });
+});