How can i create 'temp html' and load it?

I develop chrome extension now. My program edit web-page(content script), modified page contain lot of hyperlinks.

If I click one link and back, content script is roll back to original version. I want it remain modified state.

I thought, create temp html file can be solution. first, I try this.

html = '<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>    <title></title></head><body>    <a href ="http://google.com">test html</a></body></html>';

var fileBlob = new Blob([html], {  
    type: 'text/html'
});

var fileUrl = URL.createObjectURL(fileBlob);
location.href = fileUrl;

(html is just example) upper code can display modified html. but click link and back, page is gone.

Next, I try this.

//at chrome extension
html = '<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>    <title></title></head><body>    <a href ="http://google.com">test html</a></body></html>';

var fileBlob = new Blob([html], {  
    type: 'text/html'
});

var fileUrl = URL.createObjectURL(fileBlob);

var fileName = "temp.html";    

console.log(fileUrl);
var fileOptions = {
    filename: fileName,
    url: fileUrl,
    conflictAction: 'overwrite'  
};

chrome.downloads.download(fileOptions); 

//at content script
window.open('file:///C:/Users/jsl/Downloads/temp.html');

It's not work. This is error message.

Not allowed to load local resource: `file:///C:/Users/jsl/Downloads/temp.html`

How can I do it? I know using server can solve all problem. But I don't want use server. it's impossible?

Or, there are another solution to remain modified state when i back?

Solution

Pass data or modify extension html in a new tab/window ' s third way really help me.

manifast.json

....
"background": {
  "scripts": [ "webpage/bg.js" ],
  "persistent": false
},
....

extension's code :

chrome.tabs.executeScript(null, {
    code: "head = document.head.innerHTML;  body = document.body.innerHTML; source= [head,body]; source"
}, function (data) {
    source = data[0];       
    chrome.runtime.getBackgroundPage(bg => {
        bg.sharedData = JSON.stringify({ source: source });
        chrome.tabs.create({ url: 'webpage/page.html' });
    });
});

page.html :

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
</head>
<body>
    <script src="page.js"></script>
</body>
</html>

page.js

let sharedData = sessionStorage.sharedData;
if (!sharedData) {
    const bg = chrome.extension.getBackgroundPage();
    sharedData = bg && bg.sharedData;
    if (sharedData) {
        sessionStorage.sharedData = sharedData;
    }
}
try {
    sharedData = JSON.parse(sharedData);
    document.head.innerHTML = sharedData.source[0];
    document.body.innerHTML = sharedData.source[1];
} catch (e) { }

bg.js is empty file.

it's perfectly work for me. using this code, i can refresh page! Click link and back doesn't make roll back page!