How to insert data in HTML table from javascript?

Question

I am creating an chrome extension that logs data. I have a draft html table and I finally figured out how to have it show up in a csv file. However I'm stuck trying to figure out the next steps to have data such as the url to show up in table. I have grabbed the url in my js file and I'm curious on how to insert it in the table.

popup.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>
        Activity Logger
    </title>
    <style>
    *{
        color:#2b2b2b;
        font-family: "Roboto Condensed";
     }
        table{ width:40%;}
        th{ text-align:left; color:#4679bd}
        tbody > tr:nth-of-type(even) { background-color:#daeaff;)
        button( cursor:pointer; margin-top:1rem;)
         
    </style>
</head>
<body>

    <!--<button> Log site </button>-->
    <script src="popup.js" charset="utf-8"></script>
    
    <h2>Activity Logger</h2>
    
    
    <table>
  <tr>
    <th>Timestamp</th>
    <th>Browser</th>
    <th>URL</th>
    <th>Url</th>
    <th>Protocol</th> 
    <th>Downloaded File Name</th> 
    <th>Description</th>
      
  </tr>
  <tr>
    <td>Google</td>
    <td>Google</td>
    <td>Google</td>
  </tr>
  <tr>
    <td>example</td>
    <td>example</td>
    <td>example</td>
  </tr>
  <tr>
    <td>example</td>
    <td>example</td>
    <td>example</td>
  </tr>

</table>
<a id="click-this" type= "button" onClick="exportTableToCSV('members.csv')">
    <u> Save as CSV </u>
    </a>

</body>
</html>

manifest.json

{
    //Required naming
    "name" : "Activity logger",
    "version": "1.0",
    "manifest_version": 2,
    "description": "This support includes the development of a  Chrome Browser Activity Logger.",
    
    "content_scripts": [
        {
            "matches": ["<all_urls>"],
            "js": ["content.js", "popup.js"]
        }
        
     ],
     
    
     "browser_action": {
        "default_icon": "act.png",
        "default_title": "Activity",
        "default_icon": "act.png",
        "default_popup": "popup.html"
        
     },
     "background": {
        "scripts": ["background.js"]
        
     },
     
     
     "permissions": ["tabs", "storage"]
    
    
    
    

}

content.js

const re = new RegExp('bear', 'gi')
const matches = document.documentElement.innerHTML.match(re) || []

chrome.runtime.sendMessage({
  url: window.location.href,
  count: matches.length
})

popup.js

//loading div element url on page
document.addEventListener('DOMContentLoaded', function () {

  const bg = chrome.extension.getBackgroundPage()
  Object.keys(bg.bears).forEach(function (url) {
    const div = document.createElement('div')
    div.textContent = `${url}`
    document.body.appendChild(div)
    
  })


}, false)

document.addEventListener('DOMContentLoaded', function() {
  document.getElementById("click-this").addEventListener("click", exportTableToCSV);
 
    
});


function downloadCSV(csv, filename) {
    var csvFile;
    var downloadLink;
    
    csvFile = new Blob([csv], {type:"text/csv"});
                       
                       
    downloadLink = document.createElement("a");
    downloadLink.download = filename;
    downloadLink.href = window.URL.createObjectURL(csvFile);
    downloadLink.style.display = "none";
    
    document.body.appendChild(downloadLink);
    
    downloadLink.click();
}
                          
function exportTableToCSV(filename) {
    var csv = [];
    var rows = document.querySelectorAll("table tr");
    
    for(var i = 0; i < rows.length; i++) {
        var row = [], cols = rows[i].querySelectorAll("td, th");
        for(var j=0; j < cols.length; j++)
            row.push(cols[j].innerText);
        
        csv.push(row.join(","));
    }   
       
   
    //download csv file
    downloadCSV(csv.join("\n"), filename);
    
    
}

background.js

window.bears = {}
chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
  window.bears[request.url] = request.count
})


//create items shown in html file
chrome.browserAction.onClicked.addListener(function (tab) {
  chrome.tabs.create({url: 'popup.html'})
})

It's really unclear what the problem so try to remove the unnecessary info and focus on the problem. Note that the popup has its own devtools where you can debug the code and see the errors - right-click inside the popup and click "inspect". Some problems I see: 1) remove `onClick=` from your html, [more info](/q/13591983/). 2) chrome.browserAction.onClicked does nothing because you have `default_popup` in manifest.json. 3) You can remove the entire background script and instead send a message from the popup to the content script to ask the value directly. 4) Two `default_icon` in manifest. — wOxxOm, Nov 01 '20 at 18:02

score 0 · Answer 1 · answered Nov 01 '20 at 18:21

In your HTML code, when you create your table, give it an id so that you can refer to it easily in your Javascript, e.g.

<table id='myLogTable'>
  ...
</table>

You can then get a reference to it in the Javascript, like dataTable = document.getElementById('myLogTable').

To add lines to the table, a quick and dirty method is to write extra HTML to the content of the table element:

dataTable.innerHTML += "<tr><td>Some</td><td>test</td><td>data</td></tr>"

A more robust method is to use methods like document.createElement() and Node.appendChild() to build a row of data and attach it to the table. This takes somewhat more code, but is less likely to break things if you do things like adding event listeners to elements of the table.

How to insert data in HTML table from javascript?

1 Answers1