Add Webpack and TypeScript to the project.

.gitignore

@@ -1 +1,3 @@
 .idea/
+dist/
+node_modules/

1-basic-extension/README.md

@@ -1 +1 @@
-Full article coming soon to [Victor on Software](https://victoronsoftware.com)
+Full article explaining [how to create a Chrome extension from scratch step-by-step](https://victoronsoftware.com/posts/create-chrome-extension/).

2-webpack-typescript/README.md

@@ -0,0 +1 @@
+Full article coming soon to [Victor on Software](https://victoronsoftware.com)

2-webpack-typescript/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "my-chrome-extension",
+  "version": "1.0.0",
+  "description": "My first Chrome extension",
+  "repository": "https://github.com/getvictor/create-chrome-extension",
+  "author": "getvictor",
+  "license": "MIT",
+  "scripts": {
+    "start": "webpack --watch --config webpack.dev.ts",
+    "build": "webpack --config webpack.prod.ts"
+  },
+  "devDependencies": {
+    "@tsconfig/recommended": "^1.0.6",
+    "@types/chrome": "^0.0.268",
+    "copy-webpack-plugin": "^12.0.2",
+    "ts-loader": "^9.5.1",
+    "ts-node": "^10.9.2",
+    "typescript": "^5.4.5",
+    "webpack": "^5.91.0",
+    "webpack-cli": "^5.1.4",
+    "webpack-merge": "^5.10.0"
+  }
+}

2-webpack-typescript/src/background.ts

@@ -0,0 +1,11 @@
+import {setBadgeText} from "./common"
+
+function startUp() {
+    chrome.storage.sync.get("enabled", (data) => {
+        setBadgeText(!!data.enabled)
+    })
+}
+
+// Ensure the background script always runs.
+chrome.runtime.onStartup.addListener(startUp)
+chrome.runtime.onInstalled.addListener(startUp)

2-webpack-typescript/src/common.ts

@@ -0,0 +1,4 @@
+export function setBadgeText(enabled: boolean) {
+    const text = enabled ? "ON" : "OFF"
+    void chrome.action.setBadgeText({text: text})
+}

2-webpack-typescript/src/content.ts

@@ -0,0 +1,64 @@
+const blurFilter = "blur(6px)"
+let textToBlur = ""
+
+// Search this DOM node for text to blur and blur the parent element if found.
+function processNode(node: Node) {
+    if (node.childNodes.length > 0) {
+        Array.from(node.childNodes).forEach(processNode)
+    }
+    if (node.nodeType === Node.TEXT_NODE &&
+        node.textContent !== null && node.textContent.trim().length > 0) {
+        const parent = node.parentElement
+        if (parent == null) {
+            return
+        }
+        if (parent.tagName === 'SCRIPT' || parent.style.filter === blurFilter) {
+            // Already blurred
+            return
+        }
+        if (node.textContent.includes(textToBlur)) {
+            blurElement(parent)
+        }
+    }
+}
+
+function blurElement(elem: HTMLElement) {
+    elem.style.filter = blurFilter
+    console.debug("blurred id:" + elem.id + " class:" + elem.className +
+        " tag:" + elem.tagName + " text:" + elem.textContent)
+}
+
+// Create a MutationObserver to watch for changes to the DOM.
+const observer = new MutationObserver((mutations) => {
+    mutations.forEach((mutation) => {
+        if (mutation.addedNodes.length > 0) {
+            mutation.addedNodes.forEach(processNode)
+        } else {
+            processNode(mutation.target)
+        }
+    })
+})
+
+// Enable the content script by default.
+let enabled = true
+const keys = ["enabled", "item"]
+
+chrome.storage.sync.get(keys, (data) => {
+    if (data.enabled === false) {
+        enabled = false
+    }
+    if (data.item) {
+        textToBlur = data.item
+    }
+    // Only start observing the DOM if the extension is enabled and there is text to blur.
+    if (enabled && textToBlur.trim().length > 0) {
+        observer.observe(document, {
+            attributes: false,
+            characterData: true,
+            childList: true,
+            subtree: true,
+        })
+        // Loop through all elements on the page for initial processing.
+        processNode(document)
+    }
+})

2-webpack-typescript/src/popup.ts

@@ -0,0 +1,27 @@
+import {setBadgeText} from "./common"
+
+console.log("Hello, world from popup!")
+
+// Handle the ON/OFF switch
+const checkbox = document.getElementById("enabled") as HTMLInputElement
+chrome.storage.sync.get("enabled", (data) => {
+    checkbox.checked = !!data.enabled
+    void setBadgeText(data.enabled)
+})
+checkbox.addEventListener("change", (event) => {
+    if (event.target instanceof HTMLInputElement) {
+        void chrome.storage.sync.set({"enabled": event.target.checked})
+        void setBadgeText(event.target.checked)
+    }
+})
+
+// Handle the input field
+const input = document.getElementById("item") as HTMLInputElement
+chrome.storage.sync.get("item", (data) => {
+    input.value = data.item || ""
+});
+input.addEventListener("change", (event) => {
+    if (event.target instanceof HTMLInputElement) {
+        void chrome.storage.sync.set({"item": event.target.value})
+    }
+})

2-webpack-typescript/static/manifest.json

@@ -0,0 +1,21 @@
+{
+  "manifest_version": 3,
+  "name": "My Chrome Extension",
+  "version": "0.1.0",
+  "description": "My first Chrome extension.",
+  "action": {
+    "default_popup": "popup.html"
+  },
+  "permissions": [
+    "storage"
+  ],
+  "content_scripts": [
+    {
+      "matches": ["<all_urls>"],
+      "js": ["content.js"]
+    }
+  ],
+  "background": {
+    "service_worker": "background.js"
+  }
+}

2-webpack-typescript/static/popup.css

@@ -0,0 +1,57 @@
+/* The switch - the box around the slider */
+.switch {
+    margin-left: 30%; /* Center the switch */
+    position: relative;
+    display: inline-block;
+    width: 60px;
+    height: 34px;
+}
+
+/* Hide default HTML checkbox */
+.switch input {
+    opacity: 0;
+    width: 0;
+    height: 0;
+}
+
+/* The slider */
+.slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: #ccc;
+}
+
+.slider::before {
+    position: absolute;
+    content: "";
+    height: 26px;
+    width: 26px;
+    left: 4px;
+    bottom: 4px;
+    background-color: white;
+}
+
+input:checked + .slider {
+    background-color: #2196F3;
+}
+
+input:checked + .slider:before {
+    transform: translateX(26px); /* Move the slider to the right when checked */
+}
+
+/* Rounded sliders */
+.slider.round {
+    border-radius: 34px;
+}
+
+.slider.round::before {
+    border-radius: 50%;
+}
+
+.secret {
+    margin: 5px;
+}

2-webpack-typescript/static/popup.html

@@ -0,0 +1,14 @@
+<html lang="en">
+<head>
+    <title>My popup</title>
+    <link rel="stylesheet" type="text/css" href="popup.css">
+</head>
+<body>
+<label class="switch">
+    <input id="enabled" type="checkbox">
+    <span class="slider round"></span>
+</label>
+<input class="secret" id="item" type="text">
+<script src="popup.js"></script>
+</body>
+</html>

2-webpack-typescript/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "@tsconfig/recommended/tsconfig.json",
+}

2-webpack-typescript/webpack.common.ts

@@ -0,0 +1,36 @@
+import path from 'path'
+import webpack from 'webpack'
+import CopyWebpackPlugin from 'copy-webpack-plugin'
+
+const config: webpack.Configuration = {
+    devtool: 'inline-source-map',
+    entry: {
+        background: './src/background.ts',
+        content: './src/content.ts',
+        popup: './src/popup.ts',
+    },
+    resolve: {
+        extensions: [".ts"],
+    },
+    module: {
+        rules: [
+            {
+                test: /\.ts$/,
+                loader: "ts-loader",
+                exclude: /node_modules/,
+            },
+        ],
+    },
+    output: {
+        filename: '[name].js',
+        path: path.resolve(__dirname, 'dist'),
+        clean: true, // Clean the output directory before emit.
+    },
+    plugins: [
+        new CopyWebpackPlugin({
+            patterns: [{ from: 'static' }],
+        }),
+    ]
+}
+
+export default config

2-webpack-typescript/webpack.dev.ts

@@ -0,0 +1,11 @@
+import {Configuration} from 'webpack'
+import {merge} from 'webpack-merge'
+import config from './webpack.common'
+
+const merged = merge<Configuration>(config,{
+    mode: 'development',
+    devtool: 'inline-source-map',
+})
+
+// noinspection JSUnusedGlobalSymbols
+export default merged

2-webpack-typescript/webpack.prod.ts

@@ -0,0 +1,11 @@
+import {Configuration} from 'webpack'
+import {merge} from 'webpack-merge'
+import config from './webpack.common'
+
+const merged = merge<Configuration>(config,{
+    mode: 'production',
+    devtool: 'source-map',
+})
+
+// noinspection JSUnusedGlobalSymbols
+export default merged