javascript - 如何使用 document.getElementById ("table-name").rows.length;在 Firefox Addon SDK 扩展中

Question

我正在尝试为 duolingo.com 创建一个简单的 Firefox 扩展，这样我就可以看到我为一种语言完成的单词总数。一个人完成的单词列表显示在 https://www.duolingo.com/words 上.这些词位于类名为“vocab-list”的 HTML 表格中。该表中的每一行都包含一个新词。所以我试图计算该表中所有行的数量。

我看过一些创建 Firefox 扩展的教程，但我无法准确理解如何使用 JavaScript 代码来操作 DOM。我想在 index.js 中做这样的事情，但它不起作用:

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

这是我得到的错误:

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

我无法理解为什么我不能直接使用 JavaScript，为什么必须在变量中定义它。感谢您的帮助。

更新 - 这是基于评论的更新代码

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

还有 myScript.js 文件:

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

当我现在单击 firefox 选项卡时，代码会运行并显示一个显示总字数的弹出窗口。

Answer 1

handleClick 函数在扩展程序的后台页面中运行，不会注入(inject)到 duolingo 中。您需要使用 pageMod:

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

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

myscript.js 将包含任何将被注入(inject)到 DOM 本身并对其进行操作的代码。