Problem mit Inhaltsskript in einfacher Chrome-Erweiterung

Ich bin wirklich neu im Programmieren und hatte eine kurze Frage.Problem mit Inhaltsskript in einfacher Chrome-Erweiterung

Ich schreibe eine einfache Chrome-Erweiterung, die alle scrollenden Benutzer protokolliert und die in Pixel gescrollte Entfernung addiert. Ich möchte es für jede Website verfolgen, speichern Sie es in chrome.storage.local und dann in meiner browser_action js Ich möchte diese Nummer abrufen und anzeigen.

Das Problem ist, dass das Inhaltsskript nicht ausgeführt wird. Ich habe ein console.log hinzugefügt, um jedes Mal zu protokollieren, wenn ein Scroll-Ereignis eintritt und das nicht auftritt. Hier sind meine Dateien:

ScrollerJS (Das ist mein conent Skript)

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

würde ich auf, herauszufinden, jede Hilfe zu schätzen wissen, warum dies nicht funktioniert/wenn ich Basis weg bin.

Quelle

2016-03-31 Sam P.

Werfen Sie einen Blick auf run_at, die standardmäßig in diesem Abschnitt document_idle ist, was bedeutet, der Content-Skript nach window.onload Ereignisse ausgelöst wird injiziert wird, es bedeutet, dass Sie nicht DOMContentLoaded Ereignis dann in der Tat fangen können Sie nicht Ihren Event-Listener gebunden haben.

Um dies zu lösen, würde Ich mag zwei Ansätze

hinzufügen "run_at": "document_start" zu Ihrem manifest.json, schaffen, die das Skript bedeutet, injiziert wird, bevor eine andere DOM aufgebaut ist.

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

Ihr von DOMContentLoaded Ereignis-Listener-Extrakt, da standardmäßig, wenn der Content-Skript injiziert wird, wird DOMContentLoaded Ereignis ausgelöst gewährleistet.

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

Quelle

2016-03-31 02:04:03

Problem mit Inhaltsskript in einfacher Chrome-Erweiterung

Antwort

Verwandte Themen