Update to Chrome Manifest v3 specifications (#92)

Author: larrybabb

README.md

@@ -7,6 +7,12 @@ The chrome extension is used by the ClinGen curation workflow (link) ...
 
 ## Release Notes
 
+### v3.0
+* This is a combination of merging and modifying v1.16 and v2.0.2 below.
+* Major update to the internal code and configuration based on Google chrome extension manifest v3 specifications.
+* Removal and replacement of Google API (GAPI) which is no longer supported.
+* Internal code refactoring and improvements for more reliable error handling.
+
 ### v1.16
 * Issue #89 - add new flagging candidate reason resulting from discordance project
 * Issue #90 - add new 'Remove Flagged Submission' action

scvc/background.html

@@ -1,101 +1,110 @@
-const API_KEY = 'AIzaSyADs3YruA9LTaRjc7hS94SQvKbQXJSpMp0';
-const DISCOVERY_DOCS = ["https://sheets.googleapis.com/$discovery/rest?version=v4"];
-
-// Create a rule that will show the page action when the conditions are met.
-const kMatchRule = {
-  // Declare the rule conditions.
-  conditions: [new chrome.declarativeContent.PageStateMatcher({
-    pageUrl: {hostEquals: 'www.ncbi.nlm.nih.gov',
-              pathContains: 'variation'}})],
-  // Shows the page action when the condition is met.
-  actions: [new chrome.declarativeContent.ShowPageAction()]
-}
-
 // Register the runtime.onInstalled event listener.
 chrome.runtime.onInstalled.addListener(function() {
   // Overrride the rules to replace them with kMatchRule.
-  chrome.declarativeContent.onPageChanged.removeRules(undefined, function() {
-    chrome.declarativeContent.onPageChanged.addRules([kMatchRule]);
+  chrome.declarativeContent.onPageChanged.removeRules(undefined, () => {
+      chrome.declarativeContent.onPageChanged.addRules([
+        // Create a rule that will show the page action when the conditions are met.
+        {
+            // Declare the rule conditions.
+            conditions: [new chrome.declarativeContent.PageStateMatcher({
+                pageUrl: {
+                    hostEquals: 'www.ncbi.nlm.nih.gov',
+                    pathContains: 'variation'
+                }
+            })],
+            // Shows the page action when the condition is met.
+            actions: [new chrome.declarativeContent.ShowAction()]      
+        }
+    ]);
   });
 });
 
-function onGAPILoad() {
-  gapi.client.init({
-    apiKey: API_KEY,
-    discoveryDocs: DISCOVERY_DOCS,
-  }).then(function () {
-    console.log('gapi initialized');
-  }, function(error) {
-    console.log('error on initialize', error);
-    alert('error on initialize...'+error);
-  });
-}
+const base_url = 'https://sheets.googleapis.com/v4/spreadsheets'
+const options = 'valueInputOption=USER_ENTERED&includeValuesInResponse=true'
+
+chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
 
-// Listen for messages from popup.js
-chrome.extension.onMessage.addListener(
-  function(request, sender, sendResponse) {
+    console.log('===== BACKGROUND.js event recieved:', message, new Date().getTime());
 
-    // verify that the request originated from the chrome-extension popup.html form
-    if (!sender.url.includes("chrome-extension")) return false;
+    if (message.from === "popup" && message.subject === "saveAnnotation") {
 
-    // Get the users email
-    chrome.identity.getProfileUserInfo(function(userinfo){
-      if (!userinfo.email) {
-        alert("No email captured. Please set your browser profile to sync with your google account to bypass this message in the future.");
-      }
-      else {
-        request.user_email=userinfo.email;
-      }
-    });
+        const data = message.data;
 
-    // Get the token
-    chrome.identity.getAuthToken({interactive: true}, function(token) {
+        // do a sanity validation and fail if the data is not available
+        if (!data || !data.scv) {
+            sendResponse({ success: false, message: "Annotation data was not available or no SCV was selected." });
+            return;
+        }
 
-      // Set scvc auth token
-      gapi.auth.setToken({
-        'access_token': token,
-      });
+        // Get the users email
+        chrome.identity.getProfileUserInfo( (userinfo) =>{
+            if (!userinfo.email) {
+                const msg = "No email captured. Please set your browser profile to sync with your google account to save annotations.";
+                console.log('===== BACKGROUND.js event pre-sendResponse on user email not available.', msg, new Date().getTime());
+                sendResponse({ success: false, message: msg });
+                return;
+            }
+            else {
+                data.user_email = userinfo.email;
+            }
+        });
 
-      let body = {};
-      let range = "";
+        try {
+            chrome.identity.getAuthToken({ interactive: true }, (token) => {
+                if (chrome.runtime.lastError) {
+                    console.log('===== BACKGROUND.js event pre-sendResponse on lastError: msg:', chrome.runtime.lastError.message, new Date().getTime());
+                    sendResponse({ success: false, message: chrome.runtime.lastError.message });
+                    return;
+                }
+                const url = `${base_url}/${data.spreadsheet}/values/${data.scv_range}:append?${options}`;
+                const body = {
+                    values: [[
+                        data.vcv,
+                        data.name,
+                        data.scv,
+                        data.submitter,
+                        data.interp,
+                        data.action,
+                        data.reason,
+                        data.notes,
+                        new Date(), // Timestamp
+                        data.submitter_id,
+                        data.variation_id,
+                        data.user_email,
+                        data.review_status
+                    ]]
+                };
 
-      if (request.scv) {
-        range = request.scv_range;
-        body = {values: [[
-                request.vcv,
-                request.name,
-                request.scv,
-                request.submitter,
-                request.interp,
-                request.action,
-                request.reason,
-                request.notes,
-                new Date(), // Timestamp
-                request.submitter_id,
-                request.variation_id,
-                request.user_email,
-                request.review_status
-              ]]};
-      }
+                fetch(url, {
+                    method: 'POST',
+                    headers: {
+                        'Authorization': `Bearer ${token}`,
+                        'Content-Type': 'application/json'
+                    },
+                    body: JSON.stringify(body)
+                }).then(response => {
+                    if (response.ok) {
+                        return response.json();
+                    } else {
+                        throw new Error(`Server error: ${response.status}`);
+                    }
+                }).then(results => {
+                    console.log('===== BACKGROUND.js event pre-sendResponse on url fetch success.', new Date().getTime());
+                    sendResponse({ success: true, message: `${results.updates.updatedCells} cells appended.` });
+                }).catch(error => {
+                    console.log('===== BACKGROUND.js event pre-sendResponse on url fetch failure:', error.message, new Date().getTime());
+                    sendResponse({ success: false, message: error.message });
+                });
+            });
+        } catch (error) {
+            console.log('===== BACKGROUND.js event pre-sendResponse on error getting auth token', error.message, new Date().getTime());
+            sendResponse({ success: false, message: error.message });
+        }
+
+        console.log('===== BACKGROUND.js event indicate async response', new Date().getTime());
+        return true; // Indicate async response
+
+    }
+});
 
-      // Append values to the spreadsheet
-      gapi.client.sheets.spreadsheets.values.append({
-        spreadsheetId: request.spreadsheet,
-        range: range,
-        valueInputOption: 'USER_ENTERED',
-        resource: body
-      }).then((response) => {
-        // On success
-        console.log(`${response.result.updates.updatedCells} cells appended.`)
-        sendResponse({success: true});
-      }, function(error) {
-        // On error
-        console.log('error appending values', error)
-        alert("Error appending values to google sheet...\n"+JSON.stringify(error));
-      });
-    })
 
-    // Wait for response
-    return true;
-  }
-);

scvc/background.js

@@ -1,42 +1,36 @@
-//const SPREADSHEET_ID = '1pzuWR409vSmoFX9inmoU6el6vjG0SniB1KrxWLeVpaA';
-const SPREADSHEET_ID = '1dUnmBZSnz3aeB948b7pIq0iT7_FuCDvtv6FXaVsNcOo';
+const SPREADSHEET_ID = '1dUnmBZSnz3aeB948b7pIq0iT7_FuCDvtv6FXaVsNcOo'; // production
 const SCV_RANGE = 'SCVs';
-const VCV_RANGE = 'VCVs';
 
 // Inform the background page that
 // this tab should have a page-action.
 chrome.runtime.sendMessage({
-    from: 'content',
-    subject: 'showPageAction',
+  from: 'content',
+  subject: 'showPageAction',
 });
 
-// Listen for messages from the popup.
-chrome.runtime.onMessage.addListener((msg, sender, response) => {
-
-  // First, validate the message's structure.
-  if ((msg.from === 'popup') && (msg.subject === 'DOMInfo')) {
-
-    function getMatch(text, re, grp) {
-      var result;
-      result = text.match(re);
-      if (result === null) {
-          return "";
-      }
-      return result[grp];
+function getMatch(text, re, grp) {
+    var result;
+    result = text.match(re);
+    if (result === null) {
+        return "";
     }
+    return result[grp];
+}
+
+function extractClinVarData() {
+   
     // Collect the necessary data.
     var cond_origin_re = /\W*Allele origin:.*?(\w+([\,\s]+\w+)*)/is;
     var review_method_re = /(practice guideline|reviewed by expert panel|no assertion provided|no interpretation for the single variant|criteria provided, multiple submitters, no conflicts|criteria provided, single submitter|criteria provided, conflicting interpretations|no assertion criteria provided|no classification provided|Flagged submission).*?Method:.*?([\w\,\s]+)*/is;
     var subm_scv_re = /\W*\/clinvar\/submitters\/(\d+)\/".*?>(.+?)<\/a>.*?Accession:.*?(SCV\d+\.\d+).*?First in ClinVar:\W(\w+\s\d+\,\s\d+).*?Last updated:.*?(\w+\s\d+\,\s\d+)/is;
     var interp_re = /\W*<div.*?<div.*?(\w+([\s\/\-\,]*\w+)*).*?\(([\w\s\,\-]+)\)/is;
-    
+
     var vcv_accession_re = /Accession:.*?(VCV\d+\.\d+)/is;
     var vcv_variation_id_re = /Variation ID:.*?(\d+)/is;
 
-    var domInfo = {
+    var clinvarData = {
         spreadsheet: SPREADSHEET_ID,
         scv_range: SCV_RANGE,
-        vcv_range: VCV_RANGE,
         vcv: "",
         name: "",
         variation_id: "",
@@ -46,7 +40,7 @@ chrome.runtime.onMessage.addListener((msg, sender, response) => {
         vcv_eval_date: "",
         row: []
     };
-    
+      
     var variantBox = document.evaluate("//div[@id='new-variant-details']//dl", document, null, XPathResult.ANY_TYPE, null );
     var variantBoxHTML = variantBox.iterateNext().innerHTML;
 
@@ -56,57 +50,65 @@ chrome.runtime.onMessage.addListener((msg, sender, response) => {
 
     var vcvClassificationTextNode = vcvClassificationText.iterateNext();
     var vcvReviewStatusNode = vcvReviewStatus.iterateNext();
-
+  
     if (!vcvClassificationTextNode) {
-      // for 2 star and below the vcvs review status and classifiction are found with the following
-      vcvClassificationText = document.evaluate("//div[@class='germline-section']//div[@class='single-item-value']", document, null, XPathResult.ANY_TYPE, null );
-      vcvReviewStatus = document.evaluate("//div[@class='germline-section']//div[@class='section-cnt']//span", document, null, XPathResult.ANY_TYPE, null );  
-      vcvClassificationTextNode = vcvClassificationText.iterateNext();
-      vcvReviewStatusNode = vcvReviewStatus.iterateNext();
+        // for 2 star and below the vcvs review status and classifiction are found with the following
+        vcvClassificationText = document.evaluate("//div[@class='germline-section']//div[@class='single-item-value']", document, null, XPathResult.ANY_TYPE, null );
+        vcvReviewStatus = document.evaluate("//div[@class='germline-section']//div[@class='section-cnt']//span", document, null, XPathResult.ANY_TYPE, null );  
+        vcvClassificationTextNode = vcvClassificationText.iterateNext();
+        vcvReviewStatusNode = vcvReviewStatus.iterateNext();
     }
-    
+
     if (!vcvClassificationTextNode) {
-      // for vcv with no germline scvs there is no classification and review status
-      vcvClassificationText = document.evaluate("//div[@class='germline-section']/p[@class='without-classification']", document, null, XPathResult.ANY_TYPE, null );
-      vcvReviewStatus = document.evaluate("//div[@class='germline-section']/p[@class='without-classification']", document, null, XPathResult.ANY_TYPE, null );  
-      vcvClassificationTextNode = vcvClassificationText.iterateNext();
-      vcvReviewStatusNode = vcvReviewStatus.iterateNext();
+        // for vcv with no germline scvs there is no classification and review status
+        vcvClassificationText = document.evaluate("//div[@class='germline-section']/p[@class='without-classification']", document, null, XPathResult.ANY_TYPE, null );
+        vcvReviewStatus = document.evaluate("//div[@class='germline-section']/p[@class='without-classification']", document, null, XPathResult.ANY_TYPE, null );  
+        vcvClassificationTextNode = vcvClassificationText.iterateNext();
+        vcvReviewStatusNode = vcvReviewStatus.iterateNext();
     }
-
-    domInfo.name            = document.querySelectorAll('#variant-details-table div div dl dd p')[0].innerText;
-    domInfo.vcv             = getMatch(variantBoxHTML, vcv_accession_re, 1);
-    domInfo.variation_id    = getMatch(variantBoxHTML, vcv_variation_id_re, 1);
-    domInfo.vcv_review      = vcvReviewStatusNode.textContent.trim();
-    domInfo.vcv_interp      = vcvClassificationTextNode.textContent.trim();
-
+  
+    clinvarData.name            = document.querySelectorAll('#variant-details-table div div dl dd p')[0].innerText;
+    clinvarData.vcv             = getMatch(variantBoxHTML, vcv_accession_re, 1);
+    clinvarData.variation_id    = getMatch(variantBoxHTML, vcv_variation_id_re, 1);
+    clinvarData.vcv_review      = vcvReviewStatusNode.textContent.trim();
+    clinvarData.vcv_interp      = vcvClassificationTextNode.textContent.trim();
+  
     var timelineArray = document.querySelectorAll('table.timeline-table tbody tr td');
-    domInfo.vcv_most_recent = timelineArray[2].innerHTML;
-    domInfo.vcv_eval_date   = timelineArray[3].innerHTML;
-    
+    clinvarData.vcv_most_recent = timelineArray[2].innerHTML;
+    clinvarData.vcv_eval_date   = timelineArray[3].innerHTML;
+      
     var scvarray = document.querySelectorAll('#new-submission-germline table tbody tr');
     scvarray.forEach(myFunction);
-
+  
     function myFunction(value, index, array) {
-      var interp_match = value.cells[0].innerHTML.match(interp_re);
-      var review_method_match = value.cells[1].innerHTML.match(review_method_re);
+        var interp_match = value.cells[0].innerHTML.match(interp_re);
+        var review_method_match = value.cells[1].innerHTML.match(review_method_re);
 
-      var cond_origin_match = value.cells[2].innerHTML.match(cond_origin_re);      // alert(value.cells[3].innerHTML);
-      var subm_scv_match = value.cells[3].innerHTML.match(subm_scv_re);
+        var cond_origin_match = value.cells[2].innerHTML.match(cond_origin_re);      // alert(value.cells[3].innerHTML);
+        var subm_scv_match = value.cells[3].innerHTML.match(subm_scv_re);
 
-      domInfo.row.push({
-        submitter_id: subm_scv_match[1],
-        submitter: subm_scv_match[2],
-        scv: subm_scv_match[3],
-        subm_date: subm_scv_match[5],
-        origin: cond_origin_match[1],
-        review: review_method_match[1],
-        method: review_method_match[2],
-        interp: interp_match[1],
-        eval_date: interp_match[3]
-      });
+        clinvarData.row.push({
+            submitter_id: subm_scv_match[1],
+            submitter: subm_scv_match[2],
+            scv: subm_scv_match[3],
+            subm_date: subm_scv_match[5],
+            origin: cond_origin_match[1],
+            review: review_method_match[1],
+            method: review_method_match[2],
+            interp: interp_match[1],
+            eval_date: interp_match[3]
+        });
     }
-    // Directly respond to the sender (popup),
-    // through the specified callback.
-    response(domInfo);
-  }
-});
+
+    return clinvarData;
+}
+
+chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
+    console.log('===== CONTENT.js event recieved: msg:', message, new Date().getTime())
+    if (message.from === "popup" && message.subject === "initializePopup") {
+        const data = extractClinVarData();
+        console.log('===== CONTENT.js event pre-sendResponse: ', message, data, new Date().getTime())
+        sendResponse(data);
+    }
+    return true; // Required for async responses
+});