Can I create a html page in Chrome extension before it's loaded?

Question

I need to intercept the very first request to specific server, let it be http://google.com and instead of render it inside root of the current tab create a page with two iframes, in the first iframe will be rendered site originally requested, http://google.com, in second one will be rendered lets say http://bing.com.

I need something like this:

<!DOCTYPE html>
<html>
<body>

<iframe src="http://www.google.com">
  <p>Your browser does not support iframes.</p>
</iframe>
<iframe src="http://www.bing.com">
  <p>Your browser does not support iframes.</p>
</iframe>

</body>
</html>

Actually I know how to intercept the very first request:

chrome.webRequest.onBeforeRequest.addListener(
    function(details)
    {
        console.log(details.requestBody);
    },
    {urls: ["*://google/*"]},
    ['requestBody']
);

but what to do next?

score 2 · Accepted Answer · edited May 23 '17 at 10:34

2

Chrome extension can't directly modify http response body, you may want to use some workarounds, for example, redirect this request to a predefined html template.

chrome.webRequest.onBeforeRequest.addListener(
    function(details)
    {
        return { redirectUrl: chrome.runtime.getURL('template.html')};
    },
    {urls: ["*://www.baidu.com/*"]},
    ['blocking']
);

edited May 23 '17 at 10:34

Community

1
1

answered Sep 23 '16 at 06:11

Haibara Ai

10,703
2
31
47

Should this page be hosted elsewhere or it can be bundled within extension? – Anatoly Sep 23 '16 at 06:40
1

@Anatoly, depends on your needs, my example is assuming the template is bundled with the extension. – Haibara Ai Sep 23 '16 at 07:07

Can I create a html page in Chrome extension before it's loaded?

1 Answers1