javascript - Show HTML file contained within the extension

Question

I'm creating a website blocker: after you visit a website you've blocked, the browser displays a new HTML page saying "website blocked". The new HTML page is saved in my Chrome extension as message.html. Is there any way to display message.html in the browser? If not, I'll just use a content script to inject some JavaScript.

Answer 1

Updating a tab to display message.html

Assuming all of the following are true:

• You are doing this from a script running in the background context.
• You are wanting to update an already existing tab to display message.html
• The ID tab which you are wanting to update is tabId.
• Your message.html is located in the same directory as your manifest.json.

You could do the following, which uses chrome.tabs.update() (Firefox docs) to change the tab with the ID contained in tabId to display your message.html:

chrome.tabs.update(tabId ,{url:'/message.html'});

or

chrome.tabs.update(tabId ,{url:chrome.runtime.getURL('/message.html'}));

If you are changing the currently selected tab in the active window, then the tabId is not required, and you can omit that argument.

Create a tab to display message.html

Assuming all of the following are true:

• You are doing this from a script running in the background context.
• You are wanting to create a new tab to display message.html
• Your message.html is located in the same directory as your manifest.json.

You can use chrome.tabs.create() (Firefox docs) to create a new tab to display message.html:

chrome.tabs.create({url:'/message.html'});

or

chrome.tabs.create({url:chrome.runtime.getURL('/message.html'}));

Open message.html in a new window

Assuming all of the following are true:

• You are doing this from a script running in the background context.
• You are wanting to create a new window to display message.html
• Your message.html is located in the same directory as your manifest.json.

You can use chrome.windows.create() (Firefox docs) to open a new window to display message.html:

chrome.windows.create({url:'/message.html'});

or

chrome.windows.create({url:chrome.runtime.getURL('/message.html'}));