在 chrome 扩展中显示存储在 localStorage 中的信息答案

【问题标题】：Display informations storaged in localStorage in a chrome extension在 chrome 扩展中显示存储在 localStorage 中的信息
【发布时间】：2014-04-27 23:22:27
【问题描述】：

我正在开发一个 chrome 扩展程序，它必须显示在访问过的网站上花费的时间。我使用localStorage 存储持久信息（网址和花费的时间）。

目前，我无法在我的 div“main-stat”（而不是控制台）中显示 url。你有想法吗？我肯定忘记了事情并犯了错误...... 这是我的不同文件。

我的 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://*/*"]
}

我的 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>

我的 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);

我的背景.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));
});

我的 popup.js

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

我的 clear.js

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

任何帮助将不胜感激。

【问题讨论】：

您确定要在正确的控制台中查找结果吗？你在使用“检查弹出窗口”吗？
是的，我使用这个控制台..我有以下错误：“Uncaught TypeError: undefined is not a function ping” contentscript.js l4
为什么要在弹出窗口中加载contentscript.js 和background.js？
你将 clear.js 移到了头部，但是当它执行时 DOM 还没有准备好，document.getElementById 将会失败。您需要使用类似 jQuery 的 $(document).ready 或将该特定脚本移至文档末尾。
您还有问题吗，或者您的问题得到了解答？

标签： javascript google-chrome-extension local-storage

【解决方案1】：

上面的代码似乎没问题，只是你不能在 HTML 页面中使用 JavaScript，因为 Chrome 的Content Security Policy。据此，内联 JavaScript 不会被执行。

【讨论】：

谢谢，但我用外部 javascript 文件进行了测试，但没有结果。
那么消息传递可能有问题...你能粘贴你的最新代码吗？
我在没有内联 js 的情况下编辑了我的代码。我在我的 div 中调用我的脚本（popup.js 和 clear.js）..这是一个好方法吗？
@user3529586 最好在文件头部或接近文件末尾这样做。

【解决方案2】：

二三分：

您使用的是未定义的chrome.runtime.sendRequest。显然你实现了this answer 的非编辑版本。正确的函数是chrome.runtime.sendMessage。
无论出于何种原因，您还将contentscript.js 和background.js 加载到弹出窗口中。他们不属于那里。
您应该注意放置脚本的位置。通常，脚本放在<head> 标记中（特别是因为您在扩展中没有页面加载速度问题），但如果您的代码假定 DOM 已经构建，您需要将其包装在类似 jQuery 的 @ 987654327@ 或将其放在<body> 标签的末尾。

【讨论】：

OP 注意：如果您只是用最新版本反复编辑问题（带来更多错误），则很难维护答案