Chrome Extension with lasting data (data storage)

Question

I´currently trying to get my first chrome extension running. It is a very simple application to learn some Javascript and manage some data. I already managed to get my simple extension running but the problem is if I close the extension or click somewhere else on the page the data in the extension is lost. So I guess the extension restarts every time you click on the icon. But I want the data to stay in my extension even if I switch to another page or close the HTML-window of the extension.

How can I manage that the data will be stored during the runtime of my extension ?

Here is the code of my application. At this point the button just adds 5 to the stake element to see if he value will be stored or not.

manifest.json

{
  "manifest_version": 2,

  "name": "Betting Extension",
  "description": "This extension will analyze your account history",
  "version": "1.0",

  "browser_action": {
   "default_icon": "icon.png",
   "default_popup": "popup.html"
  },
  "permissions": [
   "activeTab"
   ]
}

popup.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Tipico Analyzer</title>
        <script src="popup.js"></script>
        <link rel="stylesheet" href="Style.css">
    </head>

    <body style="width: 100px">
        <p>stake: <span id="stake">0</span>€</p>
        <p>profit: <span id="profit">0</span> €</p>
        <p>winning: <span id="winning">0</span> €</p>
        <button id="addPage">Add page</button>
    </body>
</html>

popup.js

document.addEventListener('DOMContentLoaded', function(){

    var checkPageButton = document.getElementById('addPage');
    checkPageButton.addEventListener('click', function(){

        d = document;
        var stake = parseFloat(d.getElementById('stake').innerHTML);


        document.getElementById('stake').innerHTML = stake + 5;

    }, false);


}, false);

score 2 · Accepted Answer · edited Nov 20 '19 at 20:04

2

There are three ways to store the data during the runtime of your extension.

Set a variable in background page: by setting "persistent": true in manifest.json, the background page will be running through the runtime of your extension.
Use chrome.storage: you can use this api to store, retrieve and track changes to the data. Data in chrome.storage is available even after restarts, but it will be lost if your extension is uninstalled.
```
chrome.storage.local.get([key], function (result) {
 var value = result[key];
});
chrome.storage.local.set({key: val});
```

Use localStorage

var value = localStorage.getItem(key);
localStorage.setItem(key, value);

edited Nov 20 '19 at 20:04

marc_s

732,580
175
1,330
1,459

answered Mar 04 '16 at 09:44

Haibara Ai

10,703
2
31
47

Of note: the pattern of assigning a `value` inside the `get()` is dangerous - it can [lead to errors](http://stackoverflow.com/questions/23667086/why-is-my-variable-unaltered-after-i-modify-it-inside-of-a-function-asynchron) if the fact that `chrome.storage` is asynchronous is not communicated. – Xan Mar 05 '16 at 09:03

Chrome Extension with lasting data (data storage)

1 Answers1