无法读取 null 的属性 'insertRow'

Question

我正在创建一个 google chrome 扩展，其中我创建了一个 html table，其中包含草稿信息，并允许 table保存在 csv 文件中。我最初的目标是在他们每次访问新的 url.

时向 table 添加一个新行

我的 popup.js 文件的第一个功能是在每次访问新站点时添加 url 的 div 元素，但是我的目标是与 url 每次访问新站点时在 table 内。我有两个函数（addRow 和 addRowUsingJQuery）可以工作，但似乎都没有工作。

我的 javascript 函数一直给我一个错误。有谁知道可能是什么问题？

screenshot of error -- 我一直收到这个错误

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_popup": "popup.html"
        
     },
     "background": {
        "scripts": ["background.js"]
        
     },
     
     
     "permissions": ["tabs", "storage"]
    
    
    
    

}

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 onload="addRow()">

    <script src="popup.js" charset="utf-8"></script>
    
    <h2>Activity Logger</h2>
    
    
    <table id = "tableID" border="1">
        <thead>
        <!--Example table header row with the user, url visited, and time they visited the url etc-->
            <tr>
      <!--categories-->
                <th>Browser</th>
                <th>Timestamp</th>
                <th>URL</th>
                <th>Protocol</th> 
                <th>Downloaded File Names</th> 
                <th>Description</th>
      
            </tr>
        </thead>
        <tbody id= "tbodyID">
          <tr>
            <!--1st row-->
                <td>Google</td>
                <td>000000</td>
                <td>https://whosebug.com/questions/ask</td>
                <td>example</td>
                <td>example</td>
                <td>example</td>
            </tr>
            
        </tbody>
     <!--Goal is to append to this table-->
 

    </table>
   <!--when clicked it, ID uses function, exportTableToCSV to download file-->
<a id="click-this">
    <u> Save as CSV </u>
    </a>

</body>
</html>

popup.js

//loads 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)



// creates ID to export table to csv--works
document.addEventListener('DOMContentLoaded', function() {
  document.getElementById("click-this").addEventListener("click", exportTableToCSV);
 
    
});


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




//function to append row to HTML table --underwork--
function addRow() {
        //perhaps need an for loop for every page visited 
    
    const bg = chrome.extension.getBackgroundPage()    
    Object.keys(bg.bears).forEach(function (url) {
    
    //get html table
        // Append product to the table
    var table = document.getElementById("tbodyID");
    
    // add new empty row to the table
                  //1 = in the top 
                  //table.rows.length = the end
                  //table.rows.length/2+1 = the center 

            var newRow = table.insertRow(0);
                  
                  // add cells to the row
                  var nameCell = newRow.insertCell(0);
                  var urlCell = newRow.insertCell(1);
                  var timeCell = newRow.insertCell(2);
                  
                  // add the data to the cells
                  nameCell.innerHTML = name; 
                  urlCell.innerHTML = `${url}`; 
                  timeCell.innerHTML = time;
                  console.log("works");
     }) 
            }
addRow()
//console.log(addRowUsingJquery);

//perhaps add row using JQuery--underwork
/*function addRowUsingJquery() {
    // Get a reference to table
    let table = document.querySelector('#tableID');
    
    const add = chrome.extension.getBackgroundPage()
    Object.keys(add.bears).forEach(function (url) {
    
       
        
    // Build the row
        let template = `
                <tr>
                        <td>${USERNAME}</td>
                        <td>${`url`}</td>
                        <td>${TIMESTAMP}</td>
                </tr>`;

    // Add the row to the end of the table
        table.innerHTML += template; 
        console.log("works");
        
     })


}

 */                          

//function to for onClick function--works
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";
    downloadLink.setAttribute("download", "ChromeLog.csv");
    
    document.body.appendChild(downloadLink);
    
    
    downloadLink.click();
}

//function to export HTML table to csv file--works
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);
    
    
}

如果有人知道如何解决我的 addRow 函数为何不起作用以及如何正确编写函数的问题，我将不胜感激。

Answer 1

将您的脚本标签放在正文标签的最底部

无法读取 null 的属性 'insertRow'

Cannot read property 'insertRow' of null

javascript

url

html-table

append

google-chrome-extension

无法读取 null 的 属性 'insertRow'

Cannot read property 'insertRow' of null

javascript

url

html-table

append

google-chrome-extension

无法读取 null 的属性 'insertRow'