Question

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

当时，我无法在我的div＆＃34; main-stat＆＃34;中显示网址。（而不是在控制台中）。你有好主意吗？我肯定忘记了事情并犯了错误...... 这是我的不同文件。

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

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

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

非常感谢任何帮助。

Answer 1

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

Answer 2

两个三点：

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

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

2 个答案: