update get shareable link

getshareablelink.js

@@ -0,0 +1,66 @@
+let submissionID = "";
+
+function displayLink(id) {
+    const shareLink = document.querySelector("#shareLink");
+
+    if (id == null || id[0] == null) {
+        shareLink.value = 'No content';
+    } else {
+        submissionID = id[0].substring(0, id[0].indexOf("~"));
+        chrome.tabs.query({ active: true, currentWindow: true }, async function (
+            tabs
+        ) {
+            const tab = tabs[0];
+            let fromIndex = 0;
+            let countSlash = 0;
+            while (tab.url.indexOf("/", fromIndex) != -1) {
+                fromIndex = tab.url.indexOf("/", fromIndex + 1);
+                countSlash++;
+                if (countSlash >= 8) break;
+            }
+            shareLink.value = tab.url.substring(0, fromIndex) + "/review/" + submissionID;
+        });
+    }
+}
+
+chrome.tabs.query({ active: true }, async function (tabs) {
+    const tab = tabs[0];
+    if (tab.url.includes('coursera.org')) {
+        const id = await new Promise((resolve) => {
+            chrome.tabs.executeScript(
+                tab.id,
+                {
+                    code: 'document.getElementsByClassName("_10nd10j")[0].id',
+                },
+                resolve
+            );
+        });
+
+        displayLink(id);
+    }
+});
+
+window.onload = function () {
+    "use strict";
+
+    const shareLink = document.getElementById("shareLink");
+    const copyButton = document.getElementById("copyButton");
+
+    function copyToClipboard(elem) {
+        const target = elem;
+        target.select();
+        let succeed = false;
+        try {
+            succeed = document.execCommand("copy");
+        } catch (e) {
+            console.warn(e);
+        }
+        return succeed;
+    }
+
+    function copyShareLinkToClipboard() {
+        copyToClipboard(shareLink);
+    }
+
+    copyButton.addEventListener("click", copyShareLinkToClipboard);
+};

popup.css

@@ -135,4 +135,37 @@ a {
     color: #000000;
     background: #fefefe;
     border-color: #000000;
+}
+
+#copyButton {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: #fafafa;
+    color: grey;
+    border: 1px solid linear-gradient(153deg, rgb(116, 56, 216), rgb(18, 150, 170) 74%);
+    width: 40px;
+    border-radius: 5px 0 0 5px;
+    text-decoration: none;
+    cursor: pointer;
+    font: small Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace;
+}
+
+#copyButton:hover {
+    color: #fff;
+    background: linear-gradient(153deg, rgb(116, 56, 216), rgb(18, 150, 170) 74%);
+}
+
+#shareLink {
+    font-size: 15px;
+    height: 40px;
+    border-radius: 0 5px 5px 0;
+}
+
+.my-header{
+    padding: 0.25rem;
+    margin-bottom: .5em;
+    background: linear-gradient(153deg, rgb(116, 56, 216), rgb(18, 150, 170) 74%);
+    border-radius: 5px;
+    font-weight: bold;
 }

popup.html

@@ -20,14 +20,21 @@
                 <div class="title">COURSERA ASSISTANT</div>
             </header>
             <main class="main">
-                <div class="align-items-center d-flex justify-content-center">
-                    <button class="code mr-2" id="scanButton"><i class="fa fa-search mr-2"></i>SCAN QUESTION</button>
+                <div class="my-header">Get Shareable Link</div>
+                <div class="mb-2">
+                    <div class="input-group">
+                        <span id="copyButton" title="Copy to clipboard"><i class="fa fa-clipboard"></i></span>
+                        <input type="text" id="shareLink" class="form-control" value="No content">
+                    </div>
+                </div>
+                <div class="my-header">Get Question</div>
+                <div class="align-items-center d-flex justify-content-between mb-2">
+                    <button class="code" id="scanButton"><i class="fa fa-search mr-2"></i>SCAN QUESTION</button>
                     <button class="code" id="saveButton"><i class="fa fa-save mr-2"></i>SAVE QUIZ</button>
                 </div>
-                <div class="align-items-center d-flex justify-content-center mt-2">
+                <div class="align-items-center d-flex justify-content-center">
                     <button class="code" id="autoButton"><i class="fa fa-bolt mr-2"></i>AUTO GRADE</button>
                 </div>
-
             </main>
             <footer class="footer">
                 <div class="rounded-social-buttons">
@@ -40,6 +47,7 @@
         </div>
     </div>
     <script src="popup.js"></script>
+    <script src="getshareablelink.js"></script>
 </body>
 
 </html>