title: How to inject a button to a webpage with Chrome Extension
body: <p>I'm using <a href="https://developer.chrome.com/extensions/content_scripts" rel="noreferrer"><code>content scripts</code></a> and I would like to inject a button to a webpage.</p>
  
  <p>This is my <code>manifest.json</code>:</p>
  
  <pre><code>{
    "manifest_version": 2,
    "name": "my extension",
    "browser_action": {
      "default_icon": "icon.png",
      "default_popup": "popup.html"
    },
    "permissions": [
      "activeTab"
    ],
    "content_scripts": [
        {
          "matches": ["http://127.0.0.1:8000/*"],
          "js": ["script.js"],
          "run_at": "document_end"
        }
    ]
  }
  </code></pre>
  
  <p>This is <code>popup.html</code>:</p>
  
  <pre><code>&lt;html&gt;
    &lt;body&gt;
      &lt;input type="button" id="button" style="display:none;"&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>And <code>script.js</code>:</p>
  
  <pre><code>document.body.style.backgroundColor = "yellow";
  var button = document.getElementById("button");
  button.style.visibility = "visible";
  </code></pre>
  
  <p>When going to <code>http://127.0.0.1:8000</code> I see the background changes to yellow, however it doesn't find button because it's not part of the webpage served by my local server. It shows this error:</p>
  
  <pre><code>Uncaught TypeError: Cannot read property 'style' of null
  </code></pre>
  
  <p>What should I do to inject a button on top of the content in <code>http://127.0.0.1:8000</code> (assuming I don't know its content)?</p>