内容脚本的 document.getElementById() returns 为空？

Question

处理一个包含多个页面的插件，我在其中调用内容脚本和插件中相应的 HTML 页面 script.When 我尝试获取文本框的值在 HTML 页面中，为什么我得到 null。

HTML:

<html>
    <head>
        <title>
            Dummy Page 
        </title>
    </head>
    <body>
        <input type="text" class="login-field" placeholder="username" id="usermail" value="heelo">
        <label class="login-field-icon fui-user" for="login-name"></label>
        <input type="password" class="login-field" placeholder="password" id="password" value="heells">
        <label class="login-field-icon fui-lock" for="login-pass"></label>
    </body>
</html>

ContentJS

self.port.on("get-first-para", getFirstPara);

function getFirstPara() {
    var userId = document.getElementById("usermail").value;
    var pass = document.getElementById("password").value;
    if (userId.length > 0 && pass.length > 0) {
        var firstPara = userId + " ** " + pass;
        self.port.emit("first-para", firstPara);
    }
}

插件 Js

var data = require("sdk/self").data;
var pageWorkers = require("sdk/page-worker");
var self = require("sdk/self");
require("sdk/ui/button/action").ActionButton({
    id: "Mailer",
    label: "Click to start",
    icon: {
        "16": "./icon-16.png",
        "32": "./icon-32.png",
        "64": "./icon-64.png"
    },
    onClick: handleClick
});
var textChk = require("sdk/panel").Panel({
    position: {
        top: 0,
        right: 0
    },
    hight: 100,
    contentURL: data.url("textChk.html"),
    contentScriptFile: data.url("content.js")
});
function handleClick() {
    textChk.show();
    pageWorker = require("sdk/page-worker").Page({
      contentScriptFile: self.data.url("content.js")
    });
    pageWorker.port.on("first-para", function(firstPara) {
      console.log(firstPara);
    });
    pageWorker.port.emit("get-first-para");
}

需要知道如何摆脱空错误？

Answer 1

您正在向 pageWorker 发送 "get-first-para" - 在您的代码页中，Worker 没有内容，但具有 SAME 脚本作为面板 (textChk) ... 另一方面，textChk 有 (html) 内容和相同content.js - 你可能是想做以下事情吗？

function handleClick() {
    textChk.show();
    textChk.port.on("first-para", function(firstPara) {
      console.log(firstPara);
    });
    textChk.port.emit("get-first-para");
}

内容脚本的 document.getElementById() returns 为空？

Content script's document.getElementById() returns null?

html

javascript

firefox-addon

firefox-addon-sdk