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

Question

Hello I am currently a create a google chrome extension with a start and stop button that logs every url that has been visited. My start/ stop button function algorithm is not working fully. The goal is When the start button is clicked I want it to continuously add a row to my html table(every time a url is visited)- which the addRow function basically does. And to not add any more rows when the stop button has been clicked.

Current code:

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>


 

Answer 1

Seems it could be long answer so I only answered with draft.

First will explain how to log after clicking start logging. With only popup.js it will not be easy to let js keep logging. There is a reason, which is page action(popup.js) is only alive when page window is activated. When clicking page action button(extension plugin button), then popup.js is started to activate. When the popup.html is closed then js is stoped. When web page is turned to other page then popup.html is closed. To keep logging content.js is needed.

content.js is executed on current tab on certain url. If url match condition is <all_url> on manifest.json then on every web page the js file is executed. If logging function is used then contents.js should get the function. addRow() should be in contents.js file. But start and stop button should be used then popup.js should send message by using runtime.sendMessage() . It's different to people, for me I send message to background from content.js as to if condition flag. Reference here :

https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/runtime/sendMessage

So on contents.js file addRow() needed to execute by runtime.onMessage . So when popup.js send message to contents.js with a flag then contents.js decides to start or stop logging. Like below:

on popup.html (start/stop) -> content.js(logging)

The codes I added below is only activating logging on popup.js. Some parts are edited.

Editted

• manifest.json: permission - storage(for chrome.storage ), activateTab(for current url), declarativeContent(for activating popup.html)
• background.js: declarativeContent is needed when activating clicking brower plugin icon. Storage logs are seen on background console.
• popup.js: storage.local.set is in Logger() . getBackgroundPage is changed to chrome.tabs for url(it access browser tabs from extension).
• popup.html: script tag for loading popup.js.

 //manifest.json { "name": "stackTest", "version": "0.0.0.1", "permissions": ["storage", "activeTab", "declarativeContent", "https://*/*"], "content_scripts": [ { "matches": ["https://*/*"], "js": ["contents.js"] } ], "background": { "scripts": ["background.js"], "persistent": false }, "page_action": { "default_popup": "popup.html" }, "description": "this is test.", "manifest_version": 2 } //background.js chrome.runtime.onInstalled.addListener(() => { //declarativeContent is needed when popup should be opened chrome.declarativeContent.onPageChanged.removeRules(undefined, () => { chrome.declarativeContent.onPageChanged.addRules([{ conditions: [new chrome.declarativeContent.PageStateMatcher({ }) ], actions: [new chrome.declarativeContent.ShowPageAction()] }]) }); }); //load key which is logged at popup.js chrome.storage.local.get(['key'], function(result) { console.log('value currently is ' + result.key); }); //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) let logger ='' if (isLogging){ btnStart.style.display= "block"; btnStop.style.display= "none"; logger = 'logging' } else { btnStart.style.display= "none"; btnStop.style.display= "block"; logger = 'not logging' } chrome.storage.local.set({key: logger}, function() { console.log('value is set to ' + logger); }) } 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() { const bg = chrome.extension.getBackgroundPage() console.log(bg) // Used tabs.query for getBackgroundPage // url is got from tabs.query // Object.keys(bg.get).forEach(function (url) { chrome.tabs.query({active: true, currentWindow: true}, (tabs) => { let url = tabs[0].url; //get html table // Append product to the table var table = document.getElementById("tbodyID"); console.log('heelo') 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"); }) }

 <!--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> <script src='./popup.js'> //To execute popup.js </script>