title: Manipulating Extension popup's DOM
body: <p>I'm new at working on chrome extension and i'm looking for guidance.</p>
  
  <p>At the moment, I'm trying to load data coming from an api call inside a dropdown menu within my extension's popup.</p>
  
  <p>While the data is coming through from the api, I can't access the popup DOM. I hear that I should use sendMessage but I can't find a proper explanation to why and how.</p>
  
  <p>Here is what I have:</p>
  
  <p>popup.html</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;link rel="stylesheet" type="text/css" href="style.css"&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div class="search_panel"&gt;
              &lt;div class="logos" id="head_b"&gt;
                  &lt;img src="chrome-extension://hfbigccdfoeegoicoioalffcngoekege/img/tedBtn.png" alt="" class="logo_explicite"&gt;
              &lt;/div&gt;
              &lt;p id="hep"&gt;p&lt;/p&gt;
              &lt;div class="form"&gt;
                  &lt;fieldset&gt;
                      &lt;label for="subject" class="subject_label"&gt;Sujets&lt;/label&gt;
                      &lt;select name="subject" id="subject" placeholder="Sélectionnez un sujet"&gt;
                          &lt;option value="" data-keywords="" data-desc="" selected&gt;select subjects&lt;/option&gt;
                          &lt;option value="Sujet 1" data-desc="bla blabla bla"&gt;subject 1&lt;/option&gt;
                          &lt;option value="Sujet 2" data-desc="bla blabla bla"&gt;subject 2&lt;/option&gt;
                      &lt;/select&gt;
                  &lt;/fieldset&gt;
              &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;script type="text/javascript" src="popup.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>popup.js</p>
  
  <pre><code>function load() {
    chrome.tabs.executeScript({
      file: 'load.js'
    }); 
  }
  
  load();
  </code></pre>
  
  <p>load.js</p>
  
  <pre><code>var xhr = new XMLHttpRequest();
  
      xhr.open("GET", "https://url/api/subject/list", false);
      xhr.send();
  
      var result = xhr.responseText;
      var obj = JSON.parse(result);
      console.log(obj); 
  
      var select = $('#subject');
      console.log(select); //undefined
  
  
  
      // for(index in obj) {
      //     select.options[select.options.length] = new Option(obj[index], index);
      // }
      console.log(rep);
  </code></pre>
  
  <p>manifest.json</p>
  
  <pre><code>{
  "name": "-",
  "description": "-",
  "version": "0.1",
  "permissions": [
      "tabs","&lt;all_urls&gt;",
      "https://url/*",
      "http://url/*"
      ],
  "browser_action": {
      "default_icon": "icon.png",
      "default_popup": "popup.html"
      },
  "web_accessible_resources": [
      "img/*.png",
      "reponses.json"
    ],
  "content_scripts": [
      {
      "css": [ "style.css"],
      "matches": [
          "http://twitter.com/*",
          "https://twitter.com/*"
          ],
      "js": ["jquery.min.js", "content.js"]
      }
  ],
  
  
  "background" : { "scripts": ["background.js", "popup.js"] },
  
  "manifest_version": 2
  }
  </code></pre>