Implement the threat notification.

[LucasMali]

I had to install webpack using the following: npx webpack init. This should not require us to run this command again.

Following this guide without any results yet. https://github.com/jantimon/html-webpack-plugin

Here is the stack: https://stackoverflow.com/questions/51353178/get-webpack-to-include-html-files

Following is a few tutorials, not sure how good they are:

web-ext is a command-line tool that allows you to develop, test, and package Firefox web extensions. On the other hand, webpack is a popular module bundler for JavaScript applications.

To load HTML files with webpack in a Firefox web extension using web-ext, you can follow these steps:

Create an HTML file that you want to load in your extension. For example, you could create a file named popup.html in a src directory in your project. Configure webpack to include the HTML file in the build. You can do this by using the html-webpack-plugin plugin. Here's an example webpack.config.js file:

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: __dirname + '/dist'
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/popup.html',
      filename: 'popup.html'
    })
  ]
};

This configuration will create a bundle.js file in a dist directory, and it will also copy popup.html from the src directory to the dist directory.

Use the web-ext run command to launch your extension in Firefox for testing. For example:

web-ext run --firefox=/Applications/Firefox.app --source-dir=dist

This command will launch Firefox with your extension loaded, and it will use the dist directory as the source for the extension files.

In your extension code, you can load the HTML file using the browser.tabs.create API. Here's an example:

browser.browserAction.onClicked.addListener(() => {
  browser.tabs.create({url: browser.extension.getURL('popup.html')});
});

This code will create a new tab with the URL chrome-extension:///popup.html, which will load your HTML file.

Note that you'll need to replace with the actual ID of your extension. You can find this ID in the manifest.json file in your project.

To load an HTML file into the same window in a Firefox web extension using web-ext and webpack, you can modify the browser.tabs.create API call to use the activeTab option instead of creating a new tab. Here's an example:

browser.browserAction.onClicked.addListener(() => {
  browser.tabs.query({active: true, currentWindow: true}, tabs => {
    browser.tabs.update(tabs[0].id, {url: browser.extension.getURL('popup.html')});
  });
});

This code will update the URL of the currently active tab to chrome-extension:///popup.html, which will load your HTML file into the same window. Again, you'll need to replace with the actual ID of your extension.

Note that this approach will replace the content of the currently active tab, so you may want to provide a way for the user to return to the previous content. You could do this by saving the previous URL and using the browser.tabs.update API again to revert to the previous page.