✨Use WebAssembly validator for chrome extension (#34502)

* Use WebAssembly validator for chrome extension * Use es5 for popup.html * Init wasm before polymer code
ampproject · May 24, 2021 · 40a8d20 · 40a8d20
1 parent 048f036
commit 40a8d20
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 26 deletions.
diff --git a/validator/js/chromeextension/background.html b/validator/js/chromeextension/background.html
@@ -17,7 +17,7 @@
 <html>
   <head>
     <meta charset="utf-8">
-    <script src="https://cdn.ampproject.org/v0/validator.js"></script>
+    <script src="https://cdn.ampproject.org/v0/validator_wasm.js"></script>
     <script src="background.js"></script>
   </head>
   <body></body>

diff --git a/validator/js/chromeextension/background.js b/validator/js/chromeextension/background.js
@@ -315,12 +315,13 @@ function validateUrlFromTab(tab, userAgent) {
   // Add the temporary header to the request
   xhr.setRequestHeader(globals.userAgentHeader, userAgent);
 
-  xhr.onreadystatechange = function() {
+  xhr.onreadystatechange = async function() {
     if (xhr.readyState === 4) {
       // The request is complete; remove our temporary listener.
       chrome.webRequest.onBeforeSendHeaders.removeListener(
           updateSendHeadersUserAgent);
       const doc = xhr.responseText;
+      await amp.validator.init();
       const validationResult = amp.validator.validateString(doc);
       window.sessionStorage.setItem(url, JSON.stringify(validationResult));
       if (validationResult.status == 'PASS') {

diff --git a/validator/js/chromeextension/manifest.json b/validator/js/chromeextension/manifest.json
@@ -1,7 +1,7 @@
 {
   "manifest_version": 2,
   "name": "__MSG_extensionName__",
-  "version": "1.1.8",
+  "version": "1.2.0",
   "default_locale": "en",
   "description": "__MSG_extensionDescription__",
   "icons": {
@@ -25,8 +25,8 @@
       "run_at": "document_start"
     }
   ],
-  "content_security_policy": "script-src 'self' https://cdn.ampproject.org; object-src 'self'",
-  "homepage_url": "https://www.ampproject.org",
+  "content_security_policy": "script-src 'self' https://cdn.ampproject.org 'wasm-eval'; object-src 'self'",
+  "homepage_url": "https://amp.dev",
   "permissions": [
     "tabs",
     "webRequest",

diff --git a/validator/js/chromeextension/popup-validator.html b/validator/js/chromeextension/popup-validator.html
@@ -19,7 +19,7 @@
     <script src="./bower_components/webcomponentsjs/CustomElements.min.js"></script>
     <link href="polymer.html" rel="import">
     <link href="polymer-extension-toolbar.html" rel="import">
-    <script src="https://cdn.ampproject.org/v0/validator.js"></script>
+    <script src="https://cdn.ampproject.org/v0/validator_wasm.js"></script>
     <style is="custom-style">
       body {
         background-color: #fff;
@@ -126,25 +126,27 @@
         </paper-listbox>
       </template>
       <script>
-        Polymer({
-          is: 'results-page',
-          getIssue: function(item) {
-            return amp.validator.renderErrorMessage(item);
-          },
-          hasResults: function(results) {
-            return results.length > 0;
-          },
-          properties: {
-            emptyResultsText: {
-              type: String,
-              value: chrome.i18n.getMessage("emptyResultsText"),
+        amp.validator.init().then(function() {
+          Polymer({
+            is: 'results-page',
+            getIssue: function(item) {
+              return amp.validator.renderErrorMessage(item);
             },
-            results: {
-              type: Array,
-              value: function() { return []; },
-              notify: true,
+            hasResults: function(results) {
+              return results.length > 0;
             },
-          },
+            properties: {
+              emptyResultsText: {
+                type: String,
+                value: chrome.i18n.getMessage("emptyResultsText"),
+              },
+              results: {
+                type: Array,
+                value: function() { return []; },
+                notify: true,
+              },
+            },
+          });
         });
       </script>
     </dom-module>
@@ -224,9 +226,11 @@
               xhr.open('GET', url, true);
               xhr.onreadystatechange = function() {
                 if (xhr.readyState === 4) {
-                  validationResult =
-                    amp.validator.validateString(xhr.responseText);
-                  processResult(validationResult, toolbar, content, url);
+                  amp.validator.init().then(function() {
+                    validationResult =
+                      amp.validator.validateString(xhr.responseText);
+                    processResult(validationResult, toolbar, content, url);
+                  });
                 }
               };
               xhr.send();