## 1. Background
Around the same time last year, I started building the Chrome extension [Ultra Notes](https://chromewebstore.google.com/detail/ultra-notes/ngfhnakbmjknpcepkeiilllocgbdfehi)
* https://viet.pughtml.com/posts/post-3-ultra-notes

The extension is an advanced note-taking tool that allows users to take notes, and therefore, one of its key features is to support rich text editing.
Initially, I used [TinyMCE](https://www.tiny.cloud/) as the rich text editor (RTE) solution for the extension. The bundle size is quite large, 10mb, but it works perfectly fine in version 1.x of the extension. However, when I started adding more features and scaling up the project, I found that TinyMCE was not the best choice.
It leads me to disable the rich text editor in the extension version 2.x and look for a better solution.
I were introduced to [Lexical](https://playground.lexical.dev/) a couple of months ago and quickly fall in love with it. I had spent two weeks to integrate Lexical into the extension just to find out that it has the same issue to TinyMCE: they don't support Shadow DOM very well, which is crucial for Chrome extensions.
It was quite disappointed because of the wrong investment (two weeks of my leisure time). On the other hand, I learned a lot about today rich text editor solutions and how powerful they are.
Finally, I found [TipTap](https://www.tiptap.dev/). Tt works perfectly fine with the extension version 3.x. The bundle size now is around 4.2mb, or 1mb after zipped. It is lightweight, simple, and Shadow DOM supported.

<Youtube id="0M5AIlbtecs" title="Play:Youtube"/>

Below is the comparison of the three rich text editors and a simple guide to integrate them into a Chrome extension written by Svelte.

## 2. TinyMCE
The [Ultra Notes](https://chromewebstore.google.com/detail/ultra-notes/ngfhnakbmjknpcepkeiilllocgbdfehi) is free to use, non-commercial, at the time this post is written, so I have no problem with the TinyMCE license. But it is worth to learn a little bit about licenses of any open-source solutions you are using in your projects.
In this case, it is [GPLv2 for TinyMCE, v.7.3.0](https://github.com/tinymce/tinymce/blob/8b66cf289a1b5b39526ed9a5b5d9c8b2c539e3e5/LICENSE.md), at the time of writing this post.

<Notice type="info">
The key features of GPLv2 are:
* You need to open your source code if you distribute your software, and maintain the same GPLv2 license for your software.
* You can use the software for commercial purposes, but you need to follow the license terms, and retain the copyright notice of the GPLv2 software used in your software.

For example, you may see the TinyMCE editor embedded in your software display a message like "Powered by TinyMCE" or "TinyMCE" in the footer of the editor. This is to retain the copyright notice of the software used in your software. And you are not allowed to hide it.
</Notice>

I have no plan to publish the source code of the extension, so the GPLv2 TinyMCE doesn't work for me.
Certainly, I can pay or subscribe to the TinyMCE premium version to remove the restriction, but it is not worth for a small and free project like Ultra Notes.

### Integrate TinyMCE to a Chrome Extension (Svelte)
The official guide to create a TinyMCE Svelte Wrapper is available at https://github.com/tinymce/tinymce-svelte, that can be used for any Svelte web application.
However, to use it in a Chrome extension, we need to make some additional changes.

```json
// Firstly, we need to install the TinyMCE package from npm in 
// packages.json
"devDependencies": {
  "tinymce": "^7.3.0",
}
```
The advantage of using TinyMCE is everything is cooked for you, and you can use it right away. However, to use it, we must include the whole bundle of TinyMCE, as a static copy, in the extension.
In Svelte, I copy the artifacts of TinyMCE to the `public` folder, load the scripts and css, and then initialize the editor in a wrapper (Svelte component).

```ts
// vite.config.ts
// ... other imports
import { viteStaticCopy } from 'vite-plugin-static-copy'

const config: UserConfig = {
  plugins: [
    // ... other configs
    viteStaticCopy({
      targets: [
        {
          src: 'node_modules/tinymce/*',
          dest: 'tinymce'   // copy to the dist/tinymce folder at the build time
        }
      ]
    }),
  ],
  // ... other configs
};

export default config;
```

Don't forget to allow tinymce to be accessible in a Chrome extension by adding the following line to the `manifest.json` file:
```json
web_accessible_resources: [{
  matches: ["<all_urls>"],
  resources: ["tinymce/**"],
}],
```

Here we custom the TinyMCE Svelte wrapper component, that allows the editor to change its Light/Dark theme and to load the initial content from outside.
<Accordion title="TinyMCE.svelte">
```sveltehtml

<script lang="ts" context="module">
	const uuid = (prefix: string): string => {
		return prefix + '_' + Math.floor(Math.random() * 1000000000) + String(Date.now());
	};

	const createScriptLoader = () => {
		let state = {
			listeners: [],
			scriptId: uuid('tiny-script'),
			scriptLoaded: false,
			injected: false
		};

		const injectScript = (scriptId: string, doc: Document, url: string, cb: () => void) => {
			state.injected = true;
			const script = doc.createElement('script');
			script.referrerPolicy = 'origin';
			script.type = 'application/javascript';
			script.src = url;
			script.onload = () => { cb();}
			if (doc.head) doc.head.appendChild(script);
		};

		const load = (doc: Document, url: string, callback: () => void) => {
			if (state.scriptLoaded) {
				callback();
			} else {
				state.listeners.push(callback);
				// check we can access doc
				if (!state.injected) {
					injectScript(state.scriptId, doc, url, () => {
						state.listeners.forEach((fn) => fn());
						state.scriptLoaded = true;
					});
				}
			}
		};

		return {
			load
		}
	};
	let scriptLoader = createScriptLoader();
</script>

<script lang="ts">
	import { onMount, createEventDispatcher, onDestroy } from 'svelte';
	import { bindHandlers } from './Utils';
	export let id: string = uuid('tinymce-svelte'); // default values
	export let inline: boolean | undefined = undefined;
	export let disabled: boolean = false;
	export let apiKey: string = 'no-api-key';
	export let channel: string = '6';
	export let scriptSrc: string = undefined;
	export let conf: any = {};
	export let modelEvents: string = 'change input undo redo';
	export let value: string = '';
	export let text: string = '';
	export let cssClass: string = 'tinymce-wrapper';

	let container: HTMLElement;
	let element: HTMLElement;
	let editorRef: any;

	let lastVal = value;
	let disablindCache = disabled;

	const dispatch = createEventDispatcher();

	$: {
		if (editorRef && lastVal !== value) {
			editorRef.setContent(value);
			text = editorRef.getContent({format: 'text'});
			lastVal = value;
		}
		if (editorRef && disabled !== disablindCache) {
			disablindCache = disabled;
			if (typeof editorRef.mode?.set === 'function') {
				editorRef.mode.set(disabled ? 'readonly' : 'design');
			} else {
				editorRef.setMode(disabled ? 'readonly' : 'design');
			}
		}
	}

	// INFO: Custom code to remove the current instance and re-init with new config
	$: conf && getTinymce() !== null && getTinymce()?.remove(editorRef) && init();

	const getTinymce = () => {
		const getSink = () => {
			return typeof window !== 'undefined' ? window : global;
		};
		const sink = getSink();
		return sink?.tinymce ?? null;
	};

	const init = () => {
		if (!element) {
			return;
		}

		element.style.visibility = '';
		const finalInit = {
			...conf,
			target: element,
			inline: inline !== undefined ? inline : conf.inline !== undefined ? conf.inline : false,
			readonly: disabled,
			setup: (editor: any) => {
				editorRef = editor;
				editor.on('init', () => {
					editor.setContent(value);
					// bind model events
					editor.on(modelEvents, () => {
						lastVal = editor.getContent();
						if (lastVal !== value) {
							value = lastVal;
							text = editor.getContent({format: 'text'});
						}
					});
				});
				bindHandlers(editor, dispatch);
				if (typeof conf.setup === 'function') {
					conf.setup(editor);
				}
			},
		};

		getTinymce()?.init(finalInit);
	};

	onMount(() => {
		if (getTinymce() !== null) {
			init();
		} else {
			// const script = scriptSrc ? scriptSrc : `https://cdn.tiny.cloud/1/${apiKey}/tinymce/${channel}/tinymce.min.js`;
			scriptLoader.load(container.ownerDocument, scriptSrc, () => {
				init();
			});
		}
	});

	onDestroy(() => {
		if (editorRef) {
			getTinymce()?.remove(editorRef);
		}
	});

</script>
<div bind:this={container} class={cssClass}>
	{#if inline}
		<div id={id} bind:this={element}></div>
	{:else}
		<textarea id={id} bind:this={element} style="visibility:hidden"></textarea>
	{/if}
</div>
```
</Accordion>

And finally use it in the Chrome extension popup or sidePanel page.
```sveltehtml
<TinyMCE
  scriptSrc={chrome.runtime.getURL('tinymce/tinymce.min.js')}
  bind:value={currentNoteContent}
  conf={tinyMceConfig}
/>
```

### Why TinyMCE doesn't fit in a Chrome Extension
Besides the drawbacks. of the large bundle size, the main reason why TinyMCE doesn't fit in a Chrome extension is that it doesn't support Shadow DOM very well.
If you are building a Chrome extension that works as an isolated web application, you don't face this issue. For example:
* Popup: https://developer.chrome.com/docs/extensions/develop/ui/add-popup/
* or SidePanel: https://developer.chrome.com/docs/extensions/reference/api/sidePanel/

However, the problem arises when you want to make your extension work with the webpage's content, embedding a UI into the webpage, and therefore improve the user experience.
For example, in my use case, I want the [Ultra Notes](https://chromewebstore.google.com/detail/ultra-notes/ngfhnakbmjknpcepkeiilllocgbdfehi) to popup on any webpage, and users can drag and drop it to any position on the webpage.
Using this technique, users can take notes while reading an article, watching a video, or browsing a website, without switching tabs or clicking on the extension icon, which will be closed when the popup loses focus.

![image](/images/post/post-9-tinymce-lexical-tiptap-rte/ultra-notes-demo.webp)

This is where the content-script and Shadow DOM comes into play, and unfortunately TinyMCE doesn't support it.
https://www.tiny.cloud/docs/tinymce/latest/shadow-dom/

![image](/images/post/post-9-tinymce-lexical-tiptap-rte/tinymce-shadow-dom.webp)

## 3. Lexical Rich Text Editor by Meta (Facebook)
I have to admit that Lexical is a great rich text editor, and I love it. It is simple, lightweight, maintained by a big name (Meta, formerly Facebook), and offers the MIT license, which is very friendly for any project.
* https://github.com/facebook/lexical
* https://lexical.dev/docs/intro

> Users of software using an MIT License are permitted to use, copy, modify, merge publish, distribute, sublicense and sell copies of the software.  
> Ref. https://pitt.libguides.com/openlicensing/MIT

![image](/images/post/post-9-tinymce-lexical-tiptap-rte/lexical-editor.webp)

But it doesn't mean that Lexical is the best choice for all projects.
In the use case of inject content-script into a webpage as I mentioned above, Lexical has the same issue as TinyMCE: it doesn't support Shadow DOM very well.
* https://github.com/facebook/lexical/issues/4870
* https://github.com/facebook/lexical/issues/2119

My experience with Lexical is as below:
* I play around with the Lexical basic functions and features, and it **seems** to work fine as a headless editor, pure javascript in a Svelte component (Chrome extension).
* I didn't check carefully with the Shadow DOM, but I started to port (rewrite components) the [svelte-lexical](https://github.com/umaranis/svelte-lexical) project to my project.
  * I copy and modify components, styles, and scripts to fit my project.
  * I make the component isolated in a library, with intention to reuse each component independently like the [shadcn-svelte](https://www.shadcn-svelte.com/) project.
* It took me two weeks to port the Lexical to my project to realize that Selection API doesn't work with the Shadow DOM.
* Basically, Lexical partially work with Shadow DOM. But it is nothing if the Selection API doesn't work, because most of everything we do with a rich text editor is built on a Selection.

<Notice type="note">
The [svelte-lexical](https://github.com/umaranis/svelte-lexical) make components depend on the global CSS, assets (icons) and other components.
To use its component, it requires us to copy the whole project to our project, and then modify the components to fit our project.
So my idea is rewriting the components, styles, and scripts to make them independent, and then simply import only components that we need.
The idea is similar to the [shadcn-svelte](https://www.shadcn-svelte.com/) project.
</Notice>

## 3. Tiptap Editor
And then I found [Tiptap](https://www.tiptap.dev/), a great rich text editor that works perfectly fine with the Shadow DOM.
And [MIT license](https://github.com/ueberdosis/tiptap/blob/cf2067906f506486c6613f872be8b1fd318526c9/LICENSE.md), available for any project.

Tiptap is a headless editor, similar to Lexical, that we need to build the UI by ourselves.
It means that following the official guide at https://tiptap.dev/docs/editor/getting-started/install/svelte, what you receive is a very basic plain editable area.
To make it a rich text editor, we need to build the UI, toolbar, and other features by ourselves.

![image](/images/post/post-9-tinymce-lexical-tiptap-rte/tiptap-editor-demo.webp)

<Notice type="info">
* Tiptap features are extendable with extensions, that can be found at https://tiptap.dev/docs/editor/core-concepts/extensions.
  * Some extensions are remarkable, for example, https://tiptap.dev/docs/examples/experiments/slash-commands
* There are many projects that build on top of Tiptap, that can reduce your time to build the UI, for example, https://mantine.dev/x/tiptap/
  * Make sure that you check the license of the project you are using.
* Tiptap works with the Shadow DOM. This makes it a perfect choice for Chrome extensions or any project that utilize Shadow DOM.
</Notice>

## 4. Conclusion
In summary, this article discusses three open source Rich Text Editors (RTE) solutions, but there are many ones available, and each has its own pros and drawbacks, that we choose the right one built on our project requirements.

|                                      |                 TinyMCE                 |               Lexical              |               Tiptap               |
|--------------------------------------|:---------------------------------------:|:----------------------------------:|:----------------------------------:|
| License                              | GPLv2 (your source code must be public) | MIT (free to use in most of cases) | MIT (free to use in most of cases) |
| Web app                              |                    ✅                    |                  ✅                 |                  ✅                 |
| Chrome extension (popup & sidePanel) |                    ✅                    |                  ✅                 |                  ✅                 |
| Shadow DOM                           |                    ⛔                    |                  ⛔                 |                  ✅                 |
| Ready to use with UI                 |                    ✅                    |                  ⛔                 |                  ⛔                 |
| Easy to custom                       |                    ⛔                    |                  ✅                 |                  ✅                 |
| Small bundle size                    |                    ⛔                    |                  ✅                 |                  ✅                 |

From TinyMCE to Lexical and TipTap Rich Text Editor


## Background
There are many possible ways to build a Chrome extension (or Firefox addon, or web extension in general).

* The simplest way is to use vanilla JavaScript, HTML, and CSS following the official documentation provided by [Chrome](https://developer.chrome.com/docs/extensions) and [Mozilla](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions). However, it can be cumbersome to manage the codebase as the extension grows.

Essentially, a web extension is still a web application that runs in a browser like any website, built with HTML, CSS, and JavaScript. This means you can use most front-end frameworks to build an extension, such as React, Angular, or Vue.js.

* The difference is that you need to follow the extension's architecture (i.e., Manifest) and APIs to interact with the browser and the web pages.

The benefit of using a front-end framework is very clear: it helps you manage the codebase and the UI components more effectively. However, setting up the project with the right configuration and dependencies can be a bit trickier for a browser extension. Additionally, an extension built for the Chrome browser may not work well in Chromium-based browsers like Firefox, Edge, Arc, Vivaldi, Brave, etc.

### Why Svelte?
While React, Angular, and Vue.js are very popular and work well for most web projects, it's natural to ask, "Why Svelte?" To answer that question, the simplest way is to google and read some articles like the ones below:
* https://softwarehut.com/blog/tech/svelte-vs-react/
* https://blog.logrocket.com/react-vs-svelte/#svelte-bundle-size
* https://scrimba.com/articles/svelte-vs-react/

![image](/images/post/post-8-svelte-chrome-extension/React-vs-Svelte-bundle-size-2.webp)

<Notice type="note">
In conclusion, we consider using Svelte for building a Chrome extension because of its:

* Simplicity for small to medium projects (like an extension)
* Performance
* Bundle size
* Opportunity to experience an innovative front-end framework

Here, I have to admit that I'm easily attracted by new things. 😄
</Notice>

## Svelte vs. SvelteKit
If you are a beginner with Svelte, you may be confused about whether to choose [Svelte](https://svelte.dev/) or [SvelteKit](https://kit.svelte.dev/). Let's learn a little bit about them:

* Svelte, similar to React, is a frontend framework that helps you build new web applications or integrate with existing ones.
* SvelteKit is like Next.js, which is built on top of React, and helps manage routing, server-side rendering, and configurations more easily with a lot of built-in features.

<Notice type="info">
* https://sveltekit.io/blog/svelte-vs-sveltekit
* https://www.okupter.com/blog/svelte-vs-sveltekit-the-difference
</Notice>

Below are some use cases that may help you to choose the right one for your projects:

| Use case                                                  | Svelte | SvelteKit |
|-----------------------------------------------------------|--------|-----------|
| Building a brand new web project                          |        | ☑️        |
| Server-side-rendering, SEO, routing, service-worker, etc. |        | ☑️        |
| Integrating with an existing project                      | ✅     |           |
| A browser (Chrome) extension                              | ✅     |           |


## Building a Chrome Extension
### with SvelteKit
There is no problem if you want to use SvelteKit to create a Chrome extension. Below are a few articles to help you get started:
* https://dev.to/michmich112/writing-chrome-extensions-using-svelte-kit-and-manifest-v3-mkd
* https://plainenglish.io/blog/making-a-chrome-extension-with-svelte

However, at the moment, there are not many plugins and support from SvelteKit for building Chrome extensions. In the solutions described in the above articles, you may face issues with configuration, dependencies, and compatibility with the Chrome extension architecture when you need to scale up the project with more complicated features, such as a fancy UI/UX using content scripts.

The two popular solutions mentioned above leverage the `static-adapter` to copy whatever is in the `static` folder, i.e., the Manifest and an entry point file, to the build folder. However, this solution is very limited because we cannot fully utilize the power of a frontend framework like Svelte with static files only. That is why SvelteKit is suitable for a Popup (page) extension, but not for a more complicated extension with content scripts.

![image](/images/post/post-8-svelte-chrome-extension/224580458-4bcb6d0c-e43e-4a8a-be8b-65ff4ace47e3.webp)

In the article below, you may find out why SvelteKit is not suitable for a Chrome extension:
* https://medium.com/@michmich112/should-you-use-sveltekit-for-your-chrome-extension-d98e476f0f21

### Svelte for Chrome Extension
Svelte supports building Chrome extensions with content scripts, background scripts, and UI Svelte components much better, as it is easy to integrate with an existing project. To save time setting up everything from scratch, you can simply clone the boilerplate repository below and update the codebase to fit your requirements:

* https://github.com/NekitCorp/chrome-extension-svelte-typescript-boilerplate/tree/main
* Another good example is the repository https://github.com/kenshiro41/svelte-content-scripts, but it is not up to date with the latest Svelte version like the first one above.

![image](/images/post/post-8-svelte-chrome-extension/svelte-boilerplate.webp)

<Notice type="note">
After cloning the repository, you can start building and testing it with the following steps:

1. Install the dependencies and build the extension.

_Note that you may want to upgrade the dependencies to the latest versions, especially the Svelte and Vite plugins. Below are the versions that work for me:_

| Package                      | Version        |
|------------------------------|----------------|
| @crxjs/vite-plugin           | ^2.0.0-beta.23 |
| @sveltejs/vite-plugin-svelte | ^3.0.0         |
| @types/chrome                | latest         |
| svelte                       | ^4.2.18        |
| svelte-check                 | $3.8.1         |
| svelte-preprocess            | ^6.0.1         |
| vite                         | ^5.2.11        |

```bash
# install packages
npm install

# build the extension
npm run build
```

1. Load the extension as instructed here: https://developer.chrome.com/docs/extensions/get-started/tutorial/hello-world#load-unpacked
</Notice>

There are three main parts in the boilerplate, that benefit us to build a Chrome extension:

| # | Feature                                                                  | Use case                                                                              |
|---|--------------------------------------------------------------------------|---------------------------------------------------------------------------------------|
| 1 | Svelte                                                                   | Helps to integrate a content-script svelte-powered application into any webpage       |
| 2 | [CRXJS Vite Plugin](https://crxjs.dev/vite-plugin)  (@crxjs/vite-plugin) | Helps to custom the Manifest to work with Svelte (content-script, or whatever) easily |
| 3 | Tailwind CSS                                                             | Easy SCSS                                                                             | 

### Enable Tailwind CSS
To enable Tailwind CSS in the project, you can follow the steps described in the official documentation:
* https://tailwindcss.com/docs/guides/sveltekit

### Svelte UI Component Library
There are a few Svelte UI component libraries that you can use to build a Chrome extension, but I prefer to use shadcn because of its simplicity and flexibility:
* https://www.shadcn-svelte.com/

The `package.json` after adding the library should look like this:
```json
{
  "name": "chrome-extension",
  "version": "0.0.1",
  "description": "Your description here",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "check": "svelte-check --tsconfig ./tsconfig.json"
  },
  "devDependencies": {
    "@crxjs/vite-plugin": "^2.0.0-beta.23",
    "@sveltejs/package": "^2.3.1",
    "@sveltejs/vite-plugin-svelte": "^3.0.0",
    "@tsconfig/svelte": "^5.0.4",
    "@types/chrome": "latest",
    "@types/eslint": "^8.56.0",
    "@typescript-eslint/eslint-plugin": "^7.0.0",
    "@typescript-eslint/parser": "^7.0.0",
    "autoprefixer": "^10.4.19",
    "eslint": "^8.56.0",
    "eslint-config-prettier": "^9.1.0",
    "eslint-plugin-svelte": "^2.40.0",
    "postcss": "^8.4.38",
    "prettier": "^3.1.1",
    "prettier-plugin-svelte": "^3.1.2",
    "sass": "^1.77.3",
    "svelte": "^4.2.18",
    "svelte-check": "^3.8.1",
    "svelte-preprocess": "^6.0.1",
    "tailwindcss": "^3.4.4",
    "tslib": "^2.4.1",
    "typescript": "^5.0.0",
    "vite": "^5.2.11"
  },
  "dependencies": {
    "bits-ui": "^0.21.10",
    "clsx": "^2.1.1",
    "lucide-svelte": "^0.381.0",
    "svelte-radix": "^1.1.0",
    "tailwind-merge": "^2.3.0",
    "tailwind-variants": "^0.2.1"
  }
}
```

### Manifest V3
Manifest v3 is supported in the boilerplate, and you can find the configuration in the `vite.config.js` file.
![vite.config.ts](/images/post/post-8-svelte-chrome-extension/vite.config.ts.webp)

### Content Scripts
Using a popup action is very common in a Chrome extension, but sometimes we need to inject a content script into a webpage to interact with the DOM. This is where content scripts come into play. For example, we can use a popup to display a UI for users to perform certain actions, but that popup is isolated from the context of the webpage. To interact with the webpage, such as highlighting a word, replacing a word, or counting the number of words, we need to inject a content script into the webpage.

We can use vanilla JavaScript to write a content script, but managing the codebase becomes challenging as the extension grows. For instance, if we want to use TypeScript interfaces, shared functions, or a shared state between the content script and the popup, static JavaScript files are insufficient. It becomes even more difficult if we want to embed a UI into a webpage. While we can use pure JavaScript to create a simple button, a complex UI requires more than vanilla JavaScript.

Below, we will see how CRXJS helps us generate a content script with Svelte components and how to inject it into a webpage using the generated `dist/manifest.json`.

The manifest is defined in the `src/manifest.config.ts` file
![manifest.config.ts](/images/post/post-8-svelte-chrome-extension/manifest.config.ts.webp)

To generate the `dist/manifest.json` file.
![manifest.json.webp](/images/post/post-8-svelte-chrome-extension/manifest.json.webp)

### Integrate a UI (Svelte Component) into a Web Page with Content Scripts
Embedding a Svelte UI component into a webpage is similar to embedding a React component: you need to find a DOM element to host the component. The article below explains the process of integrating a Svelte component into an existing website:

* Adding Svelte to an Existing Website

Now, let's consider this scenario for our project:

* We want to add a simple UI to a webpage that users can interact with, such as displaying a button that users can click to show a dialog.
* First, we need a content script to inject the UI into the webpage, i.e., a src/main.ts file.
* The main.ts file will append a shadow DOM to the body of the webpage and then mount the Svelte UI component to the shadow DOM.
* We will describe the src/main.ts in the content_scripts section of the src/manifest.config.ts file, so it will be attached and called whenever a webpage is loaded.

```json
{
  content_scripts: [
    {
      "matches": ["<all_urls>"],
      "js": ["main.js"]
    }
  ]
}
```

And here is the sample `src/main.ts` file
```typescript
import MainUI from '$lib/MainUI';
import styles from './styles.scss?inline';

const init = () => {
  const host = document.body;
  if (!host) {
    console.warn('Could not find body host for Ultra Notes');
    throw new Error('Could not find body host');
  }

	// Optional, create a container to host our Shadow DOM
	const container = document.createElement('div');
	container.id = 'my-svelte-app';
	container.style.width = '600px';
	container.style.height = '500px';
	container.style.position = 'absolute';
	container.style.right = '50px';
	container.style.top = '80px';
	document.body.append(container);

  // Optional, create a shadow DOM to host the app
  // We can mount our app directly to an HTML element, but using a shadow DOM is more secure
  const styleElement = document.createElement('style');
  styleElement.textContent = styles;
	const shadow = container.attachShadow({ mode: 'open' });
	shadow.appendChild(styleElement);
  
	const target = document.createElement("div");
	target.style.fontFamily = 'Open Sans, sans-serif';
	target.style.backgroundColor = 'rgba(204, 233, 217, 0.75)';
	target.style.height = '100%';
	shadow.append(target);

  // Mount the app to the target
	new MainUI({
		target,
		props: {},
	});
}

// Wait for the web's DOM to be ready and then initialize our app
if (document.readyState === 'loading') {
	document.addEventListener('DOMContentLoaded', init);
} else {
	init();
}
```

## Conclusion
- Both Svelte and SvelteKit can be used to build a Chrome extension, but Svelte is particularly suitable for more complex extensions involving content-scripts, especially at the time of writing this post.
- Svelte is known for its simplicity, speed, and small bundle size, which are crucial factors for Chrome extensions.
- Svelte is well-suited for small to medium-sized projects, making it a popular choice for startups and personal projects.
- The Svelte community is growing, with numerous integrations, libraries, and plugins available to facilitate Chrome extension development, such as crxjs, Tailwind CSS, and shadcn.
- While Svelte is a great choice for Chrome extensions, other front-end frameworks like React, Angular, and Vue.js are also viable options.
- Above all, enjoy 😄.


### References
* https://dev.to/michmich112/writing-chrome-extensions-using-svelte-kit-and-manifest-v3-mkd
* https://plainenglish.io/blog/making-a-chrome-extension-with-svelte
* https://medium.com/@michmich112/should-you-use-sveltekit-for-your-chrome-extension-d98e476f0f21
* https://github.com/kenshiro41/svelte-content-scripts
* https://github.com/NekitCorp/chrome-extension-svelte-typescript-boilerplate/tree/main
* https://apop.tech/posts/adding-svelte-to-an-existing-website/


How To Build a Chrome Web Extension with Svelte


[Regular Expression (RegEx)](https://www.geeksforgeeks.org/write-regular-expressions/) is a powerful tool for searching and replacing text 
that I have implemented in the X-Word Replacer since its first version in 2018. 
I hadn't used it much in the past until recently when I needed to match a pattern in a text. 
I discovered that RegEx is very useful for tasks related to web page text processing, especially when replacing multiple patterns at once. 
For example, in this blog post, can you find all email addresses, such as my personal email, LHViet88@Gmail.com, in just a couple of seconds?

## X-Word-Replacer
[My first extension](https://viet.pughtml.com/chrome-extension) is a Word Count add-on for Firefox, which I developed in 2013.
[X-Word Replacer](https://chromewebstore.google.com/detail/x-word-replacer/efcnkaeocmkpckkenjinmdgkbjhajoca) is my second extension, released for Chrome in 2018. 
As the name suggests, X-Word Replacer helps users replace words or phrases on a web page in Chromium-based browsers in real-time. 
It is a simple tool, but it is very useful for web developers, content creators, and anyone who needs to work with text processing on the web.

The UI of X-Word Replacer is straightforward, with:

- A top bar for action buttons: Search and Highlight, Add New Rules, and Replace.
- A list of rules: checkboxes for enabling/disabling, input fields for searching and replacing, and a button for deleting.
- A footer for advanced settings, such as Match Case (case-sensitive), RegEx, Search/replace in inputs and textareas, and Search in the whole webpage or do nothing.

![image](/images/post/post-7-x-word-replacer/x-word-replacer.png)

<Notice type="note">
Here is the second email in bold italic for our treasure hunt game ***qktntjq944@couldmail.com***.
</Notice>
<pre>sucoivasannu-5428@yopmail.com</pre>

Below are some use cases for X-Word Replacer:

- Replace a word or phrase with another word or phrase
- Highlight a word or phrase
- Multi-highlight and replace with RegEx
- Count the number of words or phrases on a page

One use case that I found from [the Reddit community](https://www.reddit.com/r/AO3/comments/181z2xe/interactivefics_extension_now_gone_any/)  is correcting wrong machine translations to read untranslated web novels.

![image](/images/post/post-7-x-word-replacer/redit-screenshot.png)

## Regular Expression (RegEx) in X-Word-Replacer
In most cases, we know the exact word or phrase we want to search or replace, such as changing "a" to "b" or correcting wrong words to the right ones.

But sometimes, we need to search for a pattern of strings, not an exact word or phrase. 
For example, we might want to search, highlight, and count all possible email addresses in this post.

> Here is the third email in a Quote, with the embedded hyperlink leading to the extension X Word Replacer: [fogugita.icubiqip@gotgel.org](https://chromewebstore.google.com/detail/x-word-replacer/efcnkaeocmkpckkenjinmdgkbjhajoca)
A possible regular expression for searching email is <br/>`\b[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Z|a-z]{2,}\b`.<br/>
Note that, the extension already support `/g` flag for global search, so we don't need to add it in the pattern, but **only regex value**
![image](/images/post/post-7-x-word-replacer/regex-email-screenshot.png)

Or any string that you can find a rule to match it, for example:

- An accountant searching for all words that start with "a" and contain a "z", such as "Amazing", "Azure", "Analyze", etc., which can be matched with the pattern `\ba\w*z\w*\b`.
- A security researcher investigating a security incident and trying to collect evidence across multiple web pages or reports.
- Finding hashes, such as highlighted hashes in this post: https://www.trendmicro.com/en_us/research/24/c/cve-2024-21412--darkgate-operators-exploit-microsoft-windows-sma.html.
- IP addresses.
- URLs, domain URLs, etc.
- Email addresses, such as "sucoivasannu-5428@yopmail.com", etc.

To ensure the RegEx pattern is correct, you can test it in tools like [RegExr](https://regexr.com/) and [Regex101](https://regex101.com/), which are very helpful for both beginners and experts alike.
And make sure that the check box `Use Regular Expression` is checked.

<Notice type="warning">
Make sure that **only RegEx value** in the Search input.
If your full regex pattern is something like this `/a\w*z\w*/gi`, then you should input **only `a\w*z\w*`** in the Search field.<br/>
**No `/` at the beginning and no `/gi` at the end.**
</Notice>

- By default, the regex pattern you input will be applied globally (multiple matches). Your input `\ba\w*z\w*\b` will be converted in the background to `/g` flag, i.e., `/a\w*z\w*/g`.
- The `Match Case (regex /i)` ensures that all regex patterns are case-insensitive, but you can uncheck this checkbox to make it case-sensitive. It will add /i to your regex if unchecked. For example, `\ba\w*z\w*\b` becomes `/a\w*z\w*/gi`.
- The `Input/TextArea` option allows you to replace (no search/highlight for input fields) strings in input fields and text areas.
- The `Web page` option should be checked in most cases to search or replace in the whole webpage. If unchecked, the extension will do nothing with plain text on the webpage.
- The `Raw HTML (modify html may break your page)` option is only for testing purposes if you want to edit the raw HTML of a webpage. 
For example, to replace all `<p>` tags with `<h4>` tags, you can input `<p>` in the search field and `<h4>` in the replace field, and `</p>` and `</h4>`.

![image](/images/post/post-7-x-word-replacer/x-word-footer.png)

## Conclusion
There are numerous potential use cases for RegEx in X-Word Replacer, and I hope this post helps you understand how to utilize RegEx in the extension. 

If you have any questions or feedback, feel free to leave a comment below or contact me via email.

And finally, how many email addresses did you find in this post? 😉

## Troubleshooting
Sometimes, if you see a pattern is not highlighted correctly, it might be due to the RegEx pattern.
For example, to highlight IP addresses in this page: https://www.volexity.com/blog/2024/05/15/detecting-compromise-of-cve-2024-3400-on-palo-alto-networks-globalprotect-devices/

If you use this pattern `\b((25[0-5]|(2[0-4][0-9]|1[0-9][0-9]|[1-9]?[0-9]))\.){3}(25[0-5]|(2[0-4][0-9]|1[0-9][0-9]|[1-9]?[0-9]))\b`, it can match all IP addresses in the text,
but because of optional group `|` in the pattern, it recognize an ip address like this `172.233.228.93` as multiple groups, and therefore splitting the match into multiple parts

![image](/images/post/post-7-x-word-replacer/regex-wrong-pattern.png)

**Original text**
![image](/images/post/post-7-x-word-replacer/regex-wrong-pattern-1.png)

**Inaccurate search pattern is used**
![image](/images/post/post-7-x-word-replacer/regex-wrong-pattern-2.png)

To fix it, you can find a better pattern or revise the current one to make it to capture the whole IP address match 
instead of groups. For example, using the non-capturing group `(?:...)` instead of capturing group `(...)`.
```regex
\b(?:(?:25[0-5]|(?:2[0-4][0-9]|1[0-9][0-9]|[1-9]?[0-9]))\.){3}(?:25[0-5]|(?:2[0-4][0-9]|1[0-9][0-9]|[1-9]?[0-9]))\b
```

**Correct search pattern is used**
![image](/images/post/post-7-x-word-replacer/regex-right-pattern.png)


### Demo
<Youtube id="r6iRA3pvxgo" title="Play:Youtube"/>


Multi Highlight and Replace with Regex in X-Word-Replacer

Nowadays, the time required to deliver a market-ready product is becoming shorter and shorter.
In just a few days, a highly efficient team or startup can produce a ready-to-test Minimum Viable Product (MVP).
This rapid development is possible due to the availability of highly modular components provided openly by multiple suppliers worldwide.
In the Angular developer community, one important factor contributing to this speed is the Angular Material component library.

## Angular Material Table
Angular Material offers many useful components, but for displaying multiple items of data, the List and Table components are the most important. While the List component is versatile, the Table component is ideal for displaying raw data from individual tables in a relational database. It is also well-suited for multi-dimensional data visualization.

However, despite the Table component being ready to use with just a few simple setup steps, I found it almost impossible to use for my case, where I need to display data from more than one hundred PostgreSQL tables returned from a backend server.

Below is a [basic setup of the Angular Material Table](https://material.angular.io/components/table/overview#getting-started), version 17.x, showing how columns can be defined in both HTML and TypeScript files.
Where the `displayedColumns` is determined in the `.ts` file, and again explicitly hard-coded in the `.html` file.

![image](/images/post/post-6-angular-material/table.png)

```ts
// component definition
export class TableBasicExample {
  displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
  dataSource = ELEMENT_DATA;
}
// the rest of component
```

and HTML
```html
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
  
  <ng-container matColumnDef="position">
    <th mat-header-cell *matHeaderCellDef> No. </th>
    <td mat-cell *matCellDef="let element"> {{element.position}} </td>
  </ng-container>

  
  <ng-container matColumnDef="name">
    <th mat-header-cell *matHeaderCellDef> Name </th>
    <td mat-cell *matCellDef="let element"> {{element.name}} </td>
  </ng-container>

  
  <ng-container matColumnDef="weight">
    <th mat-header-cell *matHeaderCellDef> Weight </th>
    <td mat-cell *matCellDef="let element"> {{element.weight}} </td>
  </ng-container>

  
  <ng-container matColumnDef="symbol">
    <th mat-header-cell *matHeaderCellDef> Symbol </th>
    <td mat-cell *matCellDef="let element"> {{element.symbol}} </td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
```

## Problem
Consider the use case where my backend is powered by [TypeORM](https://typeorm.io/) and includes entities reflecting the schema of a database with more than a hundred tables.

![image](/images/post/post-6-angular-material/post-6-angular-material.webp)

<Notice type="note">
Assume that the backend provides APIs to:
* `GET` a list of all possible Table APIs
* `GET/PUT/POST...` API to manipulate a given table's data
</Notice>

In this scenario, it's not ideal to create a hundred variants of the table component to display various data sets with different column and row values.
The requirement is to display original or transformed data with a predictable key-value structure, rather than irregular ones.
For instance, the data fed into our table could be in JSON format, as shown below:

```json
{
  "total": 10,
  "data": [
    {
      "position": 4,
      "name": "name-1",
      "age": 30,
      "active": true
    },
    {
      "position": 9,
      "name": "name-2",
      "age": 40,
      "active": false
    }
  ]
}
```

Will be presented in table like the below
| # | position | name   | age | active |
|---|----------|--------|-----|--------|
| 1 | 4        | name-1 | 30  | true   |
| 2 | 9        | name-2 | 40  | false  |

## All-in-one Dynamic Table
The idea is to create a dynamic table based on the Angular Material Table to display whatever feeding data.
The downside of this approach is it cannot handle specific requirements, i.e., to arbitrary color or transform name of a few tables.
The pros is we maintain one but use in many places.

Below is the full source code of the Dynamic Table, that you may want to tweak it for your use case, i.e., only visualize data but not handle logic of fetching data inside the component.

```ts
import {AfterViewInit, Component, Input, OnChanges, OnInit, SimpleChanges, ViewChild} from '@angular/core';
import {CommonModule} from "@angular/common";

import {MatPaginator, MatPaginatorModule} from '@angular/material/paginator';
import {MatSort, MatSortModule} from '@angular/material/sort';
import {MatTableDataSource, MatTableModule} from '@angular/material/table';
import {MatInputModule} from '@angular/material/input';
import {MatFormFieldModule} from '@angular/material/form-field';

import {DatabaseService} from "../../../services/database/database.service";

@Component({
  selector: 'app-dynamic-table',
  standalone: true,
  imports: [MatFormFieldModule, MatInputModule, MatTableModule, MatSortModule, MatPaginatorModule, CommonModule],
  templateUrl: './dynamic-table.component.html',
  styleUrl: './dynamic-table.component.scss'
})
export class DynamicTableComponent  implements AfterViewInit, OnChanges {
  @Input() dbTableName: string = '';

  pageSizes = [10, 30, 100];

  columns: any[] = [];
  displayedColumns: any[] = [];
  dataSource: MatTableDataSource<any> = new MatTableDataSource<any>([]);

  resultsLength = 0;

  @ViewChild(MatPaginator) paginator: MatPaginator | null = null;
  @ViewChild(MatSort) sort: MatSort | null = null;

  constructor(private service: DatabaseService) {
  }

  ngAfterViewInit() {
    this.dataSource.paginator = this.paginator;
    this.dataSource.sort = this.sort;
  }

  ngOnChanges(changes: SimpleChanges) {
    const { dbTableName } = changes;
    if (dbTableName.previousValue !== dbTableName.currentValue) {
      this.getData(dbTableName.currentValue);
    }

  }

  applyFilter(event: Event) {
    const filterValue = (event.target as HTMLInputElement).value;
    this.dataSource.filter = filterValue.trim().toLowerCase();

    if (this.dataSource.paginator) {
      this.dataSource.paginator.firstPage();
    }
  }

  getData(table: string, page= 1, limit = this.pageSizes[0]): void {
    this.service.getData(table, page, limit)
      .subscribe(({ data, total }) => {
        this.resultsLength = total;

        // construct displayed columns
        if (data.length > 0) {
          this.columns = Object.keys(data[0]);
          this.displayedColumns = ['index', ...this.columns];
        }

        const convertedData = data.map((item: any) => {
          this.columns.forEach((column, index) => {
            // if the item contains an object, i.e., a JSON object, an array, etc., convert it to a string to be displayed on the table
            if (item[column] && typeof item[column] === 'object') {
              item[column] = JSON.stringify(item[column]);
            }
          });
          return item;
        });
        this.dataSource = new MatTableDataSource(convertedData);
      });
  }

  handlePageEvent(event: any) {
    this.getData(this.dbTableName, event.pageIndex + 1, event.pageSize);
  }
}
```

And here is its HTML
<Notice type="note">
CSS class used in this HTML is powered by [TailwindCSS](https://tailwindcss.com/)
</Notice>
```html
<div class="mat-elevation-z8 overflow-auto">
  <table mat-table [dataSource]="dataSource" matSort>
    
    <ng-container matColumnDef="index">
      <th mat-header-cell *matHeaderCellDef> # </th>
      <td mat-cell *matCellDef="let row; let i = index;" class="text-gray-300 italic border-r">{{i + 1}}</td>
    </ng-container>

    <ng-container *ngFor="let column of columns; let i = index" [matColumnDef]="column">
      <th mat-header-cell *matHeaderCellDef class="!font-semibold">{{ column }}<span class="text-gray-400 font-light text-xs pl-1">{{i + 1}}</span></th>
      <td mat-cell *matCellDef="let row">{{ row[column] }}</td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>

    
    <tr class="mat-row" *matNoDataRow>
      <td class="mat-cell" colspan="4">No data matching the filter "{{input.value}}"</td>
    </tr>

  </table>

  <mat-paginator
    [length]="resultsLength"
    [pageSizeOptions]="pageSizes"
    (page)="handlePageEvent($event)"
    aria-label="Select page of users"
  />
</div>
```

```scss
:host {
  display: block;
  width: 100%;

  table {
    width: 100%;
  }

  .mat-mdc-form-field {
    width: 100%;
  }

  .mat-mdc-header-row,
  .mat-mdc-cell {
    font-size: 1rem;
  }

  .mat-mdc-row:hover {
    .mat-mdc-cell {
      background-color: rgba(0, 0, 0, 0.04);
    }
  }
}
```

## Conclusion
- The Dynamic Table above is implemented in Angular 17.x and Angular Material 17.x, but I expect it to be reusable in Angular 18.x too.
- The problem we resolved with Dynamic Table is to develop and maintain in one place (component) but re-used in any possible key-value (schema/table) use case.
- If you are looking for a customized table solution for specific data, then Dynamic (unified) Table is not for your use case.
- Some tweaks you may want to consider is to separate the business logic from UI in the sample implementation above, where it handle the Data fetch operation in its code (init & paginating)

Angular Material Dynamic Table for any Data

High Availability Deployment for the Filigran OpenCTI


In a recent scenario, I found myself assisting a friend who had encountered a connectivity challenge with an old version of MS SQL database.
The unique aspect of this situation was the authentication method employed by the database, which relied on Windows Authentication as the default protocol.
This became a particularly intricate issue for my friend, who, as a new employee, found himself amidst a predominantly Windows-oriented environment within the company.
Complicating matters further, my friend, a dedicated Mac user, faced uncertainty in identifying the appropriate person within the organization to seek assistance from.
In light of these circumstances, I stepped in to provide guidance and support, ensuring a successful connection to the MS SQL database on his Mac system.

## Situation

The company my friend works for has its own VPN, which he had already installed on his Mac.
The company policy doesn't allow employees to connect to the database by using a username and password, but only by using Windows Authentication.

He had also installed the Azure Data Studio, because there is no SQL Server Management Studio (SSMS) for Mac.
However, the Azure Data Studio, with Windows Authentication, keeps asking for kinit (Kerberos) credentials, which he doesn't have.
And yes, running `kinit` doesn't help because it is not yet right configured on his Mac.
![image](/images/post/post-4-mssql-from-mac/azure-error.webp)

Trying with DBeaver, it also doesn't work.
While other Windows users can use the `mssql-jdbc_auth` library to connect to the database, the DLLs are not for MacOS.
![image](/images/post/post-4-mssql-from-mac/dbeaver-driver-error.webp)

## Solution
Actually, the solution is quite simple, but it took me a while to figure it out.
The right authentication method is to use the Integrated Windows Auth (NTLM).

I couldn't find out how to use the Integrated Windows Auth (NTLM) with Azure Data Studio, but I found out how to use it with DBeaver and IDE like PyCharm.

### DBeaver
Using the NTLM and the JDBC driver from Microsoft, we can connect to the database with our domain username and password.
![image](/images/post/post-4-mssql-from-mac/dbeaver-ntlm.webp)

### PyCharm
To setup the IntelliJ IDE like PyCharm to connect to the database, we need to do the following:
1. Using `jtds` Driver that does support Windows Authentication
2. Using `Domain Authentication` authentication method
3. Visiting the Advance tab and enable the `USENTLMV2` attribute.

Ref. https://www.jetbrains.com/help/pycharm/db-tutorial-connecting-to-ms-sql-server.html#connect-by-using-windows-domain-authentication-macos-and-linux

![image](/images/post/post-4-mssql-from-mac/pycharm-ntlm.webp)
![image](/images/post/post-4-mssql-from-mac/pycharm-ntlm-2.webp)

## Kerberos and NTLM

Firstly, here is a good article about Kerberos and NTLM:

> Both Kerberos and NTLM are important authentication protocols used in Windows environments. However, Kerberos is more secure, scalable, and compatible with modern systems, while NTLM is more straightforward to configure and manage and works well with older systems.
> https://www.geeksforgeeks.org/difference-between-kerberos-and-ntlm/

It means that in another scenario, we may encounter the opposite situation, where the database supports Kerberos but not NTLM.
In that case, we need to use Kerberos to connect to the database.

### Kerberos
There is a quite good article about using Kerberos on MacOS to connect to MS SQL Server with Windows Authentication in Azure Data Studio below.
* https://medium.com/@chriskuchar/connecting-to-ms-sql-server-from-a-mac-with-windows-authentication-44375ec1953e

The only thing I want to add is where we can find the domain name and KDC server to fill in the `krb5.conf` file.
```editorconfig
# File /etc/krb5.conf 

[libdefaults]
default_realm = DOMAIN_IN_CAPPITAL_LETTERS
 
[realms]
DOMAIN_IN_CAPPITAL_LETTERS = {
kdc = kdc.address.in.domain
}
```

First, the simplest way is to use a Windows machine, that already connected to VPNs if your organization has one,
to run the `cmd` command below to get the domain name and KDC server.
```bash
# I'm not sure if `dig` can list all the domain names and KDC servers, but `nslookup` can.
# If you happen to know how to do it with `dig`, please let me know.
# At least the command `scutil --dns` in Mac will return the Domain Name Servers (DNS) of the VPN.
nslookup -type=any _kerberos._tcp 
```
A list of domain names and KDC servers will be returned, that we can use any of them to fill in the `krb5.conf` file.
![image](/images/post/post-4-mssql-from-mac/kdc-domain.webp)
```editorconfig
# File /etc/krb5.conf 

[libdefaults]
default_realm = DOMAIN.COM
 
[realms]
DOMAIN.COM = {
kdc = kdc-1.domain.com
}
```

<Notice type="info">
  **What if we don't have a real Windows machine?**

  The first option is to setup a Windows Virtual Machine on our Mac. Software that can help us to temporarily standup a Windows VM are Parallels, VMWare, etc.
  You don't need to install VPN on your virtual machine, if it is already enabled on your Mac. In default, your VM uses the same network as your Mac.
  
  And certainly, if you don't want many steps above, just use the Windows VM directly for your work. To connect to the organization's database as a normal Windows user.
  ![image](/images/post/post-4-mssql-from-mac/MSSQL-virtual-machine-windows.drawio.webp)
  ![image](/images/post/post-4-mssql-from-mac/window-vm.webp)
</Notice>

Now, after the `krb5.conf` file is configured, we can get a valid Kerberos ticket by running the command below.
```bash
kinit USERNAME@DEFAULT_REALM
# and enter your password when prompted
```
After it is done without any error, we can see our ticket by running the command below.
```bash
klist
```

With a valid Kerberos ticket, we can connect to the database that supports Kerberos with Azure Data Studio or any client.

## References
* https://stackoverflow.com/questions/8616818/integrated-windows-auth-ntlm-on-a-mac-using-google-chrome-or-safari
* https://learn.rdr-it.io/Le%C3%A7on/authentification-ntlm-et-kerberos/


From MacOS to MS SQL Server with Windows Authentication


The journey began when I sought a straightforward note-taking app for my everyday needs. Several months ago, I experimented with various online note-taking platforms for work. However, my boss, upon noticing my utilization of these apps, emphatically insisted that I refrain from entering any information into online note-taking tools due to security concerns that were not approved by the company.

While my employer provided a robust tool in the form of Confluence—a powerful documentation platform—it posed a challenge. Confluence, designed for long-term documentation, proved cumbersome for quick note-taking. Despite attempting to adapt it for personal note-taking, its lack of convenience and speed became apparent. Creating a quick note in Confluence necessitated opening a new (Chrome) tab, navigating to my personal space, creating a new page, and then initiating the writing process—only deciding later whether to publish or keep it as a draft. However, drafts were not easily visible for later review.

Similar challenges were encountered with other documentation systems such as Google Docs, Notion, and Evernote. What I sought was simplicity and speed—a tool that required minimal deliberation. I envisioned a process where I could open the tool and immediately start typing, devoid of unnecessary steps and decisions. The aim was to easily review and decide whether to retain or delete these quick notes later.

Faced with this need for a secure and convenient note-taking solution, I explored various options, including online note-taking apps, Chrome extensions, and applications. However, none met my criteria, as they were either too complex, had poor user experiences, or lacked the necessary security measures.


## Problems

1.  Documenting tools are powerful but not suitable for quick note-taking.
2.  Trust issue. Online taking notes apps are not secure enough (we are ).
3.  Current Chrome Note-taking extensions don't offer a good user experience and don't guarantee security.

## Solution

### Chrome Extension
What I need in this use case is a simple note-taking app that is secure and convenient to use, that seems to be a Chrome extension.
There are reasons for this choice:
1. Chrome extensions are easy to install and use.
2. Chrome extensions are secure because they are sandboxed ([localStorage](https://developer.chrome.com/docs/extensions/reference/storage/) that only this extension can access).
3. Data is saved in a Local Storage, which is fast to access. 
   - It is not shared with any third party.
   - Can be used offline, which is convenient for me to use on the go.
   - The only downside is that it is not synced across devices and is limited in size, but I don't need it in this use case. Maybe in the future, I will consider to add the option to sync data across devices.
4. It provides a good user experience with `sidePanel`, that users don't need to open new or switch to another tab to take notes.

### Svelte or not Svelte?

Prior to developing Ultra Notes, I had previously gained experience creating a couple of straightforward Firefox add-ons and Chrome extensions using vanilla JavaScript.

Here are the projects I worked on:

*   [Firefox add-on Count Word Professional](https://www.youtube.com/watch?v=8yzfDwRCtvg) in 2013, a decade ago, which has since been deprecated.
*   [Chrome extension X Word Replacer](https://chromewebstore.google.com/detail/x-word-replacer/efcnkaeocmkpckkenjinmdgkbjhajoca) in 2018, five years prior.

However, for a more intricate user experience, specifically incorporating a Directory Tree with multiple levels of folders and reused components,
I opted to use a frontend framework this time.
Among the available options like React and Svelte, I chose Svelte due to its lightweight nature,
a crucial property of Chrome Extension, to respond fast with limited resource in the browser.
Additionally, this decision aligns with my desire to learn Svelte, making this project an ideal opportunity for hands-on learning.
After all, the best way to learn is by doing, isn't it?
Instead of creating the project from scratch, I used the [SvelteKit](https://kit.svelte.dev/) and instruction from [Writing Chrome Extensions using Svelte Kit and Manifest V3](https://dev.to/michmich112/writing-chrome-extensions-using-svelte-kit-and-manifest-v3-mkd).

There is another good writing from the same author, that I think it is good to read before deciding to use Svelte or not in your Chrome extension project, [Why I chose Svelte for my Chrome Extension](https://dev.to/michmich112/why-i-chose-svelte-for-my-chrome-extension-3j4j).

<Notice type="info">
**Cons**

Your IDE will scream bloody murder if you try to use the chrome api's (as its not expecting those to be present).
You will still have to write custom JS to have a deeper interaction with the current tab/webpage (outside of what is offered through the chrome api).

**Caveat**

You are unable to use Svelte on any injected files. This means that you cannot use it to control the DOM on the user's window, only the DOM that is provided for the popups/action/alerts from the Chrome extension context. Thus if your app has to interact or retrieve information from the webpage without the extension popup being open, you'll have to write custom JS to manipulate the DOM, maybe even use JQuery to help you in doing so. This could have been possible previously with Chrome's Manifest V2 but with the deprecation of V2 and stable rollout of V3, many more restrictions have been put in place.
</Notice>

## Conclusion
I developed the extension to cater to my specific needs, with the hope that it proves equally useful for you.
As of the time of writing this post, the Ultra Notes extension stands at version 1.0.8 and is available on the [Chrome Web Store](https://chrome.google.com/webstore/detail/ngfhnakbmjknpcepkeiilllocgbdfehi/) for users' convenience.

The Ultra Notes extension seamlessly utilizes the Chrome built-in feature known as the [sidePanel](https://developer.chrome.com/docs/extensions/reference/sidePanel/), providing a satisfactory user experience.
Looking ahead, to further enhance the user interface and experience in future versions, I plan to incorporate [Content scripts](https://developer.chrome.com/docs/extensions/mv3/content_scripts/). 
For instance, envision a floating button or UI on any web page, surpassing the current Icon button on the top bar.
Achieving this may involve exploring ways to integrate Svelte into the content script or considering the use of another framework, such as React. 
The goal is to continually improve and expand the functionality of the Ultra Notes extension to meet the diverse needs of users.

One possible solution at the moment for bundling needed JS files for the content script is to use [Rollup](https://rollupjs.org/guide/en/), which is the bundler used by SvelteKit, or [Webpack](https://webpack.js.org/).

## References

The extension is hosted on Github at [Chrome Extension Ultra Notes](https://github.com/lhviet/chrome-extension-ultra-notes/), that is currently private, but will be made public/open source soon.
For the community trust, that your data is not sent to any third party, you can check the source code of the extension.

* https://github.com/lhviet/chrome-extension-ultra-notes/
* https://dev.to/michmich112/writing-chrome-extensions-using-svelte-kit-and-manifest-v3-mkd
* https://dev.to/michmich112/why-i-chose-svelte-for-my-chrome-extension-3j4j
* https://rollupjs.org/
* https://webpack.js.org/


Ultra Notes, a simple note taking Chrome extension built with Svelte


Officially, at this moment, we cannot simply add CesiumJS as a normal module into packages.json and use it directly as other libraries such as `lodash.` Instead, to use CesiumJS in your React project, there are some configurations needed.

In this post, I will review the current instructions and supplement with my practical experience to make CesiumJS works best in a Typescript-based ReactJS project.

### 1. Introduction

1. There is a bridge-library introduced by [_Hiroki Inoue_](mailto:hrknoue@gmail.com)  to lets you use CesiumJS easier, called [resium](https://medium.com/r/?url=https%3A%2F%2Fgithub.com%2Fdarwin-education%2Fresium), that you can find the post at
2. Indeed, using the wrapped-library is the easiest way. However, I prefer to have the full control on Cesium, therefore I went to the next solution, that I found by Google. A post from 2017, a little bit outdated.
   The post is useful and goes closer to the truth. However, it is not detailed enough and not a clean solution. Anyway, the solution introduced does work.
3. The best solution I found is officially provided by Cesium at [https://cesium.com/docs/tutorials/cesium-and-webpack/](https://medium.com/r/?url=https%3A%2F%2Fcesium.com%2Fdocs%2Ftutorials%2Fcesium-and-webpack%2F)

It has a cleaner setup and works well. And to make it easier for the configuration, I would like to add some additional steps in the next section, **Setup**.

### 2. Setup

Following the guide step by step at [https://cesium.com/docs/tutorials/cesium-and-webpack/](https://medium.com/r/?url=https%3A%2F%2Fcesium.com%2Fdocs%2Ftutorials%2Fcesium-and-webpack%2F)

1.  Along with packages added in the guide, I also add the package **@types/cesium** to use with Typescript (for function recommendation…)
```
// package.json
{
  "dependencies": {
    ...
    "cesium": "^1.62.0"
  },
  "devDependencies": {
    ...
    "@types/cesium": "^1.59.2",
    "copy-webpack-plugin": "^5.0.4"
  }
}
```

2. My project webpack structure is as below
```
├── config
│   ├── path.js                     // Default path
│   ├── webpack.config.common.js    // Common webpack configurations
│   ├── webpack.config.dev.js       // Inherit from common webpack
│   └── webpack.config.prod.js      // Inherit from common webpack
├── src
├── dist                   // Compiled .js files for deployment
├── node_modules           // installed packages
├── .env                   // dotenv configuration
├── .eslintrc              // Define eslint rules
├── .gitignore             // standard git ignore file
├── package.json           // scripts & packages
├── README.md              
└── yarn.lock
```

**path.js** defines the paths to use in webpack config.
```javascript
// The path to the CesiumJS source code
const cesiumSource = 'node_modules/cesium/Source';
const cesiumWorkers = '../Build/Cesium/Workers';
```

However, to make it easier in the config, I explicitly pre-define all paths we need to use for cesium as below

```javascript
// path.js
'use strict';

const path = require('path');
const process = require('process');

const pathBuilder = (subpath) => path.join(process.cwd(), subpath);

module.exports = {
  ... // Your current defined paths

  // The path to the CesiumJS source code
  cesiumSource: pathBuilder('node_modules/cesium/Source'),
  cesiumSourceAssets: pathBuilder('node_modules/cesium/Source/Assets'),
  cesiumSourceWidgets: pathBuilder('node_modules/cesium/Source/Widgets'),
  cesiumWorkers: pathBuilder('node_modules/cesium/Build/Cesium/Workers'),
};
```
And the most important part, to add CesiumJS into your webpack.config. Since we will use it in both dev & production, I add the configuration into the **webpack.config.common.js** file.
```javascript
// webpack.config.common.js
............... // Your current imports
const CopywebpackPlugin = require('copy-webpack-plugin');
const { DefinePlugin } = require('webpack');

// Common configs
const path = require('./path');

// Everything belongs to cesium is isolated in an object like this
const cesiumConfig = {
  resolve: {
    alias: {
      // CesiumJS module name
      cesiumSource: path.cesiumSource,
    },
  },
  amd: {
    // Enable webpack-friendly use of require in Cesium
    toUrlUndefined: true
  },
  output: {
    // Needed to compile multiline strings in Cesium
    sourcePrefix: '',
  },
  plugins: [
    // Copy Cesium Assets, Widgets, and Workers to a static directory
    new CopywebpackPlugin([ { from: path.cesiumWorkers, to: 'Workers' } ]),
    new CopywebpackPlugin([ { from: path.cesiumSourceAssets, to: 'Assets' } ]),
    new CopywebpackPlugin([ { from: path.cesiumSourceWidgets, to: 'Widgets' } ]),
    new DefinePlugin({
      // Define relative base path in cesium for loading assets
      CESIUM_BASE_URL: JSON.stringify('')
    }),
  ],
};
// Now, using the cesiumConfig in your real configuration
const config = {
  ...cesiumConfig,
  module: {
    unknownContextCritical: false,
    rules: [
      // Make sure you have below rules as default
      {
        test: /\.css$/,
        use: [ 'style-loader', 'css-loader' ]
      }, {
        test: /\.(png|gif|jpg|jpeg|svg|xml|json)$/,
        use: [ 'url-loader' ]
      }
    ],
  },

  resolve: {
    alias: {
      ...cesiumConfig.resolve.alias,
    },    
  },

  plugins: [
    ...., // your current plugins
    ...cesiumConfig.plugins,
  ],
};

module.exports = config;
```

That’s it!!! Now your project is ready to use Cesium.

### 3. Using CesiumJS with Typescript

To make sure you can use CesiumJS with correct UI everywhere, remember to add its CSS at your root component/index

```
// Import Cesium CSS
// You may need tslint:disable: to disable linting rules errors
import 'cesiumSource/Widgets/widgets.css';
```

In your component, let's callCesiumPage.tsx, import and use like below

```typescript jsx
....
// You may need to disable tslint for this require
// Notice that cesiumSource is the alias we defined in 
// webpack.config.common.js resolve.alias 
const cesium: any = require('cesiumSource/Cesium');
// Import @types/cesium to use along with CesiumJS
import { Viewer } from 'cesium';
// Import Cesium CSS if not yet added at root component
import 'cesiumSource/Widgets/widgets.css';

const Root: AnyStyledComponent =
  styled.div({
    width: '100%',
    height: '100%',
  });
const CesiumViewer: AnyStyledComponent = styled.div`
  width: 100%;
  height: 100%;
`;

export interface Props {
  ...
}

/**
 * Project page
 */
class CesiumPage extends Component<Props> {
  private cesiumContainer: RefObject<HTMLDivElement>;

  public constructor(props: Props) {
    super(props);
    this.cesiumContainer = createRef();
  }

  public componentDidMount(): void {
    if (this.cesiumContainer.current) {
      // type Viewer is from @types/cesium
      // whereas, new cesium.Viewer is from the module cesium
      const viewer: Viewer = new cesium.Viewer(this.cesiumContainer.current);
      ........
      console.log('cesium viewer = ', viewer);
    }
  }

  public render(): ReactNode {
    return (
      <Root>
        <CesiumViewer id='cesiumContainer' ref={this.cesiumContainer} />
      </Root>
    );
  }
}
export default CesiumPage;
```

### 4. Misc.

In case your project setup with Jest, you may need an additional configuration in `jest.config.js` like below

```javascript
moduleNameMapper: {
  // Your current configs...,
  'cesiumSource/Cesium$': '<rootDir>/node_modules/cesium/Source/Cesium.js',
},
transformIgnorePatterns: [
  '/node_modules/(?!(?:ol|lodash-es|cesium)/)[^/]*/.*\\.(js|jsx|ts|tsx)$',
],
```

DONE!!!

In case you have better solutions or a simpler configuration, please add a comment or share it with our community.

Thank you.

### 5. References
https://medium.com/@lhviet88/how-to-setup-cesiumjs-to-use-in-reactjs-webpack-and-typescript-a9cd8378f129


How to setup CesiumJS to use in ReactJS, Webpack, and Typescript


When people creating a new NodeJS project, let’s say using ExpressJS, the source code in default is JavaScript.  
However, what if you prefer TypeScript to keep the source code more consolidated? For example, type checking.

In that case, the source code we would like to manage in GIT will be TypeScript (.ts), instead of JavaScript (.js).

By writing source in TypeScript, we may test the localhost by one of two ways below:

*   Run localhost directly by `ts-node` without compiling from TypeScript (.ts) to JavaScript (.js)
*   Compile the code (in TypeScript) to JavaScript first and run as normal. For example: `node ./server.js`

## Options

It looks fine in your localhost, however, to deploy the project into ElasticBeanstalk (NodeJS), it may be tricky.

If you use default configuration to deploy, only code managed by GIT, it means TypeScript, will be deployed to the server. Here, to solve this problem, we have at least 4 options below:

1.  Compile the code in localhost (or CI)to get `.js` files, and add a `.ebignore` to let EB deploy the `.js` files.
2.  Manage both `.ts` and `.js` files in GIT.
3.  Compile and deploy separately. Means we will compile the code into a separate place, i.e., `dist` , copying other needed files, i.e., `package.json, public, views…`, and deploy that directory `dist`.
4.  Customize the `.ebextensions` to compile the source code on ElasticBeanstalk side before the run.

## Solution

The solution 1 looks like the simplest one, however, when using it I met error with `zip process` , which keep raising error Timestamp before 1980.

Solution 2 is not clear and not a good solution. It makes the source code hard to manage and leads to confuse in commits, because not only .ts files change, but also .js files change.

Solution 3 is complicated and request us to find some way to automate it somehow: compiling before deploying, copying necessary files, and must custom the scripts (maybe).

Solution 4 is the best for me, why?

*   GIT manages TypeScripts, the source code we write only
*   Not mess up with the localhost compilation
*   Not many configurations needed

## Steps

Assumes that you already set up an ElasticBeanstalk Application & Environment for NodeJS app. What we need is **Compiling**:

*   **After** the source code deployed (into EC2) and package **installed  
    **`**npm install**`
*   **Before** `npm start` (or anything else in NodeCommand)

What we need to do is simply add a config file into `.ebextensions` , i.e., the `source_compile.config` file below:

```
# source_compile.config
container_commands:
  compile:
    command: "./node_modules/.bin/tsc -p tsconfig.json"
    env:
      PATH: /opt/elasticbeanstalk/node-install/node-v10.15.3-linux-x64/bin/
```

The configure tells the EB to compile the nodejs source code in `/var/current/application` by command `tsc` .

The key we need to notice is the `env`, which enable **node** to be exposed in the **PATH**.

Remember to have the module `typescript` in the dependencies of your package.json file. It will provide the `tsc` in `./bin` directory of the `node_modules` after typescript installed.

```
"dependencies": {
  .......,
  "typescript": "^3.4.5",
  .......  
}
```

If there is no specific `outdir` in your tsconfig.json file, the compiled .js files will be generated in the same location of the .ts files after `command` executed.

In conclusion, to write the source code in TypeScript and deploy it to Elastic Beanstalk, simply add few lines of configurations to compile the code before Node server running will help to solve our problem.

P/s: When taking note this Typescript app Elastic Beanstalk deployment, I found a similar article which may help you. Please reference to [https://www.errietta.me/blog/typescript-circleci-aws-beanstalk/](https://www.errietta.me/blog/typescript-circleci-aws-beanstalk/)

## References
https://medium.com/@lhviet88/deploy-a-typescript-expressjs-into-elasticbeanstalk-nodejs-server-8381e00e7e52


Showing posts fromsveltekit

How To Build a Chrome Web Extension with Svelte