title: Puppeteer, save webpage and images
body: <p>I'm trying to save a webpage, for offline usage with Nodejs and puppeteer. I see a lot of examples with: </p>
  
  <pre><code>await page.screenshot({path: 'example.png'});
  </code></pre>
  
  <p>But with a bigger webpage it's not an option. So a better option in puppeteer is to load the page and then save like:</p>
  
  <pre><code>const html = await page.content();
  // ... write to file
  </code></pre>
  
  <p>Ok, that works. Now I am going to scroll like pages as twitter. So I decided to block all images in puppeteer page:</p>
  
  <pre><code>page.on('request', request =&gt; {
      if (request.resourceType() === 'image') {
          const imgUrl = request.url()
          download(imgUrl, 'download').then((output) =&gt; {
              images.push({url: output.url, filename: output.filename})
          }).catch((err) =&gt; {
              console.log(err)
          })
          request.abort()
      } else {
          request.continue()
      }
  })
  </code></pre>
  
  <p>Ok, I now used the 'npm download' lib to download all the images. Yes the download images are ok :D.</p>
  
  <p>Now when I save the content, I want to point it to the offline images in the source.</p>
  
  <pre><code>const html = await page.content();
  </code></pre>
  
  <p>But now I like to replace all the </p>
  
  <pre><code>&lt;img src="/pic.png?id=123"&gt; 
  &lt;img src="https://twitter.com/pics/1.png"&gt;
  </code></pre>
  
  <p>And also things like:</p>
  
  <pre><code>&lt;div style="background-image: url('this_also.gif')&gt;&lt;/div&gt;
  </code></pre>
  
  <p>So is there a way (in puppeteer) to scrape a big page and store the whole content offline ? </p>
  
  <p>Javascript and CSS would also be nice </p>
  
  <p><strong>Update</strong></p>
  
  <p>For now I will open the big html file again with puppeteer.</p>
  
  <p>And then intercept all files as:
  <a href="https://dom.com/img/img.jpg" rel="noreferrer">https://dom.com/img/img.jpg</a>, /file.jpg, ....</p>
  
  <pre><code>request.respond({
      status: 200,
      contentType: 'image/jpeg',
      body: '..'
  });
  </code></pre>
  
  <p>I can also do it with a chrome extention. But I like to have a function with some options page.html(), the same as page.pdf()</p>