title: I was a bad boy: Firefox addon to edit body of post request (which I am doing manually atm)
body: <p>I need to intercept POST request, change a parameter and let it continue in Mozilla addon.</p>
  
  <p>Background:<br>
  I am part of the comment section of example.org. That site had an option in profile to allow to show 10, 25, 50, 100 and 500 comments per page. A week ago, in order to save bandwidth, they removed that option and locked the users to 50 comments per page or less.</p>
  
  <p>I was a naughty boy and researched a bit. </p>
  
  <p>There is <a href="https://example.org/api.html?GET_COMMENTS" rel="nofollow noreferrer">https://example.org/api.html?GET_COMMENTS</a> post method. </p>
  
  <p>As part of a JSON object in the body  of request, it takes preferred_count parameter. The object looks something like this</p>
  
  <blockquote>
    <p>{ userid: 1234567, </p>
    
    <p>postId: 56789,</p>
    
    <p>preferred_count: 50,</p>
    
    <p>location_parameters:[] etc}</p>
  </blockquote>
  
  <p>My research lead me to a discovery that if I change preferred_count to 500 in the request body in Firefox developer tools then resend the request I will get full 500 comments on that post as a response! Neat. But it sucks to be doing it constantly. So I tried to develop a firefox addon to do it for me. </p>
  
  <p>My manifest.json looks like this:</p>
  
  <blockquote>
    <p>{</p>
  
  <pre><code>"description": "Makes example comments.cool.",
  "manifest_version": 2,
  "name": "examplecomments",
  "version": "1.0",
  "permissions": [
      "webRequest",
      "webRequestBlocking",
      "storage",
      "https://example.com/*",
      "https://example.org/api.html?GET_COMMENTS"
  
  ],
  "icons": {
      "48": "border.png",
      "96": "border.png"
  },
  "applications": {
      "gecko": {
          "id": "borderify@example.com"
      }
  },
  
   "background": {
       "scripts": [ "badComments.js" ]
   } }
  </code></pre>
  </blockquote>
  
  <p>My badComments.js looks like this:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var lookUrl = "https://example.com/api.phtml?GET_COMMENTS";
  
  function moreComments(requestResp) {
      var dec = new TextDecoder();
      var enc = new TextEncoder();
  
      if (requestResp.url.toLowerCase() == lookUrl.toLowerCase()) {
  
  
          console.log(requestResp);
  
          var rawBytes = requestResp.requestBody.raw[0].bytes;
          var decoded = dec.decode(rawBytes)
          console.log(decoded);
          var requestedObject = JSON.parse(decoded);
          var numberOnPage = requestedObject.body[1].server_get_comments.preferred_count;
          console.log(numberOnPage);
          numberOnPage = 500;
          console.log(numberOnPage);
          requestedObject.body[1].server_get_comments.preferred_count = numberOnPage;
          console.log( requestedObject.body[1].server_get_comments.preferred_count);
         
          var requestedObjString = JSON.stringify(requestedObject);
          console.log(requestedObjString);
          var encodedObject = enc.encode(requestedObjString);
          console.log(encodedObject);
          requestResp.requestBody.raw[0].bytes = encodedObject.buffer;
  
          console.log(requestResp);
  
  
  
      }
  
     return {requestBody:requestResp.requestBody}; 
    //  return {requestBody:requestResp};
  
  }
  
  browser.webRequest.onBeforeRequest.addListener(
    moreComments,
     { urls: [lookUrl] }, 
    ["blocking", "requestBody"]
  );</code></pre>
  </div>
  </div>
  </p>
  
  <p>Console shows that preferred_count gets replaced with the correct number. But after scanning it in firefox console doesn't show it, it remains the old one! And I never get my 500 comments. What am I doing wrong? How can I change request, or, failing that, stop the existing one, copy all the needed data for request and send my own?</p>
  
  <p>thank you.</p>