如何让我的开始和停止按钮使用javascript工作？

您好，我目前是一个创建谷歌chrome扩展的人，它有一个开始和停止按钮，记录每个访问过的url。我的启动/停止按钮功能算法未完全工作。目标是，当单击开始按钮时，我希望它不断地向我的html表中添加一行（每次访问url时）——addRow函数基本上就是这样做的。并在单击停止按钮时不再添加任何行

当前代码：

popup.js

//Start and Stop buttons for logging
const btnStart = document.getElementById("click-start");
const btnStop = document.getElementById("click-stop");


//attempt to get start/stop logging buttons to work--underwork
function Logger(isLogging) {
    console.log(isLogging)
        
        if (isLogging){
        
        btnStart.style.display= "block";
        btnStop.style.display= "none";
        
        
        
    } else {
        
        btnStart.style.display= "none";
        btnStop.style.display= "block";
    }
}
addRow();

//button to start/stop logging
document.addEventListener("DOMContentLoaded", function () {
    btnStart.addEventListener("click", function() {Logger(true)}); 
    btnStop.addEventListener("click", function() {Logger(false)});
});


//using storage API to save data for last btn pressed--underwork
chrome.storage.local.set({key: Logger()}, function() {
    console.log('value is set to  ' + Logger());
});

chrome.storage.local.get(['key'], function(result) {
    console.log('value currently is ' + result.key);
});
    


//function to append row to HTML table 
function addRow() {
        //perhaps need an for loop for every page visited 
  
    
    const bg = chrome.extension.getBackgroundPage()    
    Object.keys(bg.get).forEach(function (url) {
    
    //get html table
        // Append product to the table
    var table = document.getElementById("tbodyID");
        
            
            var arr = url.split("/");
            var protocoll = arr[0] + "//" + arr[2];
        
            //inputed data --
            browser= "Google Chrome"; 
            protocol = protocoll;
            downloads = "example";
            description = "example";
            time = Date.now();

        
        //put dates in array and replace it and have var as myDate
    // add new 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);
            
            console.log(table.rows.length)
                  
                  // add cells to the row
                  var browserCell = newRow.insertCell(0);
                  var timeCell = newRow.insertCell(1);
                  var urlCell = newRow.insertCell(2);
                  var protocolCell = newRow.insertCell(3);
                  var downloadsCell = newRow.insertCell(4);
                  var descCell = newRow.insertCell(5);
                  
                  // add the data to the cells
                  
                  urlCell.innerHTML = `${url}`; 
                  timeCell.innerHTML = time;
                    browserCell.innerHTML = browser;
                    descCell.innerHTML = description;
                    protocolCell.innerHTML = protocol;
                    downloadsCell.innerHTML = downloads;
                  console.log("works");
     }) 
            }
 

popup.html

<!--Start button of logging-->
    <button class="button button1" id="click-start" >
    <u> Start Logging </u>
    </button>
    
    <!--Stop button of logging-->
    <button class="button button2" id="click-stop">
    <u> Stop Logging </u>
    </button>
    
    <table class="roundedCorners" 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">
           
         
            
        </tbody>
     <!--Goal is to append to this table-->
     
    
    </table>


 

开始记录
停止记录
浏览器
时间戳
统一资源定位地址
协议
下载的文件名
描述

似乎这可能是一个很长的答案，所以我只回答了草稿

首先将解释如何在单击“开始记录”后进行记录。只有popup.js，让js保持日志记录并不容易。这有一个原因，那就是页面操作（popup.js）只有在页面窗口被激活时才是活动的。单击页面操作按钮（扩展插件按钮）时，popup.js将开始激活。关闭popup.html后，js停止。当网页转到其他页面时，popup.html关闭。要保持日志记录，需要使用content.js

content.js在特定url的当前选项卡上执行。如果url匹配条件为

因此，在contents.js文件

addRow（）

上，运行时.onMessage需要执行。因此，当popup.js向contents.js发送带有标志的消息时，contents.js决定启动或停止日志记录。如下图所示：

在

popup.html

（开始/停止）->content.js（日志记录）

我在下面添加的代码只是激活popup.js上的日志记录。某些部分已编辑

编辑

• manifest.json:permission-storage（用于

  chrome.storage

  ），activateTab（用于当前url），declarativeContent（用于激活popup.html）
• background.js:declarativeContent在激活点击浏览器插件图标时是必需的。在后台控制台上可以看到存储日志
• popup.js:

  storage.local.set

  位于

  Logger（）

  中<代码>getBackgroundPage更改为url的

  chrome.tabs

  （它从扩展名访问浏览器选项卡）
• popup.html：用于加载popup.js的脚本标记

//manifest.json
{
“名称”：“stackTest”，
“版本”：“0.0.0.1”，
“权限”：[“存储”、“activeTab”、“declarativeContent”、“https://*/*”]，
“内容脚本”：[
{
“匹配项”：[“https://*/*”]，
“js”：[“contents.js”]
}
],
“背景”：{
“脚本”：[“background.js”]，
“持续”：假
},
“页面操作”：{
“默认弹出窗口”：“popup.html”
},
“说明”：“这是测试。”，
“清单版本”：2
}
//background.js
chrome.runtime.onInstalled.addListener（（）=>{
//应打开弹出窗口时需要declarativeContent
chrome.declarativeContent.onPageChanged.removeRules（未定义，（）=>{
chrome.declarativeContent.onPageChanged.addRules([{
条件：[新建chrome.declarativeContent.PageStateMatcher]({
})
],
操作：[新建chrome.declarativeContent.ShowPageAction（）]
}])
});
});
//加载记录在popup.js上的密钥
chrome.storage.local.get（['key']，函数（结果）{
log（'当前值为'+result.key'）；
});
//popup.js
//用于日志记录的启动和停止按钮
const btnStart=document.getElementById（“单击开始”）；
const btnStop=document.getElementById（“单击停止”）；
//尝试使开始/停止日志记录按钮工作--工作不足
功能记录器（isLogging）{
console.log（isLogging）
让记录器=“”
如果（isLogging）{
btnStart.style.display=“block”；
btnStop.style.display=“无”；
记录器='logging'
}否则{
btnStart.style.display=“无”；
btnStop.style.display=“block”；
记录器='不记录'
}
chrome.storage.local.set（{key:logger}，function（））{
console.log（'值设置为'+记录器）；
})
}
addRow（）；
//启动/停止日志记录的按钮
document.addEventListener（“DOMContentLoaded”，函数（）{
addEventListener（“单击”，函数（）{Logger（true）}）；
addEventListener（“单击”，函数（）{Logger（false）}）；
});
//使用存储API保存上一次按下的btn的数据--underwork
chrome.storage.local.set（{key:Logger（）}，function（））{
log（'值设置为'+Logger（））；
});
chrome.storage.local.get（['key']，函数（结果）{
log（'当前值为'+result.key'）；
});
//函数将行追加到HTML表中
函数addRow（）{
const bg=chrome.extension.getBackgroundPage（）
控制台日志（bg）
//用于getBackgroundPage的tabs.query
//url是从tabs.query获取的
//Object.keys（bg.get）.forEach（函数（url）{
chrome.tabs.query（{active:true，currentWindow:true}，（tabs）=>{
设url=tabs[0].url；
//获取html表
//将产品追加到表中
var table=document.getElementById（“tbodyID”）；
console.log（'heelo'）
var arr=url.split（“/”）；
var protocoll=arr[0]+“/”+arr[2]；
//输入数据--
browser=“谷歌浏览器”；
协议=协议；
下载=“示例”；
description=“示例”；
时间=日期。现在（）；
//将日期放入数组并替换它，并将var作为myDate
//向表中添加新行
//1=在顶部
//table.rows.length=结束
//table.rows.length/2+1=中心
弗吉尼亚州