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

【问题标题】：Issue With Content Script in Simple Chrome Extension简单 Chrome 扩展中的内容脚本问题
【发布时间】：2016-03-31 00:29:36
【问题描述】：

我真的是编程新手，有一个简单的问题。

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

问题是内容脚本似乎没有运行。每当滚动事件发生并且没有发生时，我添加了一个 console.log 来记录。这是我的文件：

ScrollerJS（这是我的内容脚本）

var totalScroll;
var lastKnownScrollPos = 0;

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

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>

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"]
    }
    ],

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

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

如果我离基地很远，我将不胜感激任何帮助弄清楚为什么这不起作用。

【问题讨论】：

标签： javascript html google-chrome google-chrome-extension

【解决方案1】：

看看run_at，默认这个部分是document_idle，这意味着内容脚本是在window.onload事件触发后注入的，这意味着你无法捕捉到DOMContentLoaded事件实际上你没有'不要绑定你的事件监听器。

为了解决这个问题，我想提供两种方法

将"run_at": "document_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"
    ]
}

从DOMContentLoaded 事件监听器中提取你的，因为默认情况下，当你的内容脚本被注入时，DOMContentLoaded 事件被确保触发。

scroller.js

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

【讨论】：