Javascript 简单Chrome扩展中的内容脚本问题_Javascript_Html_Google Chrome_Google Chrome Extension

Javascript 简单Chrome扩展中的内容脚本问题

javascript html google-chrome google-chrome-extension

Javascript 简单Chrome扩展中的内容脚本问题,javascript,html,google-chrome,google-chrome-extension,Javascript,Html,Google Chrome,Google Chrome Extension,我对编程非常陌生，有一个很快的问题我正在编写一个简单的Chrome扩展，它记录所有用户的滚动，并以像素为单位计算滚动的距离。我想跟踪每个网站的数字，将其保存到chrome.storage.local，然后在我的浏览器中检索并显示该数字问题是内容脚本似乎没有运行。每当滚动事件发生而没有发生时，我就在日志中添加一个console.log。这是我的档案： ScrollerJS（这是我的conent脚本） Popup.JS document.addEventListener("DOMContentL

我对编程非常陌生，有一个很快的问题

我正在编写一个简单的Chrome扩展，它记录所有用户的滚动，并以像素为单位计算滚动的距离。我想跟踪每个网站的数字，将其保存到chrome.storage.local，然后在我的浏览器中检索并显示该数字

问题是内容脚本似乎没有运行。每当滚动事件发生而没有发生时，我就在日志中添加一个console.log。这是我的档案：

ScrollerJS（这是我的conent脚本）

Popup.JS

document.addEventListener("DOMContentLoaded", function(event) {
  chrome.storage.local.get("count", function(data) {
  console.log(data)
  document.getElementById("#miles-scrolled").textContent = data.count;
});
})

Popup.HTML

<!doctype html>
<html>
  <head>
    <title>Scroller</title>
    <style>
      body {
        font-family: "Segoe UI", "Lucida Grande", Tahoma, sans-serif;
        font-size: 100%;
        height:300px;
        width: 300px;
      }
      #status {
        /* avoid an excessively wide status text */
        white-space: pre;
        text-overflow: ellipsis;
        overflow: hidden;
        max-width: 300px;
      }
    </style>
    <script src="popup.js"></script>
  </head>
  <body>
    <div id="status">You've scrolled this many miles:</div>
    <div id="miles-scrolled"</div>
  </body>
</html>


卷轴
身体{
字体系列：“Segoe UI”，“Lucida Grande”，Tahoma，无衬线；
字体大小：100%；
高度：300px；
宽度：300px；
}
#地位{
/*避免状态文本过宽*/
空白：预处理；
文本溢出：省略号；
溢出：隐藏；
最大宽度：300px；
}
您已经滚动了这么多英里：
请看，默认情况下，此部分是document\u idle
，这意味着内容脚本在窗口之后被注入。onload
事件触发，这意味着您无法捕获DOMContentLoaded
事件，而事实上您没有绑定事件侦听器
为了解决这个问题，我想提供两种方法
将“run\u at”：“document\u start”
添加到您的manifest.json
，这意味着您的脚本在构建任何其他DOM之前被注入
manifest.json
{
    "manifest_version": 2,
    "name": "Scroll by the Mile",
    "description": "Measures distance scrolled in miles",
    "version": "1.0",
    "content_scripts": [
        {
            "matches": [
                "<all_urls>"
            ],
            "js": [
                "scroller.js"
            ],
            "run_at": "document_start"
        }
    ],
    "browser_action": {
        "default_icon":"icon.png",
        "default_title": "Scroll by the Mile",
        "default_popup": "popup.html"
    },
    "permissions": [
        "activeTab",
        "<all_urls>",
        "storage"
    ]
} 


{
"manifest_version":2,

"name":"Scroll by the Mile",
"description":"Measures distance scrolled in miles",
"version":"1.0",

"content_scripts":[
    {
        "matches": ["<all_urls>"],
        "js": ["scroller.js"]
    }
    ],

"browser_action": {
    "default_icon":"icon.png",
    "default_title":"Scroll by the Mile",
    "default_popup":"popup.html"
},

"permissions":[
  "activeTab",
  "<all_urls>",
  "storage"
]
}

{
    "manifest_version": 2,
    "name": "Scroll by the Mile",
    "description": "Measures distance scrolled in miles",
    "version": "1.0",
    "content_scripts": [
        {
            "matches": [
                "<all_urls>"
            ],
            "js": [
                "scroller.js"
            ],
            "run_at": "document_start"
        }
    ],
    "browser_action": {
        "default_icon":"icon.png",
        "default_title": "Scroll by the Mile",
        "default_popup": "popup.html"
    },
    "permissions": [
        "activeTab",
        "<all_urls>",
        "storage"
    ]
} 

var totalScroll;
var lastKnownScrollPos = 0;

window.addEventListener("scroll", function() {
    console.log(lastKnownScrollPos);
    totalScroll += Math.abs(window.scrollY - lastKnownScrollPos);
    lastKnownScrollPos = window.scrollY;
    chrome.storage.local.set({ scroll: totalScroll });
});