title: Chrome extension: Modifying the content of a webpage
body: <p>I'm trying to make a simple Chrome Extension where I will 'block' the content of the website Reddit by replacing it with a short text. This is what I have so far:</p>
  
  <p><strong>manifest.json</strong></p>
  
  <pre><code>{
  "manifest_version": 2,
  
  "name": "BlockIt",
  "description": "Block Reddit, increase productivity!",
  "version": "1.0",
  
  "browser_action": {
    "default_icon": "icon.png",
    "default_title": "BlockIt"
  },
  
  "permissions": [
    "storage", "tabs",
    "http://www.reddit.com/*"
  ],
  
  "content_scripts": [
    {
      "matches": [ "*://reddit.com/*" ],
      "js": ["content-script.js"]
    }
  ] 
  }
  </code></pre>
  
  <p><strong>popup.html</strong></p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;style&gt;
        body {
          font-family: Verdana, Arial, Helvetica, Tahoma, sans-serif;
          background-color:#EFF7FF;
          margin: 5px 5px 5px 5px;
          width: 110px;
          height: 100%;
          text-align:center;
        }
      &lt;/style&gt;
      &lt;!--Scripts--&gt;
        &lt;script src="popup.js"&gt;&lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;h2&gt;BlockIt!&lt;/h2&gt;
      &lt;div id="en"&gt;&lt;label for="enable"&gt;Enable BlockIt&lt;/label&gt; &lt;input id="enable" type="checkbox" style="vertical-align:middle; position:relative; bottom: 1px;"/&gt;
      &lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>popup.js</strong></p>
  
  <pre><code>document.addEventListener('DOMContentLoaded', function () {
      document.querySelector('#enable').addEventListener('change', changeHandler);
  });
  
  function changeHandler() {
      if (enable.checked) {
          chrome.storage.sync.set({ 'enable': true }, function () { });
      }
  }
  </code></pre>
  
  <p><strong>content-script.js</strong></p>
  
  <pre><code>var content = document.getElementsByTagName("body");
  var text = "BlockIt enabled (to disable, click on the icon).";
  //TODO: replace content with text
  </code></pre>
  
  <p>I'm having two major issues right now: I'm not sure how I should go about in modifying the content of the webpage and replace it with the <code>text</code> above, and I'm not sure how to inject <code>content-script.js</code> when the checkbox in <code>popup.html</code> is checked. How do I go about in approaching this?</p>
  
  <p><strong>Edit</strong>: I've made the following change to my code:</p>
  
  <p><strong>content-script.js</strong></p>
  
  <pre><code>chrome.storage.sync.get({ enable: false }, items=&gt; {
      if (items.enable) {
          document.body.textContent = "BlockIt enabled (to disable, click on the icon).";
      }
  });
  </code></pre>
  
  <p>It successfully changes the body of the webpage, but the issue now is that the content of <code>popup.html</code> changes to the same text as well. What seems to be the problem?</p>
  
  <p><strong>Edit 2</strong>:
  I've removed <code>content-scrip.js</code> in <code>popup.html</code>. The state of the checkbox still doesn't persist. It seems like such a simple solution but I can't seem to fix it. Any help would be appreciated.</p>