merge conflict with mdn/chrome-browser and list tabs

apply-css/background.js

@@ -11,17 +11,18 @@ function toggleCSS(tab) {
 
   function gotTitle(title) {
     if (title === TITLE_APPLY) {
-      chrome.pageAction.setIcon({tabId: tab.id, path: "icons/on.svg"});
-      chrome.pageAction.setTitle({tabId: tab.id, title: TITLE_REMOVE});
-      chrome.tabs.insertCSS({code: CSS});
+      browser.pageAction.setIcon({tabId: tab.id, path: "icons/on.svg"});
+      browser.pageAction.setTitle({tabId: tab.id, title: TITLE_REMOVE});
+      browser.tabs.insertCSS({code: CSS});
     } else {
-      chrome.pageAction.setIcon({tabId: tab.id, path: "icons/off.svg"});
-      chrome.pageAction.setTitle({tabId: tab.id, title: TITLE_APPLY});
-      chrome.tabs.removeCSS({code: CSS});    
+      browser.pageAction.setIcon({tabId: tab.id, path: "icons/off.svg"});
+      browser.pageAction.setTitle({tabId: tab.id, title: TITLE_APPLY});
+      browser.tabs.removeCSS({code: CSS});
     }
   }
 
-  chrome.pageAction.getTitle({tabId: tab.id}, gotTitle)
+  var gettingTitle = browser.pageAction.getTitle({tabId: tab.id});
+  gettingTitle.then(gotTitle);
 }
 
 /*
@@ -39,16 +40,17 @@ Only operates on tabs whose URL's protocol is applicable.
 */
 function initializePageAction(tab) {
   if (protocolIsApplicable(tab.url)) {
-    chrome.pageAction.setIcon({tabId: tab.id, path: "icons/off.svg"});
-    chrome.pageAction.setTitle({tabId: tab.id, title: TITLE_APPLY});
-    chrome.pageAction.show(tab.id);
+    browser.pageAction.setIcon({tabId: tab.id, path: "icons/off.svg"});
+    browser.pageAction.setTitle({tabId: tab.id, title: TITLE_APPLY});
+    browser.pageAction.show(tab.id);
   }
 }
 
 /*
 When first loaded, initialize the page action for all tabs.
 */
-chrome.tabs.query({}, (tabs) => {
+var gettingAllTabs = browser.tabs.query({});
+gettingAllTabs.then((tabs) => {
   for (tab of tabs) {
     initializePageAction(tab);
   }
@@ -57,11 +59,11 @@ chrome.tabs.query({}, (tabs) => {
 /*
 Each time a tab is updated, reset the page action for that tab.
 */
-chrome.tabs.onUpdated.addListener((id, changeInfo, tab) => {
+browser.tabs.onUpdated.addListener((id, changeInfo, tab) => {
   initializePageAction(tab);
 });
 
 /*
 Toggle CSS when the page action is clicked.
 */
-chrome.pageAction.onClicked.addListener(toggleCSS);
+browser.pageAction.onClicked.addListener(toggleCSS);

beastify/content_scripts/beastify.js

@@ -7,7 +7,7 @@ beastify():
 function beastify(request, sender, sendResponse) {
   removeEverything();
   insertBeast(request.beastURL);
-  chrome.runtime.onMessage.removeListener(beastify);
+  browser.runtime.onMessage.removeListener(beastify);
 }
 
 /*
@@ -34,4 +34,4 @@ function insertBeast(beastURL) {
 /*
 Assign beastify() as a listener for messages from the extension.
 */
-chrome.runtime.onMessage.addListener(beastify);
+browser.runtime.onMessage.addListener(beastify);

beastify/popup/choose_beast.js

@@ -4,11 +4,11 @@ Given the name of a beast, get the URL to the corresponding image.
 function beastNameToURL(beastName) {
   switch (beastName) {
     case "Frog":
-      return chrome.extension.getURL("beasts/frog.jpg");
+      return browser.extension.getURL("beasts/frog.jpg");
     case "Snake":
-      return chrome.extension.getURL("beasts/snake.jpg");
+      return browser.extension.getURL("beasts/snake.jpg");
     case "Turtle":
-      return chrome.extension.getURL("beasts/turtle.jpg");
+      return browser.extension.getURL("beasts/turtle.jpg");
   }
 }
 
@@ -25,23 +25,22 @@ If it's on a button wich contains class "clear":
   Reload the page.
   Close the popup. This is needed, as the content script malfunctions after page reloads.
 */
-document.addEventListener("click", function(e) {
+document.addEventListener("click", (e) => {
   if (e.target.classList.contains("beast")) {
     var chosenBeast = e.target.textContent;
     var chosenBeastURL = beastNameToURL(chosenBeast);
 
-    chrome.tabs.executeScript(null, {
+    browser.tabs.executeScript(null, {
       file: "/content_scripts/beastify.js"
     });
 
-    chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
-      chrome.tabs.sendMessage(tabs[0].id, {beastURL: chosenBeastURL});
+    var gettingActiveTab = browser.tabs.query({active: true, currentWindow: true});
+    gettingActiveTab.then((tabs) => {
+      browser.tabs.sendMessage(tabs[0].id, {beastURL: chosenBeastURL});
     });
-
-    return;
   }
   else if (e.target.classList.contains("clear")) {
-    chrome.tabs.reload();
+    browser.tabs.reload();
     window.close();
 
     return;

bookmark-it/background.js

@@ -6,7 +6,7 @@ var currentBookmark;
  * is already bookmarked.
  */
 function updateIcon() {
-  chrome.browserAction.setIcon({
+  browser.browserAction.setIcon({
     path: currentBookmark ? {
       19: "icons/star-filled-19.png",
       38: "icons/star-filled-38.png"
@@ -23,42 +23,47 @@ function updateIcon() {
  */
 function toggleBookmark() {
   if (currentBookmark) {
-    chrome.bookmarks.remove(currentBookmark.id);
+    browser.bookmarks.remove(currentBookmark.id);
     currentBookmark = null;
     updateIcon();
   } else {
-    chrome.bookmarks.create({title: currentTab.title, url: currentTab.url}, function(bookmark) {
+    var creating = browser.bookmarks.create({title: currentTab.title, url: currentTab.url});
+    creating.then(function(bookmark) {
       currentBookmark = bookmark;
       updateIcon();
     });
   }
 }
 
-chrome.browserAction.onClicked.addListener(toggleBookmark);
+browser.browserAction.onClicked.addListener(toggleBookmark);
 
 /*
  * Switches currentTab and currentBookmark to reflect the currently active tab
  */
-function updateTab() {
-  chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
+function updateActiveTab(tabs) {
+
+  function updateTab(tabs) {
     if (tabs[0]) {
       currentTab = tabs[0];
-
-      chrome.bookmarks.search({url: currentTab.url}, (bookmarks) => {
+      var searching = browser.bookmarks.search({url: currentTab.url});
+      searching.then((bookmarks) => {
         currentBookmark = bookmarks[0];
         updateIcon();
       });
     }
-  });
+  }
+
+  var gettingActiveTab = browser.tabs.query({active: true, currentWindow: true});
+  gettingActiveTab.then(updateTab);
 }
 
 // TODO listen for bookmarks.onCreated and bookmarks.onRemoved once Bug 1221764 lands
 
 // listen to tab URL changes
-chrome.tabs.onUpdated.addListener(updateTab);
+browser.tabs.onUpdated.addListener(updateActiveTab);
 
 // listen to tab switching
-chrome.tabs.onActivated.addListener(updateTab);
+browser.tabs.onActivated.addListener(updateActiveTab);
 
 // update when the extension loads initially
-updateTab();
+updateActiveTab();

chill-out/background.js

@@ -14,18 +14,20 @@ var CATGIFS = "http://chilloutandwatchsomecatgifs.com/";
 /*
 Restart alarm for the currently active tab, whenever background.js is run.
 */
-chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
+var gettingActiveTab = browser.tabs.query({active: true, currentWindow: true});
+gettingActiveTab.then((tabs) => {
   restartAlarm(tabs[0].id);
 });
 
 /*
 Restart alarm for the currently active tab, whenever the user navigates.
 */
-chrome.tabs.onUpdated.addListener(function (tabId, changeInfo, tab) {
+browser.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
   if (!changeInfo.url) {
     return;
   }
-  chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
+  var gettingActiveTab = browser.tabs.query({active: true, currentWindow: true});
+  gettingActiveTab.then((tabs) => {
     if (tabId == tabs[0].id) {
       restartAlarm(tabId);
     }
@@ -35,7 +37,7 @@ chrome.tabs.onUpdated.addListener(function (tabId, changeInfo, tab) {
 /*
 Restart alarm for the currently active tab, whenever a new tab becomes active.
 */
-chrome.tabs.onActivated.addListener(function (activeInfo) {
+browser.tabs.onActivated.addListener((activeInfo) => {
   restartAlarm(activeInfo.tabId);
 });
 
@@ -44,11 +46,12 @@ restartAlarm: clear all alarms,
 then set a new alarm for the given tab.
 */
 function restartAlarm(tabId) {
-  chrome.pageAction.hide(tabId);
-  chrome.alarms.clearAll();
-  chrome.tabs.get(tabId, function(tab) {
+  browser.pageAction.hide(tabId);
+  browser.alarms.clearAll();
+  var gettingTab = browser.tabs.get(tabId);
+  gettingTab.then((tab) => {
     if (tab.url != CATGIFS) {
-      chrome.alarms.create("", {delayInMinutes: DELAY});
+      browser.alarms.create("", {delayInMinutes: DELAY});
     }
   });
 }
@@ -56,15 +59,16 @@ function restartAlarm(tabId) {
 /*
 On alarm, show the page action.
 */
-chrome.alarms.onAlarm.addListener(function(alarm) {
-  chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
-    chrome.pageAction.show(tabs[0].id);
+browser.alarms.onAlarm.addListener((alarm) => {
+  var gettingActiveTab = browser.tabs.query({active: true, currentWindow: true});
+  gettingActiveTab.then((tabs) => {
+    browser.pageAction.show(tabs[0].id);
   });
 });
 
 /*
 On page action click, navigate the corresponding tab to the cat gifs.
 */
-chrome.pageAction.onClicked.addListener(function () {
-  chrome.tabs.update({url: CATGIFS});
+browser.pageAction.onClicked.addListener(function () {
+  browser.tabs.update({url: CATGIFS});
 });

commands/background.js

@@ -10,10 +10,11 @@
  *       shortcut: "Ctrl+Shift+U"
  *    }]
  */
-chrome.commands.getAll(function(commands) {
-  commands.forEach(function(command) {
+var gettingAllCommands = browser.commands.getAll();
+gettingAllCommands.then((commands) => {
+  for (command of commands) {
     console.log(command);
-  });
+  }
 });
 
 /**
@@ -22,6 +23,6 @@ chrome.commands.getAll(function(commands) {
  * In this sample extension, there is only one registered command: "Ctrl+Shift+U".
  * On Mac, this command will automatically be converted to "Command+Shift+U".
  */
-chrome.commands.onCommand.addListener(function(command) {
+browser.commands.onCommand.addListener((command) => {
   console.log("onCommand event received for message: ", command);
 });

context-menu-demo/background.js

@@ -3,63 +3,67 @@ Called when the item has been created, or when creation failed due to an error.
 We'll just log success/failure here.
 */
 function onCreated(n) {
-  if (chrome.runtime.lastError) {
-    console.log("error creating item:" + chrome.runtime.lastError);
+  if (browser.runtime.lastError) {
+    console.log(`Error: ${browser.runtime.lastError}`);
   } else {
-    console.log("item created successfully");
+    console.log("Item created successfully");
   }
 }
 
 /*
-Called when the item has been removed, or when there was an error.
-We'll just log success or failure here.
+Called when the item has been removed.
+We'll just log success here.
 */
 function onRemoved() {
-  if (chrome.runtime.lastError) {
-    console.log("error removing item:" + chrome.runtime.lastError);
-  } else {
-    console.log("item removed successfully");
-  }
+  console.log("Item removed successfully");
+}
+
+/*
+Called when there was an error.
+We'll just log the error here.
+*/
+function onError(error) {
+  console.log(`Error: ${error}`);
 }
 
 /*
 Create all the context menu items.
 */
-chrome.contextMenus.create({
+browser.contextMenus.create({
   id: "log-selection",
-  title: chrome.i18n.getMessage("contextMenuItemSelectionLogger"),
+  title: browser.i18n.getMessage("contextMenuItemSelectionLogger"),
   contexts: ["selection"]
 }, onCreated);
 
-chrome.contextMenus.create({
+browser.contextMenus.create({
   id: "remove-me",
-  title: chrome.i18n.getMessage("contextMenuItemRemoveMe"),
+  title: browser.i18n.getMessage("contextMenuItemRemoveMe"),
   contexts: ["all"]
 }, onCreated);
 
-chrome.contextMenus.create({
+browser.contextMenus.create({
   id: "separator-1",
   type: "separator",
   contexts: ["all"]
 }, onCreated);
 
-chrome.contextMenus.create({
+browser.contextMenus.create({
   id: "greenify",
   type: "radio",
-  title: chrome.i18n.getMessage("contextMenuItemGreenify"),
+  title: browser.i18n.getMessage("contextMenuItemGreenify"),
   contexts: ["all"],
   checked: true
 }, onCreated);
 
-chrome.contextMenus.create({
+browser.contextMenus.create({
   id: "bluify",
   type: "radio",
-  title: chrome.i18n.getMessage("contextMenuItemBluify"),
+  title: browser.i18n.getMessage("contextMenuItemBluify"),
   contexts: ["all"],
   checked: false
 }, onCreated);
 
-chrome.contextMenus.create({
+browser.contextMenus.create({
   id: "separator-2",
   type: "separator",
   contexts: ["all"]
@@ -67,10 +71,10 @@ chrome.contextMenus.create({
 
 var checkedState = true;
 
-chrome.contextMenus.create({
+browser.contextMenus.create({
   id: "check-uncheck",
   type: "checkbox",
-  title: chrome.i18n.getMessage("contextMenuItemUncheckMe"),
+  title: browser.i18n.getMessage("contextMenuItemUncheckMe"),
   contexts: ["all"],
   checked: checkedState
 }, onCreated);
@@ -85,7 +89,7 @@ var blue = 'document.body.style.border = "5px solid blue"';
 var green = 'document.body.style.border = "5px solid green"';
 
 function borderify(tabId, color) {
-  chrome.tabs.executeScript(tabId, {
+  browser.tabs.executeScript(tabId, {
     code: color
   });
 }
@@ -101,12 +105,12 @@ property into the event listener.
 function updateCheckUncheck() {
   checkedState = !checkedState;
   if (checkedState) {
-    chrome.contextMenus.update("check-uncheck", {
-      title: chrome.i18n.getMessage("contextMenuItemUncheckMe"),
+    browser.contextMenus.update("check-uncheck", {
+      title: browser.i18n.getMessage("contextMenuItemUncheckMe"),
     });
   } else {
-    chrome.contextMenus.update("check-uncheck", {
-      title: chrome.i18n.getMessage("contextMenuItemCheckMe"),
+    browser.contextMenus.update("check-uncheck", {
+      title: browser.i18n.getMessage("contextMenuItemCheckMe"),
     });
   }
 }
@@ -115,13 +119,14 @@ function updateCheckUncheck() {
 The click event listener, where we perform the appropriate action given the
 ID of the menu item that was clicked.
 */
-chrome.contextMenus.onClicked.addListener(function(info, tab) {
+browser.contextMenus.onClicked.addListener(function(info, tab) {
   switch (info.menuItemId) {
     case "log-selection":
       console.log(info.selectionText);
       break;
     case "remove-me":
-      chrome.contextMenus.remove(info.menuItemId, onRemoved);
+      var removing = browser.contextMenus.remove(info.menuItemId);
+      removing.then(onRemoved, onError);
       break;
     case "bluify":
       borderify(tab.id, blue);

cookie-bg-picker/background_scripts/background.js

@@ -1,26 +1,30 @@
 /* Retrieve any previously set cookie and send to content script */
 
-chrome.tabs.onUpdated.addListener(cookieUpdate);
+browser.tabs.onUpdated.addListener(cookieUpdate);
+
+function getActiveTab() {
+  return browser.tabs.query({active: true, currentWindow: true});
+}
 
 function cookieUpdate(tabId, changeInfo, tab) {
-  chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
+  getActiveTab().then((tabs) => {
     /* inject content script into current tab */
 
-    chrome.tabs.executeScript(null, {
+    browser.tabs.executeScript(null, {
       file: "/content_scripts/updatebg.js"
     });
 
     // get any previously set cookie for the current tab 
-
-    chrome.cookies.get({
+    var gettingCookies = browser.cookies.get({
       url: tabs[0].url,
       name: "bgpicker"
-    }, function(cookie) {
+    });
+    gettingCookies.then((cookie) => {
       if(cookie) {
         var cookieVal = JSON.parse(cookie.value);
-        chrome.tabs.sendMessage(tabs[0].id, {image: cookieVal.image});
-        chrome.tabs.sendMessage(tabs[0].id, {color: cookieVal.color});
+        browser.tabs.sendMessage(tabs[0].id, {image: cookieVal.image});
+        browser.tabs.sendMessage(tabs[0].id, {color: cookieVal.color});
       }
     });
   }); 
-}
+}

cookie-bg-picker/content_scripts/updatebg.js

@@ -1,7 +1,7 @@
 var html = document.querySelector('html');
 var body = document.querySelector('body');
 
-chrome.runtime.onMessage.addListener(updateBg);
+browser.runtime.onMessage.addListener(updateBg);
 
 function updateBg(request, sender, sendResponse) {
   if(request.image) {
@@ -16,4 +16,4 @@ function updateBg(request, sender, sendResponse) {
     body.style.backgroundImage = '';
     body.style.backgroundColor = '';
   }
-}
+}

cookie-bg-picker/popup/bgpicker.js

@@ -6,6 +6,10 @@ var reset = document.querySelector('.color-reset button');
 var cookieVal = { image : '',
                   color : '' };
 
+function getActiveTab() {
+  return browser.tabs.query({active: true, currentWindow: true});
+}
+
 /* apply backgrounds to buttons */
 /* add listener so that when clicked, button applies background to page HTML */
 
@@ -15,13 +19,13 @@ for(var i = 0; i < bgBtns.length; i++) {
   bgBtns[i].style.backgroundImage = bgImg;
 
   bgBtns[i].onclick = function(e) {
-    chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
+    getActiveTab().then((tabs) => {
       var imgName = e.target.getAttribute('class');
-      var fullURL = chrome.extension.getURL('popup/images/'+ imgName + '.png');
-      chrome.tabs.sendMessage(tabs[0].id, {image: fullURL});
+      var fullURL = browser.extension.getURL('popup/images/'+ imgName + '.png');
+      browser.tabs.sendMessage(tabs[0].id, {image: fullURL});
 
       cookieVal.image = fullURL;
-      chrome.cookies.set({
+      browser.cookies.set({
         url: tabs[0].url,
         name: "bgpicker", 
         value: JSON.stringify(cookieVal)
@@ -33,12 +37,12 @@ for(var i = 0; i < bgBtns.length; i++) {
 /* apply chosen color to HTML background */
 
 colorPick.onchange = function(e) {
-  chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
+  getActiveTab().then((tabs) => {
     var currColor = e.target.value;
-    chrome.tabs.sendMessage(tabs[0].id, {color: currColor});
+    browser.tabs.sendMessage(tabs[0].id, {color: currColor});
 
     cookieVal.color = currColor;
-    chrome.cookies.set({
+    browser.cookies.set({
       url: tabs[0].url,
       name: "bgpicker", 
       value: JSON.stringify(cookieVal)
@@ -49,12 +53,12 @@ colorPick.onchange = function(e) {
 /* reset background */
 
 reset.onclick = function() {
-  chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
-    chrome.tabs.sendMessage(tabs[0].id, {reset: true});
+  getActiveTab().then((tabs) => {
+    browser.tabs.sendMessage(tabs[0].id, {reset: true});
 
     cookieVal = { image : '',
                   color : '' };
-    chrome.cookies.remove({
+    browser.cookies.remove({
       url: tabs[0].url,
       name: "bgpicker" 
     })
@@ -63,6 +67,9 @@ reset.onclick = function() {
 
 /* Report cookie changes to the console */
 
-chrome.cookies.onChanged.addListener(function(changeInfo) {
-  console.log('Cookie changed:\n* Cookie: ' + JSON.stringify(changeInfo.cookie) + '\n* Cause: ' + changeInfo.cause + '\n* Removed: ' + changeInfo.removed);
-})
+browser.cookies.onChanged.addListener((changeInfo) => {
+  console.log(`Cookie changed:\n
+              * Cookie: ${JSON.stringify(changeInfo.cookie)}\n
+              * Cause: ${changeInfo.cause}\n
+              * Removed: ${changeInfo.removed}`);
+});

embedded-webextension-bootstrapped/step1-hybrid-addon/webextension/popup.js

@@ -1,7 +1,7 @@
 "use strict";
 
-browser.storage.local.get("super-important-user-setting", results => {
+var gettingItem = browser.storage.local.get("super-important-user-setting");
+gettingItem.then(results => {
   const panelContent = results["super-important-user-setting"] || "No settings saved.";
-
   document.querySelector("#panel-content").textContent = panelContent;
 });

embedded-webextension-bootstrapped/step2-pure-webextension/popup.js

@@ -1,7 +1,7 @@
 "use strict";
 
-browser.storage.local.set("super-important-user-setting", results => {
+var gettingItem = browser.storage.local.get("super-important-user-setting");
+gettingItem.then(results => {
   const panelContent = results["super-important-user-setting"] || "No settings saved.";
-
   document.querySelector("#panel-content").textContent = panelContent;
 });

embedded-webextension-sdk/step1-hybrid-addon/webextension/popup.js

@@ -1,3 +1,4 @@
-browser.storage.local.get((results) => {
+const gettingItem = browser.storage.local.get();
+gettingItem.then((results) => {
   document.querySelector("#panel-content").textContent = JSON.stringify(results, null, 2);
 });

embedded-webextension-sdk/step2-pure-webextension/options.js

@@ -1,4 +1,5 @@
-browser.storage.local.get("prefs", results => {
+const gettingItem = browser.storage.local.get("prefs");
+gettingItem.then(results => {
   const {prefs} = results || {
     prefs: {
       superImportantUserPref: "default value"

embedded-webextension-sdk/step2-pure-webextension/popup.js

@@ -1,3 +1,4 @@
-browser.storage.local.get((results) => {
+const gettingItem = browser.storage.local.get();
+gettingItem.then((results) => {
   document.querySelector("#panel-content").textContent = JSON.stringify(results, null, 2);
 });

favourite-colour/background.js

@@ -1,5 +1,5 @@
 function handleClick() {
-  chrome.runtime.openOptionsPage();
+  browser.runtime.openOptionsPage();
 }
 
-chrome.browserAction.onClicked.addListener(handleClick);
+browser.browserAction.onClicked.addListener(handleClick);

favourite-colour/options.js

@@ -1,11 +1,12 @@
 function saveOptions(e) {
-  chrome.storage.local.set({
+  browser.storage.local.set({
     colour: document.querySelector("#colour").value
   });
 }
 
 function restoreOptions() {
-  chrome.storage.local.get('colour', (res) => {
+  var gettingItem = browser.storage.local.get('colour');
+  gettingItem.then((res) => {
     document.querySelector("#colour").value = res.colour || 'Firefox red';
   });
 }

history-deleter/background.js

@@ -1,5 +1,5 @@
-chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
+browser.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
   if (!tab.url.match(/^about:/)) {
-    chrome.pageAction.show(tab.id);
+    browser.pageAction.show(tab.id);
   }
 });

history-deleter/history.js

@@ -8,7 +8,7 @@ function get_hostname(url) {
 
 function set_domain(domain) {
   spans = document.getElementsByClassName('domain');
-  [].slice.call(spans).forEach(function(span) {
+  [].slice.call(spans).forEach((span) => {
     span.textContent = domain;
   });
 }
@@ -20,52 +20,53 @@ function no_history(hostname) {
   history_text.textContent = `No history for ${hostname}.`;
 }
 
+function getActiveTab() {
+  return browser.tabs.query({active: true, currentWindow: true});
+}
+
 // When the page is loaded find the current tab and then use that to query
 // the history.
-chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
+getActiveTab().then((tabs) => {
   var list = document.getElementById('history');
   var hostname = get_hostname(tabs[0].url);
 
-  chrome.history.search(
-    // Search for all history entries for the current windows domain.
-    // Because this could be a lot of entries, lets limit it to 5.
-    {text: hostname, maxResults: 5},
-    function(results) {
-      // What to show if there are no results.
-      if (results.length < 1) {
-        no_history(hostname);
-      } else {
-        for (var k in results) {
-          var history = results[k];
-          var li = document.createElement('p');
-          var a = document.createElement('a');
-          var url = document.createTextNode(history.url);
-          a.href = history.url;
-          a.target = '_blank';
-          a.appendChild(url);
-          li.appendChild(a);
-          list.appendChild(li);
-        }
+  // Search for all history entries for the current windows domain.
+  // Because this could be a lot of entries, lets limit it to 5.
+  var searchingHistory = browser.history.search({text: hostname, maxResults: 5});
+  searchingHistory.then((results) => {
+    // What to show if there are no results.
+    if (results.length < 1) {
+      no_history(hostname);
+    } else {
+      for (var k in results) {
+        var history = results[k];
+        var li = document.createElement('p');
+        var a = document.createElement('a');
+        var url = document.createTextNode(history.url);
+        a.href = history.url;
+        a.target = '_blank';
+        a.appendChild(url);
+        li.appendChild(a);
+        list.appendChild(li);
       }
     }
-  );
+  });
 });
 
 function clearAll(e) {
-  chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
+  getActiveTab().then((tabs) => {
     var hostname = get_hostname(tabs[0].url);
     if (!hostname) {
       // Don't try and delete history when there's no hostname.
       return;
     }
 
-    chrome.history.search(
-      {text: hostname},
-      // Search will return us a list of histories for this domain.
-      // Loop through them and delete them one by one.
-      function(results) {
+    // Search will return us a list of histories for this domain.
+    // Loop through them and delete them one by one.
+    var searchingHistory = browser.history.search({text: hostname})
+    searchingHistory.then((results) => {
         for (k = 0; k < results.length; k++) {
-          chrome.history.deleteUrl({url: results[k].url});
+          browser.history.deleteUrl({url: results[k].url});
         }
         // Clear out the UI.
         no_history(hostname);

latest-download/popup/latest_download.js

@@ -3,22 +3,17 @@ var latestDownloadId;
 
 /*
 Callback from getFileIcon.
-Log an error, or initialize the displayed icon.
+Initialize the displayed icon.
 */
 function updateIconUrl(iconUrl) {
-  /*
-  If there was an error getting the icon URL,
-  then lastError will be set. So check lastError
-  and handle it.
-  */
-  if (chrome.runtime.lastError) {
-    console.error(chrome.runtime.lastError);
-    iconUrl = "";
-  }
   var downloadIcon = document.querySelector("#icon");
   downloadIcon.setAttribute("src", iconUrl);
 }
 
+function onError(error) {
+  console.log(`Error: ${error}`);
+}
+
 /*
 If there was a download item,
 - remember its ID as latestDownloadId
@@ -30,7 +25,8 @@ function initializeLatestDownload(downloadItems) {
   var downloadUrl = document.querySelector("#url");
   if (downloadItems.length > 0) {
     latestDownloadId = downloadItems[0].id;
-    chrome.downloads.getFileIcon(latestDownloadId, updateIconUrl);
+    var gettingIconUrl = browser.downloads.getFileIcon(latestDownloadId);
+    gettingIconUrl.then(updateIconUrl, onError);
     downloadUrl.textContent = downloadItems[0].url;
     document.querySelector("#open").classList.remove("disabled");
     document.querySelector("#remove").classList.remove("disabled");
@@ -44,17 +40,18 @@ function initializeLatestDownload(downloadItems) {
 /*
 Search for the most recent download, and pass it to initializeLatestDownload()
 */
-chrome.downloads.search({
+var searching = browser.downloads.search({
   limit: 1,
   orderBy: ["-startTime"]
-}, initializeLatestDownload);
+});
+searching.then(initializeLatestDownload);
 
 /*
 Open the item using the associated application.
 */
 function openItem() {
   if (!document.querySelector("#open").classList.contains("disabled")) {
-    chrome.downloads.open(latestDownloadId);
+    browser.downloads.open(latestDownloadId);
   }
 }
 
@@ -63,8 +60,8 @@ Remove item from disk (removeFile) and from the download history (erase)
 */
 function removeItem() {
   if (!document.querySelector("#remove").classList.contains("disabled")) {
-    chrome.downloads.removeFile(latestDownloadId);
-    chrome.downloads.erase({id: latestDownloadId});
+    browser.downloads.removeFile(latestDownloadId);
+    browser.downloads.erase({id: latestDownloadId});
     window.close();
   }
 }

list-cookies/README.md

@@ -0,0 +1,9 @@
+# list-cookies
+
+## What it does
+
+This extensions list the cookies in the active tab.
+
+# What it shows
+
+Demonstration of the getAll() function in the cookie API

list-cookies/cookies.css

@@ -0,0 +1,11 @@
+html, body {
+  width: 500px;
+}
+
+.panel {
+  padding: 5px;
+}
+
+li {
+  margin-bottom: 5px;
+}

list-cookies/cookies.html

@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+
+<html>
+  <head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="cookies.css"/>
+  </head>
+
+  <body>
+    <div class="panel">
+      <div class="panel-section panel-section-header">
+        <div class="text-section-header" id="header-title"></div>
+      </div>
+      <ul id="cookie-list">
+      </ul>
+    <script src="cookies.js"></script>
+  </body>
+
+</html>

list-cookies/cookies.js

@@ -0,0 +1,39 @@
+function showCookiesForTab(tabs) {
+  //get the first tab object in the array
+  tab = tabs.pop();
+
+  //get all cookies in the domain
+  var gettingAllCookies = browser.cookies.getAll({url: tab.url});
+  gettingAllCookies.then((cookies) => {
+
+    //set the header of the panel
+    var activeTabUrl = document.getElementById('header-title');
+    var text = document.createTextNode("Cookies at: "+tab.title);
+    var cookieList = document.getElementById('cookie-list');
+    activeTabUrl.appendChild(text);
+
+    if (cookies.length > 0) {
+      //add an <li> item with the name and value of the cookie to the list
+      for (cookie of cookies) {
+        var li = document.createElement("li");
+        var content = document.createTextNode(cookie.name + ": "+ cookie.value);
+        li.appendChild(content);
+        cookieList.appendChild(li);
+      }
+    } else {
+      var p = document.createElement("p");
+      var content = document.createTextNode("No cookies in this tab.");
+      var parent = cookieList.parentNode;
+
+      p.appendChild(content);
+      parent.appendChild(p);
+    }
+  });
+};
+
+//get active tab to run an callback function.
+//it sends to our callback an array of tab objects
+function getActiveTab() {
+  return browser.tabs.query({currentWindow: true, active: true});
+}
+getActiveTab().then(showCookiesForTab);

list-cookies/manifest.json

@@ -0,0 +1,27 @@
+{
+  "applications": {
+    "gecko": {
+      "id": "list-cookies@mozilla.org",
+      "strict_min_version": "47.0a1"
+    }
+  },
+  "browser_action": {
+    "browser_style": true,
+    "default_title": "List cookies in the active tab",
+    "default_popup": "cookies.html",
+    "default_icon": {
+      "19": "icons/default19.png",
+      "38": "icons/default38.png"
+    }
+  },
+  "description": "List cookies in the active tab.",
+  "icons": {
+    "48": "icons/cookie.png",
+    "96": "icons/cookie@2x.png"
+  },
+  "homepage_url": "https://github.com/mdn/webextensions-examples/tree/master/list-cookies",
+  "manifest_version": 2,
+  "name": "List cookies",
+  "version": "1.0",
+  "permissions": ["cookies","<all_urls>","tabs"]
+}

navigation-stats/background.js

@@ -1,5 +1,6 @@
 // Load existent stats with the storage API.
-chrome.storage.local.get("hostNavigationStats", results => {
+var gettingStoredStats = browser.storage.local.get("hostNavigationStats");
+gettingStoredStats.then(results => {
   // Initialize the saved stats if not yet initialized.
   if (!results.hostNavigationStats) {
     results = {
@@ -11,7 +12,7 @@ chrome.storage.local.get("hostNavigationStats", results => {
 
   // Monitor completed navigation events and update
   // stats accordingly.
-  chrome.webNavigation.onCompleted.addListener(evt => {
+  browser.webNavigation.onCompleted.addListener(evt => {
     // Filter out any sub-frame related navigation event
     if (evt.frameId !== 0) {
       return;
@@ -23,6 +24,7 @@ chrome.storage.local.get("hostNavigationStats", results => {
     hostNavigationStats[url.hostname]++;
 
     // Persist the updated stats.
-    chrome.storage.local.set(results);
-  }, { url: [{schemes: ["http", "https"]}]});
+    browser.storage.local.set(results);
+  }, {
+    url: [{schemes: ["http", "https"]}]});
 });

navigation-stats/popup.js

@@ -1,5 +1,6 @@
 // Get the saved stats and render the data in the popup window.
-chrome.storage.local.get("hostNavigationStats", results => {
+var gettingStoredStats = browser.storage.local.get("hostNavigationStats");
+gettingStoredStats.then(results => {
   if (!results.hostNavigationStats) {
     return;
   }

notify-link-clicks-i18n/background-script.js

@@ -5,11 +5,11 @@ which we read from the message.
 */
 function notify(message) {
   console.log("background script received message");
-  var title = chrome.i18n.getMessage("notificationTitle");
-  var content = chrome.i18n.getMessage("notificationContent", message.url);
-  chrome.notifications.create({
+  var title = browser.i18n.getMessage("notificationTitle");
+  var content = browser.i18n.getMessage("notificationContent", message.url);
+  browser.notifications.create({
     "type": "basic",
-    "iconUrl": chrome.extension.getURL("icons/link-48.png"),
+    "iconUrl": browser.extension.getURL("icons/link-48.png"),
     "title": title,
     "message": content
   });
@@ -18,4 +18,4 @@ function notify(message) {
 /*
 Assign `notify()` as a listener to messages from the content script.
 */
-chrome.runtime.onMessage.addListener(notify);
+browser.runtime.onMessage.addListener(notify);

notify-link-clicks-i18n/content-script.js

@@ -11,7 +11,7 @@ function notifyExtension(e) {
     return;
 
   console.log("content script sending message");
-  chrome.runtime.sendMessage({"url": target.href});
+  browser.runtime.sendMessage({"url": target.href});
 }
 
 /*

open-my-page-button/background.js

@@ -3,7 +3,7 @@ Open a new tab, and load "my-page.html" into it.
 */
 function openMyPage() {
   console.log("injecting");
-   chrome.tabs.create({
+   browser.tabs.create({
      "url": chrome.extension.getURL("my-page.html")
    });
 }
@@ -12,5 +12,5 @@ function openMyPage() {
 /*
 Add openMyPage() as a listener to clicks on the browser action.
 */
-chrome.browserAction.onClicked.addListener(openMyPage);
+browser.browserAction.onClicked.addListener(openMyPage);
  

quicknote/README.md

@@ -9,7 +9,7 @@ This extension includes:
 
 * A browser action that creates a popup — within the popup is:
 	* Two form elements for entering title and body text for a new note, along with a button to add a note, and a button to clear all notes.
-	* A list of the notes that have been added to the extension — each note includes a delete button to delete just that extension. You can also click on the note title and body to edit them. In edit mode, each note includes:
+	* A list of the notes that have been added to the extension — each note includes a delete button to delete just that note. You can also click on the note title and body to edit them. In edit mode, each note includes:
 		* An update button to submit an update.
 		* A cancel button to cancel the update.
 		
@@ -17,4 +17,4 @@ Quicknote uses the WebExtensions [Storage API](https://developer.mozilla.org/en-
 
 ## What it shows
 
-* How to persist data in a WebExtension using the Storage API.
+* How to persist data in a WebExtension using the Storage API.

quicknote/popup/quicknote.js

@@ -14,23 +14,24 @@ var addBtn = document.querySelector('.add');
 addBtn.addEventListener('click', addNote);
 clearBtn.addEventListener('click', clearAll);
 
+/* generic error handler */
+function onError(error) {
+  console.log(error);
+}
+
 /* display previously-saved stored notes on startup */
 
 initialize();
 
 function initialize() {
-  chrome.storage.local.get(null,function(results) {
-    if(chrome.runtime.lastError) {
-      console.log(chrome.runtime.lastError);
-    } else {
-      var noteKeys = Object.keys(results);
-      for(i = 0; i < noteKeys.length; i++) {
-        var curKey = noteKeys[i];
-        var curValue = results[curKey];
-        displayNote(curKey,curValue);
-      }
+  var gettingAllStorageItems = browser.storage.local.get(null);
+  gettingAllStorageItems.then((results) => {
+    var noteKeys = Object.keys(results);
+    for(noteKey of noteKeys) {
+      var curValue = results[noteKey];
+      displayNote(noteKey,curValue);
     }
-  });
+  }, onError);
 }
 
 /* Add a note to the display, and storage */
@@ -38,26 +39,24 @@ function initialize() {
 function addNote() {
   var noteTitle = inputTitle.value;
   var noteBody = inputBody.value;
-  chrome.storage.local.get(noteTitle, function(result) {
+  var gettingItem = browser.storage.local.get(noteTitle);
+  gettingItem.then((result) => {
     var objTest = Object.keys(result);
     if(objTest.length < 1 && noteTitle !== '' && noteBody !== '') {
       inputTitle.value = '';
       inputBody.value = '';
       storeNote(noteTitle,noteBody);
     }
-  })
+  }, onError);
 }
 
 /* function to store a new note in storage */
 
 function storeNote(title, body) {
-  chrome.storage.local.set({ [title] : body }, function() {
-    if(chrome.runtime.lastError) {
-      console.log(chrome.runtime.lastError);
-    } else {
-      displayNote(title,body);
-    }
-  });
+  var storingNote = browser.storage.local.set({ [title] : body });
+  storingNote.then(() => {
+    displayNote(title,body);
+  }, onError);
 }
 
 /* function to display a note in the note box */
@@ -92,7 +91,7 @@ function displayNote(title, body) {
   deleteBtn.addEventListener('click',function(e){
     evtTgt = e.target;
     evtTgt.parentNode.parentNode.parentNode.removeChild(evtTgt.parentNode.parentNode);
-    chrome.storage.local.remove(title);
+    browser.storage.local.remove(title);
   })
 
   /* create note edit box */
@@ -155,15 +154,17 @@ function displayNote(title, body) {
 /* function to update notes */
 
 function updateNote(delNote,newTitle,newBody) {
-  chrome.storage.local.set({ [newTitle] : newBody }, function() {
+  var storingNote = browser.storage.local.set({ [newTitle] : newBody });
+  storingNote.then(() => {
     if(delNote !== newTitle) {
-      chrome.storage.local.remove(delNote, function() {
+      var removingNote = browser.storage.local.remove(delNote);
+      removingNote.then(() => {
         displayNote(newTitle, newBody);
-      });
+      }, onError);
     } else {
       displayNote(newTitle, newBody);
     }
-  });
+  }, onError);
 }
 
 /* Clear all notes from the display/storage */
@@ -172,5 +173,5 @@ function clearAll() {
   while (noteContainer.firstChild) {
       noteContainer.removeChild(noteContainer.firstChild);
   }
-  chrome.storage.local.clear();
-}
+  browser.storage.local.clear();
+}

selection-to-clipboard/README.md

@@ -0,0 +1,21 @@
+# selection-to-clipboard
+
+## What it does
+
+This extension includes:
+
+* a content script, "content-script.js", that is injected into all pages
+
+The content script listens for text selections in the page it's attached to and copies the text to the clipboard on mouse-up.
+
+## What it shows
+
+* how to inject content scripts declaratively using manifest.json
+* how to write to the [clipboard](https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Interact_with_the_clipboard)
+
+## Note
+* If the `copySelection` function was in a browser event `clipboardWrite` permissions would be required e.g.
+```
+"permissions": ["clipboardWrite"]
+```
+See [Interact with the clipboard](https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Interact_with_the_clipboard.)

selection-to-clipboard/content-script.js

@@ -0,0 +1,15 @@
+/*
+copy the selected text to clipboard
+*/
+function copySelection(e) {
+    var selectedText = window.getSelection().toString().trim();
+
+    if (selectedText) {
+        document.execCommand("Copy");
+    }
+}
+
+/*
+Add copySelection() as a listener to mouseup events.
+*/
+document.addEventListener("mouseup", copySelection);

selection-to-clipboard/icons/LICENSE

@@ -0,0 +1,2 @@
+
+The "page-32.png" and "page-48.png" icons are taken from the miu iconset created by Linh Pham Thi Dieu, and are used under the terms of its license: http://linhpham.me/miu/.

selection-to-clipboard/manifest.json

@@ -0,0 +1,22 @@
+{
+    "manifest_version": 2,
+    "name": "selection-to-clipboard",
+    "description": "Example of WebExtensionAPI for writing to the clipboard",
+    "version": "1.0",
+    "homepage_url": "https://github.com/mdn/webextensions-examples/tree/master/selection-to-clipboard",
+
+    "icons": {
+        "48": "icons/clipboard-48.png"
+    },
+
+    "applications": {
+        "gecko": {
+            "strict_min_version": "51.0a1"
+        }
+    },
+
+    "content_scripts": [{
+        "matches": ["<all_urls>"],
+        "js": ["content-script.js"]
+    }]
+}

tabs-tabs-tabs/tabs.html

@@ -28,10 +28,13 @@
 
     <div class="panel-section-separator"></div>
 
-
     <a href="#" id="tabs-add-zoom">Zoom in</a><br>
     <a href="#" id="tabs-default-zoom">Reset zoom</a><br>
-    <a href="#" id="tabs-decrease-zoom">Zoom out</a>
+    <a href="#" id="tabs-decrease-zoom">Zoom out</a><br>
+
+    <div class="panel-section-separator"></div>
+    
+    <a href="#" id="tabs-highlight">Highlight (only supported by Chrome)</a>
 
     <div class="panel-section-separator"></div>
 

tabs-tabs-tabs/tabs.js

@@ -12,20 +12,21 @@ function firstUnpinnedTab(tabs) {
   }
 }
 
+/**
+ * listTabs to switch to
+ */
 function listTabs() {
-  chrome.tabs.query({
-    currentWindow: true
-  }, function(tabs) {
-    var tabsList = document.getElementById('tabs-list');
-    var currentTabs = document.createDocumentFragment();
-    var limit = 5;
-    var counter = 0;
+  getCurrentWindowTabs().then((tabs) => {
+    let tabsList = document.getElementById('tabs-list');
+    let currentTabs = document.createDocumentFragment();
+    let limit = 5;
+    let counter = 0;
 
-    tabsList.innerHTML = '';
+    tabsList.textContent = '';
 
-    for (var tab of tabs) {
+    for (let tab of tabs) {
       if (!tab.active && counter <= limit) {
-        var tabLink = document.createElement('a');
+        let tabLink = document.createElement('a');
 
         tabLink.textContent = tab.title || tab.id;
         tabLink.setAttribute('href', tab.id);
@@ -40,9 +41,15 @@ function listTabs() {
   });
 }
 
+document.addEventListener("DOMContentLoaded", listTabs);
+
+function getCurrentWindowTabs() {
+  return browser.tabs.query({currentWindow: true});
+}
+
 document.addEventListener("click", function(e) {
   function callOnActiveTab(callback) {
-    chrome.tabs.query({currentWindow: true}, function(tabs) {
+    getCurrentWindowTabs().then((tabs) => {
       for (var tab of tabs) {
         if (tab.active) {
           callback(tab, tabs);
@@ -57,7 +64,8 @@ document.addEventListener("click", function(e) {
       if (!tab.pinned) {
         index = firstUnpinnedTab(tabs);
       }
-      chrome.tabs.move([tab.id], {index});
+      console.log(`moving ${tab.id} to ${index}`)
+      browser.tabs.move([tab.id], {index});
     });
   }
 
@@ -68,30 +76,30 @@ document.addEventListener("click", function(e) {
         var lastPinnedTab = Math.max(0, firstUnpinnedTab(tabs) - 1);
         index = lastPinnedTab;
       }
-      chrome.tabs.move([tab.id], {index});
+      browser.tabs.move([tab.id], {index});
     });
   }
 
   else if (e.target.id === "tabs-duplicate") {
     callOnActiveTab((tab) => {
-      chrome.tabs.duplicate(tab.id);
+      browser.tabs.duplicate(tab.id);
     });
   }
 
   else if (e.target.id === "tabs-reload") {
     callOnActiveTab((tab) => {
-      chrome.tabs.reload(tab.id);
+      browser.tabs.reload(tab.id);
     });
   }
 
   else if (e.target.id === "tabs-remove") {
     callOnActiveTab((tab) => {
-      chrome.tabs.remove(tab.id);
+      browser.tabs.remove(tab.id);
     });
   }
 
   else if (e.target.id === "tabs-create") {
-    chrome.tabs.create({url: "https://developer.mozilla.org/en-US/Add-ons/WebExtensions"});
+    browser.tabs.create({url: "https://developer.mozilla.org/en-US/Add-ons/WebExtensions"});
   }
 
   else if (e.target.id === "tabs-alertinfo") {
@@ -106,7 +114,8 @@ document.addEventListener("click", function(e) {
 
   else if (e.target.id === "tabs-add-zoom") {
     callOnActiveTab((tab) => {
-      chrome.tabs.getZoom(tab.id, function(zoomFactor){
+      var gettingZoom = browser.tabs.getZoom(tab.id);
+      gettingZoom.then((zoomFactor) => {
         //the maximum zoomFactor is 3, it can't go higher
         if (zoomFactor >= MAX_ZOOM) {
           alert("Tab zoom factor is already at max!");
@@ -115,7 +124,7 @@ document.addEventListener("click", function(e) {
           //if the newZoomFactor is set to higher than the max accepted
           //it won't change, and will never alert that it's at maximum
           newZoomFactor = newZoomFactor > MAX_ZOOM ? MAX_ZOOM : newZoomFactor;
-          chrome.tabs.setZoom(tab.id, newZoomFactor);
+          browser.tabs.setZoom(tab.id, newZoomFactor);
         }
       });
     });
@@ -123,7 +132,8 @@ document.addEventListener("click", function(e) {
 
   else if (e.target.id === "tabs-decrease-zoom") {
     callOnActiveTab((tab) => {
-      chrome.tabs.getZoom(tab.id, function(zoomFactor){
+      var gettingZoom = browser.tabs.getZoom(tab.id);
+      gettingZoom.then((zoomFactor) => {
         //the minimum zoomFactor is 0.3, it can't go lower
         if (zoomFactor <= MIN_ZOOM) {
           alert("Tab zoom factor is already at minimum!");
@@ -132,7 +142,7 @@ document.addEventListener("click", function(e) {
           //if the newZoomFactor is set to lower than the min accepted
           //it won't change, and will never alert that it's at minimum
           newZoomFactor = newZoomFactor < MIN_ZOOM ? MIN_ZOOM : newZoomFactor;
-          chrome.tabs.setZoom(tab.id, newZoomFactor);
+          browser.tabs.setZoom(tab.id, newZoomFactor);
         }
       });
     });
@@ -140,15 +150,23 @@ document.addEventListener("click", function(e) {
 
   else if (e.target.id === "tabs-default-zoom") {
     callOnActiveTab((tab) => {
-      chrome.tabs.getZoom(tab.id, function(zoomFactor){
+      var gettingZoom = browser.tabs.getZoom(tab.id);
+      gettingZoom.then((zoomFactor) => {
         if (zoomFactor == DEFAULT_ZOOM) {
           alert("Tab zoom is already at the default zoom factor");
         } else {
-          chrome.tabs.setZoom(tab.id, DEFAULT_ZOOM);
+          browser.tabs.setZoom(tab.id, DEFAULT_ZOOM);
         }
       });
     });
   }
+  // Currently (11/2/2016) only supported by Chrome
+  else if (e.target.id === "tabs-highlight") { // highlights current tab and next tab (cycles back to first tab if current tab is the last one)
+    callOnActiveTab((tab, tabs) => {
+      next = (tab.index+1) % tabs.length;
+      browser.tabs.highlight({tabs:[tab.index, next]});
+    });
+  }
 
   else if (e.target.classList.contains('switch-tabs')) {
     var tabId = +e.target.getAttribute('href');
@@ -169,4 +187,20 @@ document.addEventListener("click", function(e) {
   e.preventDefault();
 });
 
-document.addEventListener("DOMContentLoaded", listTabs);
+//onRemoved listener. fired when tab is removed
+browser.tabs.onRemoved.addListener(function(tabId, removeInfo){
+  console.log(`The tab with id: ${tabId}, is closing`);
+
+  if(removeInfo.isWindowClosing) {
+    console.log(`Its window is also closing.`);
+  } else {
+    console.log(`Its window is not closing`);
+  }
+});
+
+//onMoved listener. fired when tab is moved into the same window
+browser.tabs.onMoved.addListener(function(tabId, moveInfo){
+  var startIndex = moveInfo.fromIndex;
+  var endIndex = moveInfo.toIndex;
+  console.log(`Tab with id: ${tabId} moved from index: ${startIndex} to index: ${endIndex}`);
+});

user-agent-rewriter/background.js

@@ -37,7 +37,7 @@ only for the target page.
 
 Make it "blocking" so we can modify the headers.
 */
-chrome.webRequest.onBeforeSendHeaders.addListener(rewriteUserAgentHeader,
+browser.webRequest.onBeforeSendHeaders.addListener(rewriteUserAgentHeader,
                                           {urls: [targetPage]},
                                           ["blocking", "requestHeaders"]);
 

user-agent-rewriter/popup/choose_ua.js

@@ -10,6 +10,6 @@ document.addEventListener("click", function(e) {
   }
 
   var chosenUa = e.target.textContent;
-  var backgroundPage = chrome.extension.getBackgroundPage();
+  var backgroundPage = browser.extension.getBackgroundPage();
   backgroundPage.setUaString(chosenUa);
 });

webpack-modules/background_scripts/background.js

@@ -1,6 +1,6 @@
 const leftPad = require("left-pad");
 
-chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
+browser.runtime.onMessage.addListener((message, sender, sendResponse) => {
     const result = leftPad(message.text, message.amount, message.with);
     sendResponse(result);
 });

webpack-modules/popup/left-pad.js

@@ -13,11 +13,12 @@ document.getElementById("leftpad-form").addEventListener("submit", (e) => {
 }, false);
 
 document.getElementById("pad-bg").addEventListener("click", (e) => {
-    chrome.runtime.sendMessage({
+    var sendingMessage = browser.runtime.sendMessage({
         text: textNode.value,
         amount: amountNode.valueAsNumber,
         with: withNode.value
-    }, (result) => {
-        resultNode.value = result;
+    });
+    sendingMessage.then((result) => {
+      resultNode.value = result;
     });
 });

window-manipulator/README.md

@@ -0,0 +1,11 @@
+# Window manipulator
+
+## What it does
+
+This extension includes a browser action with a popup specified as "window.html".
+
+The popup lets the user perform various simple operations using the windows API.
+
+# What it shows
+
+Demonstration of various windows API functions.

window-manipulator/manifest.json

@@ -0,0 +1,20 @@
+{
+  "browser_action": {
+    "browser_style": true,
+    "default_title": "Window manipulator",
+    "default_popup": "window.html",
+    "default_icon": {
+      "19": "icons/window19.png",
+      "38": "icons/window38.png"
+    }
+  },
+  "icons": {
+    "48": "icons/window.png",
+    "96": "icons/window@2x.png"
+  },
+  "description": "A list of methods you can perform on a window.",
+  "homepage_url": "https://github.com/mdn/webextensions-examples/tree/master/window-manipulator",
+  "manifest_version": 2,
+  "name": "Window manipulator",
+  "version": "1.0"
+}

window-manipulator/window.css

@@ -0,0 +1,12 @@
+html, body {
+  width: 350px;
+}
+
+a {
+  margin: 10px;
+  display: inline-block;
+}
+
+.panel {
+  margin: 5px;
+}

window-manipulator/window.html

@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+
+<html>
+  <head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="window.css"/>
+  </head>
+
+  <body>
+    <div class="panel">
+      <div class="panel-section panel-section-header">
+        <div class="text-section-header">Window manipulator</div>
+      </div>
+
+      <a href="#" id="window-update-size_768">Resize window to 768x1024</a><br>
+      <a href="#" id="window-update-minimize">Minimize</a><br>
+
+      <div class="panel-section-separator"></div>
+
+      <a href="#" id="window-create-incognito">Create new incognito window</a><br>
+      <a href="#" id="window-remove">Remove active window</a><br>
+
+      <div class="panel-section-separator"></div>
+
+      <a href="#" id="window-resize-all">Resize all windows to 1024x768</a><br>
+    </div>
+
+  <script src="window.js"></script>
+</body>
+
+</html>

window-manipulator/window.js

@@ -0,0 +1,58 @@
+document.addEventListener("click", (e) => {
+
+  function getCurrentWindow() {
+    return browser.windows.getCurrent();
+  }
+
+  if (e.target.id === "window-update-size_768") {
+    getCurrentWindow().then((currentWindow) => {
+      var updateInfo = {
+        width: 768,
+        height: 1024
+      };
+
+      browser.windows.update(currentWindow.id, updateInfo);
+    });
+  }
+
+  if (e.target.id === "window-update-minimize") {
+    getCurrentWindow().then((currentWindow) => {
+      var updateInfo = {
+        state: "minimized"
+      };
+
+      browser.windows.update(currentWindow.id, updateInfo);
+    });
+  }
+
+  else if (e.target.id === "window-create-incognito") {
+    var createData = {
+      incognito: true,
+    };
+    var creating = browser.windows.create(createData);
+    creating.then(() => {
+      console.log("The incognito window has been created");
+    });
+  }
+
+  else if (e.target.id === "window-remove") {
+    getCurrentWindow().then((currentWindow) => {
+      browser.windows.remove(currentWindow.id);
+    });
+  }
+
+  else if (e.target.id === "window-resize-all") {
+    var gettingAll = browser.windows.getAll();
+    gettingAll.then((windows) => {
+      var updateInfo = {
+        width: 1024,
+        height: 768
+      };
+      for (var item of windows) {
+        browser.windows.update(item.id, updateInfo);
+      }
+    });
+  }
+
+  e.preventDefault();
+});