Chrome-Extension, How to Edit Pop-Up window, not web-page

Question

Basically, How do I modify/change the content inside the extension's pop-up rather than the web-page that is being browsed by the user.

AND , MAke the dropdownlist work! I have 2 dropdownlist if first one is selected, sent to server and retrieve data then update 2nd one

I tried using $("body").append('tasddadasdsssdet');

But it ended up modifying the web=page's html instead of my chrome extension's html.

How do I detect for changes from first dropdown list so i can upadte the 2nd dropdown list accordingly. It seems to be working fine normally but when it comes to chrome it wont work.

This is it's Fiddle

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

I have uploaded the extension to 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'

{
  "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"]
    }
  ]

}

Login Extension

$("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

Here's the problem:

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

A content_script is run in the context of the web page, not your pop up window.

I'm guessing that this login.js script overrides the pop-up's.

So if you get rid of this section, it should work.

Chrome-Extension, How to Edit Pop-Up window, not web-page

Question

1 answers

solution1
0 2015-01-03 17:01:36

Chrome-Extension, How to Edit Pop-Up window, not web-page

Question

1 answers

solution1 0 2015-01-03 17:01:36

solution1
0 2015-01-03 17:01:36