[Extension Docs]Update Mappy 2.0

Mappy used deprecated APIs.
Updated sendRequest and onRequest to sendMessage and onMessage.

Bug: 808592
Change-Id: I52a24f12d16cfde1bab8f9729bfe996ba97a356d
Reviewed-on: https://chromium-review.googlesource.com/907214Reviewed-by: Devlin <rdevlin.cronin@chromium.org>
Commit-Queue: Crystal Lambert <crystallambert@chromium.org>
Cr-Commit-Position: refs/heads/master@{#543814}

chrome/common/extensions/docs/examples/extensions/mappy/background.js

@@ -2,43 +2,10 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-// Global accessor that the popup uses.
-var addresses = {};
-var selectedAddress = null;
-var selectedId = null;
+'use strict'
 
-function updateAddress(tabId) {
-  chrome.tabs.sendRequest(tabId, {}, function(address) {
-    addresses[tabId] = address;
-    if (!address) {
-      chrome.pageAction.hide(tabId);
-    } else {
-      chrome.pageAction.show(tabId);
-      if (selectedId == tabId) {
-        updateSelected(tabId);
-      }
-    }
-  });
-}
-
-function updateSelected(tabId) {
-  selectedAddress = addresses[tabId];
-  if (selectedAddress)
-    chrome.pageAction.setTitle({tabId:tabId, title:selectedAddress});
-}
-
-chrome.tabs.onUpdated.addListener(function(tabId, change, tab) {
-  if (change.status == "complete") {
-    updateAddress(tabId);
-  }
-});
-
-chrome.tabs.onSelectionChanged.addListener(function(tabId, info) {
-  selectedId = tabId;
-  updateSelected(tabId);
-});
-
-// Ensure the current selected tab is set up.
-chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
-  updateAddress(tabs[0].id);
+chrome.runtime.onMessage.addListener(function(req, sender) {
+  chrome.storage.local.set({address: req.address})
+  chrome.pageAction.show(sender.tab.id);
+  chrome.pageAction.setTitle({tabId: sender.tab.id, title: req.address});
 });

chrome/common/extensions/docs/examples/extensions/mappy/manifest.json

 {
   "name": "Mappy",
-  "version": "0.6.1",
+  "version": "1.0",
   "description": "Finds addresses in the web page you're on and pops up a map window.",
   "icons": { "128": "icon.png" },
-  "background": { "scripts": ["background.js"] },
+  "background": {
+    "scripts": ["background.js"],
+    "persistent": false
+  },
   "content_scripts": [
-    { "matches": ["http://*/*"], "js": ["mappy_content_script.js"] }
+    {
+      "matches": ["http://*/*"],
+      "js": ["mappy_content_script.js"]
+    }
   ],
   "permissions": [
-    "tabs",
+    "storage",
     "https://maps.google.com/*",
     "https://maps.googleapis.com/*"
   ],

chrome/common/extensions/docs/examples/extensions/mappy/mappy_content_script.js

@@ -2,50 +2,28 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-// The background page is asking us to find an address on the page.
-if (window == top) {
-  chrome.extension.onRequest.addListener(function(req, sender, sendResponse) {
-    sendResponse(findAddress());
-  });
-}
-
 // Search the text nodes for a US-style mailing address.
-// Return null if none is found.
-var findAddress = function() {
-  var found;
-  var re = /(\d+\s+[':.,\s\w]*,\s*[A-Za-z]+\s*\d{5}(-\d{4})?)/m;
-  var node = document.body;
-  var done = false;
-  while (!done) {
-    done = true;
-    for (var i = 0; i < node.childNodes.length; ++i) {
-      var child = node.childNodes[i];
-      if (child.textContent.match(re)) {
-        node = child;
-        found = node;
-        done = false;
-        break;
-      }
-    }
+
+let findAddress = function() {
+  let found;
+  let re = /(\d+\s+[':.,\s\w]*,\s*[A-Za-z]+\s*\d{5}(-\d{4})?)/m;
+  let node = document.body.textContent.match(re);
+  if (document.body.textContent.match(re)) {
+    found = node;
   }
   if (found) {
-    var text = "";
-    if (found.childNodes.length) {
-      for (var i = 0; i < found.childNodes.length; ++i) {
-        text += found.childNodes[i].textContent + " ";
-      }
-    } else {
-      text = found.textContent;
-    }
-    var match = re.exec(text);
+    let text = node;
+    let match = re.exec(text);
     if (match && match.length) {
-      console.log("found: " + match[0]);
-      var trim = /\s{2,}/g;
-      return match[0].replace(trim, " ");
+      console.log('found: ' + match[0]);
+      let trim = /\s{2,}/g;
+      let address = match[0].replace(trim, ' ')
+      chrome.runtime.sendMessage({'address': address})
     } else {
-      console.log("bad initial match: " + found.textContent);
-      console.log("no match in: " + text);
+      console.log('bad initial match: ' + found.textContent);
+      console.log('no match in: ' + text);
     }
   }
-  return null;
 }
+
+findAddress();

chrome/common/extensions/docs/examples/extensions/mappy/popup.js

@@ -2,12 +2,14 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-var maps_key = "AIzaSyBa5aieunaIp3Obco-dNVYMdbnTZGAVkKQ";
+'use strict'
+
+const kMaps_key = 'AIzaSyBa5aieunaIp3Obco-dNVYMdbnTZGAVkKQ';
 
 function gclient_geocode(address) {
-  var url = 'https://maps.googleapis.com/maps/api/geocode/json?address=' +
+  let url = 'https://maps.googleapis.com/maps/api/geocode/json?address=' +
             encodeURIComponent(address) + '&sensor=false';
-  var request = new XMLHttpRequest();
+  let request = new XMLHttpRequest();
 
   request.open('GET', url, true);
   console.log(url);
@@ -15,13 +17,13 @@ function gclient_geocode(address) {
     console.log(request, e);
     if (request.readyState == 4) {
       if (request.status == 200) {
-        var json = JSON.parse(request.responseText);
-        var latlng = json.results[0].geometry.location;
+        let json = JSON.parse(request.responseText);
+        let latlng = json.results[0].geometry.location;
         latlng = latlng.lat + ',' + latlng.lng;
-        var src = 'https://maps.googleapis.com/maps/api/staticmap?center=' +
+        let src = 'https://maps.googleapis.com/maps/api/staticmap?center=' +
             latlng + '&markers=' + latlng + '&zoom=14' +
-            '&size=512x512&sensor=false&key=' + maps_key;
-        var map = document.getElementById('map');
+            '&size=512x512&sensor=false&key=' + kMaps_key;
+        let map = document.getElementById('map');
         map.src = src;
         map.addEventListener('click', function () {
           window.close();
@@ -35,9 +37,9 @@ function gclient_geocode(address) {
 }
 
 function map() {
-  var address = chrome.extension.getBackgroundPage().selectedAddress;
-  if (address)
-    gclient_geocode(address);
+  chrome.storage.local.get(['address'], function(value){
+    gclient_geocode(value.address);
+  })
 }
 
 window.onload = map;