add several meanings result

Author: GeneralTao2

background/background.js

@@ -33,17 +33,24 @@ function extractMeaning (document, context) {
     if (!document.querySelector("[data-dobid='hdw']")) { return null; }
 
     var word = document.querySelector("[data-dobid='hdw']").textContent,
-        definitionDiv = document.querySelector("div[data-dobid='dfn']"),
-        meaning = "";
-
-    if (definitionDiv) {
-        definitionDiv.querySelectorAll("span").forEach(function(span){
-            if(!span.querySelector("sup"))
-                 meaning = meaning + span.textContent;
-        });
+        definitionDivNodeList = document.querySelectorAll("div[data-dobid='dfn']"),
+        meaningArray = [];
+        
+    if(definitionDivNodeList) {
+        definitionDivNodeList.forEach((definitionDiv) => {
+            if (definitionDiv) {
+                definitionDiv.querySelectorAll("span").forEach( function(span) {
+                    if(!span.querySelector("sup")) {
+                        meaningArray.push(span.textContent);
+                    }
+                });
+            }
+        });  
+    }
+        
+    for(var i = 0; i < meaningArray.length; i++) {
+        meaningArray[i] = meaningArray[i][0].toUpperCase() + meaningArray[i].substring(1);
     }
-
-    meaning = meaning[0].toUpperCase() + meaning.substring(1);
 
     var audio = document.querySelector("audio[jsname='QInZvb']"),
         source = document.querySelector("audio[jsname='QInZvb'] source"),
@@ -67,7 +74,7 @@ function extractMeaning (document, context) {
         audioSrc = `${GOOGLE_SPEECH_URI}?${queryString}`;
     }
 
-    return { word: word, meaning: meaning, audioSrc: audioSrc };
+    return { word: word, meaningArray: meaningArray, audioSrc: audioSrc };
 };
 
 function saveWord (content) {

content_scripts/dictionary.js

@@ -148,13 +148,27 @@
         return oRect;
     }
 
+    function meaningArrayToParagraphList(meaningArray) {
+        var meaningList = document.createElement("ul");
+        meaningList.style = "margin-top: 0px; margin-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; padding-bottom: 0px;";
+        meaningArray.forEach(function(meaning) {
+            var meaningItem = document.createElement("li");
+            meaningItem.style = "margin-block-start: 0px; margin-block-end: 0px; display: list-item;";
+            meaningItem.textContent = meaning;
+            meaningList.appendChild(meaningItem);
+        }); 
+        return meaningList;
+    }
+
+
     function appendToDiv(createdDiv, content){
         var hostDiv = createdDiv.heading.getRootNode().host;
         var popupDiv = createdDiv.heading.getRootNode().querySelectorAll("div")[1];
 
         var heightBefore = popupDiv.clientHeight;
         createdDiv.heading.textContent = content.word;
-        createdDiv.meaning.textContent = content.meaning;
+        createdDiv.meaning.textContent = "";
+        createdDiv.meaning.appendChild(meaningArrayToParagraphList(content.meaningArray));
         createdDiv.moreInfo.textContent = "More »";
 
         var heightAfter = popupDiv.clientHeight;