CODEWITHSUNDEEP
javascriptgoogle-chrome-extensionlocal-storage
user3529586
user3529586

Reputation: 21

Display informations storaged in localStorage in a chrome extension

I'm developping a chrome extension which have to display time spent on visited websites. I use localStorage for storage persistent informations (url and time spent).

For the time, I can't display url in my div "main-stat" (and not in console). Do you have an idea ? I surely forgot things and made mistakes... Here are my differents files.

My manifest.json

{
    "manifest_version": 2,
    "version": "0.1",
    "browser_action": {
        "default_popup": "popup.html"
    },
    "options_page": "/option/options.html",
    "background": {
        "scripts": ["background.js"],
        "persistent": true
    },
    "content_scripts": [{
        "matches": ["http://*/*", "https://*/*"],
        "js": ["contentscript.js"]
    }],
    "web_accessible_resources": ["contentscript.js"],
    "permissions": ["storage", "tabs", "http://*/*", "https://*/*"]
}

My popup.html

<!doctype html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="stylesheet.css">

    <script type="text/javascript" src="popup.js"></script>
    <script type="text/javascript" src="clear.js"></script> 
</head>
<body>
    <!--=============STATS ===========-->
    <div id="main-stats">

    </div>
    <!--=============Restart timer===========-->
    <div id="main-bouton">
            <div id="bouton1">
        <a href="popup.html" id ="bouton">Restart timer</a>

        </div>
    </div>                          
</body>
</html>

My contentscript.js

var lastPing = +new Date();

function ping() {
    chrome.runtime.sendMessage({
        domain: location.host,
        lastPing: lastPing
    }, function() {
        lastPing = +new Date();
        console.log('Ping send');
    });
}

setInterval(ping, 5000);

My background.js

chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
    var domain = request.domain;
    var lastPing = request.lastPing;
    var time_elapsed = localStorage.getItem(domain) || 0;
    localStorage.setItem(domain, time_elapsed + (+new Date() - lastPing));
});

My popup.js

for (var key in localStorage) {
  console.log(key, localStorage.getItem(key));
}

My clear.js

document.getElementById("bouton").addEventListener("click", function clear(){
  localStorage.clear();
  console.log("Stats have been restarted !");
}, false);

Any help would be greatly appreciated.

Upvotes: 0

Views: 228

Answers (2)

saadsaf
saadsaf

Reputation: 1451

The above code seems to be fine, except that you can't use JavaScript in an HTML page due to Chrome's Content Security Policy. According to it, inline JavaScript will not be executed.

Upvotes: 1

Xan
Xan

Reputation: 77591

Two Three points:

  1. You're using chrome.runtime.sendRequest, which is undefined. Apparently you implemented the non-edited version of this answer. The proper function would be chrome.runtime.sendMessage.

  2. For whatever reason, you're also loading your contentscript.js and background.js into the popup. They do not belong there.

  3. You should be mindful of where you put your scripts. Typically, scripts are put in the <head> tag (especially since you don't have page load speed issues in extensions), but if your code assumes that the DOM is already built, you either need to wrap it in something like jQuery's $(document).ready or put it at the end of your <body> tag.

Upvotes: 0

Related Questions