Chrome 扩展，如何编辑弹出窗口，而不是网页答案

【问题标题】：Chrome-Extension, How to Edit Pop-Up window, not web-pageChrome 扩展，如何编辑弹出窗口，而不是网页
【发布时间】：2015-01-04 01:12:07
【问题描述】：

基本上，我如何修改/更改扩展程序弹出窗口中的内容，而不是用户正在浏览的网页。

并且，使下拉列表工作！如果第一个被选中，我有 2 个下拉列表，发送到服务器并检索数据然后更新第二个

我尝试使用$("body").append('tasddadasdsssdet');

但它最终修改了 web=page 的 html，而不是我的 chrome 扩展程序的 html。

如何检测第一个下拉列表中的更改，以便我可以相应地更新第二个下拉列表。它似乎可以正常工作，但是当涉及到 chrome 时，它就无法正常工作。

这就是小提琴

http://jsfiddle.net/g3Yqq/2/

我已将扩展上传到https://www.mediafire.com/?3yske787di87780

HTML

<!doctype html>
<html style="width: 270px;">
    <head >
        <title>BCA Auto Login</title>
        <script src="jquery.js"></script>
        <script type="text/javascript" src="login.js"></script>
    </head>
    <body>

<select id="select1">
    <option value="">Select sth</option>
    <option value="1">1st option</option>
    <option value="2">2nd option</option>
    <option value="3">3rd option</option>
</select>

<select id="select2">
    <option value="">Select from select1 first</option>
</select>
    </body>
</html>

清单'

{
  "manifest_version": 2,

  "name": "Admin Extension",
  "description": "Personal Extension",
  "version": "1.0",

  "permissions": [
    "unlimitedStorage",
    "activeTab",
    "background",
    "tabs",
    "storage",
    "webRequest",
    "webNavigation"
  ],
  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  },
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["jquery.js","login.js"]
    }
  ]

}

登录扩展

$("body").append('tasddadasdsssdet');
alert('test');
$('#select1').change(createSelect2);
$('#select2').change(selectSelect2);

function createSelect2(){
    var option = $(this).find(':selected').val(),
    dataString = "option="+option;
    if(option != '')
    {
        $.ajax({
            type     : 'GET',
            url      : 'http://www.mitilini-trans.gr/demo/test.php',
            data     : dataString,
            dataType : 'JSON',
            cache: false,
            success  : function(data) {          
                var output = '<option value="">Select Sth</option>';            
                $.each(data.data, function(i,s){
                    var newOption = s;

                    output += '<option value="' + newOption + '">' + newOption + '</option>';
                });            
                $('#select2').empty().append(output);
            },
            error: function(){
                console.log("Ajax failed");
            }
        }); 
    }
    else
    {
        console.log("You have to select at least sth");
    }
}

function selectSelect2(){

    var option = $(this).find(':selected').val();
    if(option != '')
    {
        alert("You selected: "+option);
    }
    else
    {
        alert("You have to select at least sth");
    }
}

【问题讨论】：

您的意思是要编辑弹出窗口吗？
我认为您不需要所有这些代码。
@theonlygusti 我只是想让 Chrome 扩展程序正常工作。选择一个下拉列表的选项，将数据发送到服务器，检索和更新第二个下拉列表

标签： javascript jquery html google-chrome google-chrome-extension

【解决方案1】：

问题来了：

"content_scripts": [
  {
    "matches": ["<all_urls>"],
    "js": ["jquery.js","login.js"]
  }
]

content_script 在网页的上下文中运行，而不是在您的弹出窗口中。

我猜这个login.js 脚本会覆盖弹出窗口的。

所以如果你去掉这部分，它应该可以工作。

【讨论】：

好的，Login.js 是我需要在第一次单击时检索数据以更新第二个下拉列表的代码。需要jquery吗？我想在 javascript 中使用 .change ？
我找到了解决方案，显然我必须将 .change 放在 document.ready 中
@CodeGuru 您应该将其作为答案发布：)