如何使用 document.getElementById("table-name").rows.length;在 Firefox 插件 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

因为浏览器为主浏览器/插件代码和网页运行单独的操作系统进程，所以有two types of scripts - 插件和内容脚本。

要让您的代码在页面上下文中运行，您必须在您的情况下使用tab.attach()（对于其他情况还有其他APIs available）。来自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';"
  });
}

您可以使用tab.attach() 的其他选项来控制内容脚本，例如使用contentScriptFile 指向单独的文件，而不是将内容脚本定义为字符串。

Answer 2

handleClick 函数在扩展的后台页面中运行，它没有被注入到 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 将包含任何将被注入到 DOM 本身并对其进行操作的代码。