Question

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

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

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

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

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

这是小提琴

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>

清单＆＃39;

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

Answer 1

问题在于：

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

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

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

所以，如果你摆脱这一部分，它应该有效。

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

1 个答案: