fix webpack config

.eslintrc.json

@@ -2,11 +2,13 @@
   "env": {
     "browser": true,
     "commonjs": true,
-    "es2021": true
+    "es2021": true,
+    "node": true // add this line to allow Node.js-specific globals
   },
   "extends": "eslint:recommended",
   "parserOptions": {
-    "ecmaVersion": "latest"
+    "ecmaVersion": "latest",
+    "sourceType": "module" // add this line to allow 'import' and 'export' statements
   },
   "rules": {
     "indent": ["error", 2],

.prettierrc

@@ -0,0 +1,4 @@
+{
+  "tabWidth": 2,
+  "useTabs": false
+}

package.json

@@ -1,11 +1,12 @@
 {
   "name": "evenbetterseqta",
   "version": "1.0.0",
+  "type": "module",
   "description": "![Logo](https://raw.githubusercontent.com/SethBurkart123/BetterThanBetterSeqta/c96edd5956fc11571408310aea98cf7222d6876f/src/icons/betterseqta-light-full.png#gh-dark-mode-only) ![Logo](https://raw.githubusercontent.com/SethBurkart123/BetterThanBetterSeqta/c96edd5956fc11571408310aea98cf7222d6876f/src/icons/betterseqta-dark-full.png#gh-light-mode-only)",
   "main": "webpack.config.js",
   "scripts": {
-    "build": "webpack --config webpack.config.js",
-    "dev": "webpack --config webpack.config.js --watch"
+    "build": "webpack --config webpack.config.js --mode production",
+    "dev": "webpack --config webpack.config.js --watch --mode production"
   },
   "keywords": [],
   "author": "",
@@ -13,6 +14,7 @@
   "devDependencies": {
     "copy-webpack-plugin": "^11.0.0",
     "css-loader": "^6.8.1",
+    "dompurify": "^3.0.5",
     "eslint": "^8.48.0",
     "eslint-config-prettier": "^9.0.0",
     "eslint-webpack-plugin": "^4.0.1",
@@ -22,6 +24,7 @@
     "sass": "^1.65.1",
     "sass-loader": "^13.3.2",
     "style-loader": "^3.3.3",
+    "webextension-polyfill": "^0.10.0",
     "webpack": "^5.88.2",
     "webpack-cli": "^5.1.4"
   }

public/popup/info.js

@@ -11,13 +11,15 @@
 // You should have received a copy of the GNU General Public License
 // along with this program.  If not, see <https://www.gnu.org/licenses/>.
 
+/*global chrome*/
+
 const onoffselection = document.querySelector("#onoff");
 const notificationcollector = document.querySelector("#notification");
 const lessonalert = document.querySelector("#lessonalert");
 const aboutsection = document.querySelector("#aboutsection");
 const shortcutsection = document.querySelector("#shortcutsection");
 const miscsection = document.querySelector("#miscsection");
-const mainpage = document.querySelector("#mainpage");
+//const mainpage = document.querySelector("#mainpage");
 const colorpicker = document.querySelector("#colorpicker");
 const animatedbk = document.querySelector("#animatedbk");
 const customshortcutbutton = document.getElementsByClassName(
@@ -63,7 +65,7 @@ function openGithub() {
     url: "https://github.com/SethBurkart123/EvenBetterSEQTA",
   });
 }
-
+/*
 function openPage(page) {
   mainpage.style.left = "-350px";
   page.style.right = "0px";
@@ -75,7 +77,7 @@ function backToMainMenu() {
   menupage.style.right = "-350px";
   shortcutpage.style.right = "-350px";
   miscpage.style.right = "-350px";
-}
+}*/
 
 function resetActive() {
   for (let i = 0; i < navbuttons.length; i++) {

src/background.js

@@ -1,3 +1,5 @@
+/*global chrome*/
+
 function ReloadSEQTAPages() {
   chrome.tabs.query({}, function (tabs) {
     for (let tab of tabs) {
@@ -8,7 +10,7 @@ function ReloadSEQTAPages() {
   });
 }
 
-chrome.runtime.onMessage.addListener(function (request, sender) {
+chrome.runtime.onMessage.addListener(function (request) {
   if (request.type == "reloadTabs") {
     ReloadSEQTAPages();
   } else if (request.type == "githubTab") {
@@ -29,7 +31,7 @@ chrome.runtime.onMessage.addListener(function (request, sender) {
       { permissions: ["declarativeContent"], origins: ["*://*/*"] },
       function (granted) {
         if (granted) {
-          rules = [
+          let rules = [
             {
               conditions: [
                 new chrome.declarativeContent.PageStateMatcher({
@@ -70,7 +72,18 @@ chrome.runtime.onMessage.addListener(function (request, sender) {
   }
 });
 
-var NewsJSON = {};
+function GetNews(url, sendResponse) {
+  fetch(url)
+    .then((result) => result.json())
+    .then((response) => {
+      if (response.code == "rateLimited") {
+        url += "%00";
+        GetNews();
+      } else {
+        sendResponse({ news: response });
+      }
+    });
+}
 
 chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
   if (request.type === "sendNews") {
@@ -92,20 +105,7 @@ chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
     // var url = `https://newsapi.org/v2/everything?sources=abc-news&from=${TodayFormatted}&sortBy=popularity&apiKey=17c0da766ba347c89d094449504e3080`;
     var url = `https://newsapi.org/v2/everything?domains=abc.net.au&from=${from}&apiKey=17c0da766ba347c89d094449504e3080`;
 
-    function GetNews() {
-      fetch(url)
-        .then((result) => result.json())
-        .then((response) => {
-          if (response.code == "rateLimited") {
-            url += "%00";
-            GetNews();
-          } else {
-            sendResponse({ news: response });
-          }
-        });
-    }
-
-    GetNews();
+    GetNews(url, sendResponse);
 
     return true;
   }
@@ -196,9 +196,9 @@ function UpdateCurrentValues(details) {
             NewValue[i] = Object.assign({}, DefaultValues[i], CurrentValues[i]);
           } else {
             // If the object is an array, turn it back after
-            length = DefaultValues[i].length;
+            let length = DefaultValues[i].length;
             NewValue[i] = Object.assign({}, DefaultValues[i], CurrentValues[i]);
-            NewArray = [];
+            let NewArray = [];
             for (let j = 0; j < length; j++) {
               NewArray.push(NewValue[i][j]);
             }

src/seqta/icons/assessmentsIcon.svg

@@ -0,0 +1,3 @@
+<svg style="width:24px;height:24px;border-radius:0;" viewBox="0 0 24 24">
+  <path fill="currentColor" d="M6 20H13V22H6C4.89 22 4 21.11 4 20V4C4 2.9 4.89 2 6 2H18C19.11 2 20 2.9 20 4V12.54L18.5 11.72L18 12V4H13V12L10.5 9.75L8 12V4H6V20M24 17L18.5 14L13 17L18.5 20L24 17M15 19.09V21.09L18.5 23L22 21.09V19.09L18.5 21L15 19.09Z"></path>
+</svg>

src/seqta/icons/coursesIcon.svg

@@ -0,0 +1,3 @@
+<svg style="width:24px;height:24px;border-radius:0;" viewBox="0 0 24 24">
+  <path fill="currentColor" d="M19 1L14 6V17L19 12.5V1M21 5V18.5C19.9 18.15 18.7 18 17.5 18C15.8 18 13.35 18.65 12 19.5V6C10.55 4.9 8.45 4.5 6.5 4.5C4.55 4.5 2.45 4.9 1 6V20.65C1 20.9 1.25 21.15 1.5 21.15C1.6 21.15 1.65 21.1 1.75 21.1C3.1 20.45 5.05 20 6.5 20C8.45 20 10.55 20.4 12 21.5C13.35 20.65 15.8 20 17.5 20C19.15 20 20.85 20.3 22.25 21.05C22.35 21.1 22.4 21.1 22.5 21.1C22.75 21.1 23 20.85 23 20.6V6C22.4 5.55 21.75 5.25 21 5M10 18.41C8.75 18.09 7.5 18 6.5 18C5.44 18 4.18 18.19 3 18.5V7.13C3.91 6.73 5.14 6.5 6.5 6.5C7.86 6.5 9.09 6.73 10 7.13V18.41Z"></path>
+</svg>

src/seqta/utils/stringToHTML.js

@@ -0,0 +1,12 @@
+import DOMPurify from "dompurify";
+
+export function stringToHTML(str, styles = false) {
+  var parser = new DOMParser();
+  str = DOMPurify.sanitize(str, { ADD_ATTR: ["onclick"] });
+  var doc = parser.parseFromString(str, "text/html");
+  if (styles) {
+    doc.body.style.cssText =
+      "height: auto; overflow: scroll; margin: 0px; background: var(--background-primary);";
+  }
+  return doc.body;
+}

webpack.config.js

@@ -1,9 +1,14 @@
-const path = require("path");
-const MiniCssExtractPlugin = require("mini-css-extract-plugin");
-const CopyWebpackPlugin = require("copy-webpack-plugin");
-const ESLintPlugin = require("eslint-webpack-plugin");
+import path from "path";
+import MiniCssExtractPlugin from "mini-css-extract-plugin";
+import CopyWebpackPlugin from "copy-webpack-plugin";
+import ESLintPlugin from "eslint-webpack-plugin";
 
-module.exports = {
+
+export default {
+  target: "web",
+  node: {
+    __dirname: true
+  },
   performance: {
     hints: false,
     maxEntrypointSize: 512000,
@@ -13,9 +18,9 @@ module.exports = {
   entry: {
     SEQTA: "./src/SEQTA.js",
     background: "./src/background.js",
-    "inject-documentload": "./src/inject/documentload.css", // Entry for CSS
-    "inject-iframe": "./src/inject/iframe.css", // Entry for CSS
-    "inject-injected": "./src/inject/injected.css", // Entry for CSS
+    "inject/documentload": "./src/inject/documentload.css", // Entry for CSS
+    "inject/iframe": "./src/inject/iframe.css", // Entry for CSS
+    "inject/injected": "./src/inject/injected.css", // Entry for CSS
   },
   output: {
     filename: (pathData) => {
@@ -23,15 +28,22 @@ module.exports = {
       return name.includes("inject") ? `inject/${name}.js` : `${name}.js`;
     },
     // eslint-disable-next-line no-undef
-    path: path.resolve(__dirname, "build"),
+    path: path.resolve("build"),
+    publicPath: "",
   },
   module: {
     rules: [
       {
         test: /\.css$/,
-        use: [MiniCssExtractPlugin.loader, "css-loader"],
-        // eslint-disable-next-line no-undef
-        include: path.resolve(__dirname, "src"),
+        use: [
+          MiniCssExtractPlugin.loader,
+          {
+            loader: "css-loader",
+            options: {
+              importLoaders: 1
+            }
+          }
+        ]
       },
       {
         test: /\.(png|svg|jpg|jpeg|gif)$/i,
@@ -45,17 +57,13 @@ module.exports = {
   plugins: [
     new ESLintPlugin(),
     new MiniCssExtractPlugin({
-      filename: (pathData) => {
-        const name = pathData.chunk.name.replace("inject-", "");
-        return name.includes("inject")
-          ? `inject/${name}.css`
-          : `inject/${name}.css`;
-      },
+      filename: "[name].css" 
     }),
     new CopyWebpackPlugin({
       patterns: [
         { from: "public", to: "." },
         { from: "src/inject/preview", to: "inject/preview" },
+        { from: "node_modules/webextension-polyfill/dist/browser-polyfill.js", to: "."},
       ],
     }),
   ],