在 chrome 扩展中使用 jquery 填写表单时出错？

Question

我正在尝试在 chrome 扩展内的网页中使用 jquery 填写表单。这是我的代码： (new.js)

chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab){ 
 y=tab.url;
         $.get(y, function(data)    //function for parsing the webpage
    {
                          //console.log(data);
                          $(data).find('input').each(function() {
                              //alert("inside");
                              if($(this).attr('id')=="email") {     
                                  alert($(this).attr('id'));
                                  $("#email").val("xxx");
                              } //console.log($(this).text());

                          });
                      });
});

而且网页有很多表格，我想将值填充到一个输入，其 id id 电子邮件。这是网页的 html 代码：

<form id="login_form" action="https://www.facebook.com/login.php?login_attempt=1" method="post" onsubmit="return window.Event &amp;&amp; Event.__inlineSubmit &amp;&amp; Event.__inlineSubmit(this,event)">
  <input type="hidden" name="lsd" value="AVq0D9ew" autocomplete="off" />
  <table cellspacing="0">
    <tr>
      <td class="html7magic">
        <label for="email">Email or Phone</label>
      </td>
      <td class="html7magic">
        <label for="pass">Password</label>
      </td>
    </tr>
    <tr>
      <td>
        <input type="text" class="inputtext" name="email" id="email" value="" tabindex="1" />
      </td>
      <td>
        <input type="password" class="inputtext" name="pass" id="pass" tabindex="2" />
      </td>
      <td>
        <label class="uiButton uiButtonConfirm" id="loginbutton" for="u_0_l">
          <input value="Log In" tabindex="4" type="submit" id="u_0_l" /></label>
      </td>
    </tr>
    <tr>
      <td class="login_form_label_field">
        <div>
          <div class="uiInputLabel clearfix uiInputLabelLegacy">
            <input id="persist_box" type="checkbox" name="persistent" value="1" checked="1" class="uiInputLabelInput uiInputLabelCheckbox" />
            <label for="persist_box" class="uiInputLabelLabel">Keep me logged in</label>
          </div>
          <input type="hidden" name="default_persistent" value="1" />
        </div>
      </td><td class="login_form_label_field">
        <a rel="nofollow" href="https://www.facebook.com/recover/initiate">Forgot your password?</a>
      </td>
    </tr>
  </table>
  <input type="hidden" autocomplete="off" name="timezone" value="" id="u_0_m" />
  <input type="hidden" name="lgnrnd" value="225331_eElR" />
  <input type="hidden" id="lgnjs" name="lgnjs" value="n" />
  <input type="hidden" autocomplete="off" id="locale" name="locale" value="en_US" />
</form>

P.S.我对 jquery 没有太多经验，如果这个问题不符合 SO 的标准，请原谅我。

这是我的清单文件：

"name": "password",
 "description": "password",
 "version": "0.1",
 "background": {"scripts": ["jquery-1.11.1.js","new.js"], "persistent": false},
 "options_page": "options.html",
 "permissions": ["downloads","tabs","activeTab","history","http://*/", 
        "https://*/","http://ieeexplore.ieee.org/xpl/articleDetails.jsp?arnumber=6645369"],
"content_scripts": [
    {
      "matches": ["http://*/", "https://*/" ],

      "js": ["new.js"]
    }
  ],
 "manifest_version": 2}

Answer 1

如何将您的代码简化为：

 //function for parsing the webpage
$.get(y, function(data)                                                
{
    $("#email").val("xxx");
});

Answer 2

$("#email").val("xxx");

应该够了

Demo

Answer 3

我怀疑这是你想要的：

$.get(y, function(data) {
    var value = $(data).find("#email").text();
    $("#email").val(value);
});

Answer 4

尝试直接定位到指定元素，本例为#email，

$("#email").val("xxx");