Verwendung von document.getElementById ("Tabellenname"). Rows.length; in einer Firefox Addon SDK Erweiterung

Question

Ich versuche eine einfache Firefox-Erweiterung für duolingo.com zu erstellen, so dass ich die Gesamtzahl der Wörter sehen kann, die ich für eine Sprache abgeschlossen habe. Die Liste der Wörter, die eine Person vervollständigt, wird unter https://www.duolingo.com/words angezeigt. Die Wörter befinden sich in einer HTML-Tabelle mit dem Klassennamen 'vocab-list'. Jede Zeile in dieser Tabelle enthält ein neues Wort. Ich versuche also, alle Zeilen in dieser Tabelle zu zählen.

Ich habe einige Tutorials zum Erstellen von Firefox-Erweiterungen angeschaut, aber ich kann nicht genau verstehen, wie JavaScript-Code verwendet werden kann, um das DOM zu manipulieren. Ich möchte in dem index.js, so etwas tun, aber es funktioniert nicht:

var buttons = require('sdk/ui/button/action'); 
var tabs = require("sdk/tabs"); 
const {Cc, Ci} = require("chrome"); 
var prompts = Cc["@mozilla.org/embedcomp/prompt-service;1"].getService(Ci.nsIPromptService); 
var button = buttons.ActionButton({ 
    id: "mozilla-link", 
    label: "Visit Mozilla", 
    icon: { 
    "16": "./icon-16.png", 
    "32": "./icon-32.png", 
    "64": "./icon-64.png" 
    }, 
    onClick: handleClick 
}); 

function handleClick(state) { 
tabs.open("https://www.duolingo.com/words"); 
var wordCount = document.getElementById("vocab-list").rows.length; 
var msg = "Total number of words completed:" + wordCount; 
prompts.alert(null, "Duolingo Word Counter Extension", msg); 
} 

Dies ist der Fehler, die ich bekomme:

JPM [info] Starting jpm run on Duolingo Word Counter 
JPM [info] Creating a new profile 
console.error: duolingo-addon: 
JPM [error] Message: ReferenceError: document is not defined 
    Stack: 
    handleClick@resource://gre/modules/commonjs/toolkit/loader.js -> resource://duolingo-addon/index.js:36:5 

Ich bin zu verstehen, nicht in der Lage, warum ich kann‘ t verwende JavaScript direkt und warum muss es innerhalb einer Variablen definiert werden. Danke für jede Hilfe.

UPDATE - HIER IST DER AKTUALISIERTE CODE AUF DEN KOMMENTAR

var buttons = require('sdk/ui/button/action'); 
    var tabs = require("sdk/tabs"); 
    var pageMod = require("sdk/page-mod"); 
    var data = require("sdk/self").data; 
    var button = buttons.ActionButton({ 
     id: "mozilla-link", 
     label: "Visit Mozilla", 
     icon: { 
     "16": "./icon-16.png", 
     "32": "./icon-32.png", 
     "64": "./icon-64.png" 
     }, 
     onClick: handleClick 
    }); 

function handleClick(state) { 
     pageMod.PageMod({ 
     include: "*.duolingo.com", 
     contentScriptFile: data.url("myScript.js"), 
     contentScriptWhen: "ready", 
     attachTo: ["existing", "top"] 
     }); 
} 

BASED Und die MyScript.js Datei:

var wordCount = document.getElementById("word-count").innerHTML; 
window.alert("Total number of words completed: " + wordCount); 

Wenn ich auf dem firefox Registerkarte jetzt, der Code ausgeführt werden und zeigt ein Popup mit der Gesamtzahl der Wörter an.

Answer 1

Die Funktion handleClick läuft innerhalb der Hintergrundseite der Erweiterung, sie wird nicht in duolingo eingefügt. Sie müssen pageMod verwenden:

var pageMod = require("sdk/page-mod"); 

pageMod.PageMod({ 
    include: "*.duolingo.com", 
    contentScriptFile: [ 
     data.url("myscript.js") 
    ], 
    contentScriptWhen: "ready", 
    attachTo: ["existing", "top"] 
}); 

myscript.js würde enthalten einen Code, der in die und auf dem DOM selbst arbeiten injiziert werden würde.

Answer 2

Da der Browser separate OS Prozesse für den Haupt-Browser/Add-on-Code und für die Web-Seite läuft, gibt es two types of scripts - Add-on und Content-Skripte.

Damit Ihr Code im Kontext einer Seite ausgeführt wird, müssen Sie in Ihrem Fall tab.attach() verwenden (es gibt andere APIs available für andere Szenarien). Vom Open a web page tutorial:

var tabs = require("sdk/tabs"); 
tabs.open({ 
    url: "http://www.example.com", 
    onReady: runScript 
}); 

function runScript(tab) { 
    tab.attach({ 
    contentScript: "document.body.style.border = '5px solid red';" 
    }); 
} 

können Sie andere Optionen von tab.attach() verwenden, um den Content-Skript zu steuern, zum Beispiel contentScriptFile verwenden, um eine separaten Datei zu definieren, die die Content-Skript als Zeichenfolge statt zu zeigen.