{ "manifest_version":2, "name":"Getting started example", "description":"This extension allows the user to change the background color of the current page.", "version":"1.0", "browser_action":{ "default_icon":"icon.png", "default_popup":"popup.html", "default_title":"Click here!" }, "permissions":[ "activeTab", "storage" ] }
<!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>Getting Started Extension's Popup</title> <styletype="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 --> <scriptsrc="popup.js"></script> </head>
<body> <h1>Background Color Changer</h1> <divid="container"> <span>Choose a color</span> <selectid="dropdown"> <optionselecteddisabledhiddenvalue=''></option> <optionvalue="white">White</option> <optionvalue="pink">Pink</option> <optionvalue="green">Green</option> <optionvalue="yellow">Yellow</option> </select> </div> </body> </html>
// 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. */ functiongetCurrentTabUrl(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. */ functionchangeBackgroundColor(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. */ functiongetSavedBackgroundColor(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. */ functionsaveBackgroundColor(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); }); }); });