v1.0.1

use Shadow DOM to isolate CSS injection

Author: khang-nd

README.md

@@ -2,7 +2,7 @@
 
 ![spc-screenshot](screenshot.png)
 
-I use special characters frequently and I'm a dev.
+I use special characters here and there frequently, so there is this.
 
 ## Installation
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "spc",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "A browser extension to insert special characters.",
   "repository": "https://github.com/khang-nd/spc",
   "license": "MIT",

public/manifest.json

@@ -2,7 +2,7 @@
   "manifest_version": 2,
   "name": "SPC",
   "description": "Inserting special characters made easy.",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "homepage_url": "https://github.com/khang-nd/spc",
   "permissions": ["contextMenus", "activeTab"],
   "icons": { "48": "icon.png" },
@@ -13,11 +13,12 @@
   "content_scripts": [
     {
       "matches": ["<all_urls>"],
-      "css": ["build/main.css"]
+      "js": ["build/main.css.js"]
     }
   ],
+  "web_accessible_resources": ["build/main.css"],
   "commands": {
-    "open-popup": {
+    "open_popup": {
       "description": "Activate the extension",
       "suggested_key": {
         "default": "Alt+Period"

rollup.config.js

@@ -40,6 +40,7 @@ function buildConfig(fileName, plugins = []) {
       name: fileName,
       format: "iife",
       sourcemap: false,
+      compact: true,
       file: `public/build/${fileName}`,
     },
     plugins: [resolve(), commonjs(), ...plugins],
@@ -48,6 +49,7 @@ function buildConfig(fileName, plugins = []) {
 
 export default [
   buildConfig("background.js"),
+  buildConfig("main.css.js"),
   buildConfig("main.js", [
     svelte({
       compilerOptions: { dev: !production },

src/Popup.svelte

@@ -3,10 +3,10 @@
   import { onMount } from "svelte";
   import { Tabs, Tab, TabContent } from "svelte-materialify/dist";
   import { isFormElement } from "./utils";
+  import { popup } from "./identifiers";
 
   /** @type {Document} */
   export let document;
-  export let id;
   export let offset;
 
   const { activeElement } = document;
@@ -29,14 +29,20 @@
     self.remove();
   }
 
+  function dismissWithESC({ key }) {
+    if (key === "Escape") dismiss();
+  }
+
   function stopPropagation(event) {
     event.stopPropagation();
   }
 
   onMount(() => {
     document.addEventListener("click", dismiss);
     self.addEventListener("click", stopPropagation);
+    self.addEventListener("keyup", dismissWithESC);
     activeElement.addEventListener("click", stopPropagation);
+    activeElement.addEventListener("keyup", dismissWithESC);
   });
 
   $: if (searchText) {
@@ -49,7 +55,7 @@
   }
 </script>
 
-<main bind:this={self} {id} style="top: {offset.y}px; left: {offset.x}px">
+<main bind:this={self} id={popup} style="top: {offset.y}px; left: {offset.x}px">
   <header>
     <input type="search" placeholder="Search..." bind:value={searchText} />
     <button aria-label="Close" on:click={dismiss}>✕</button>
@@ -73,11 +79,8 @@
 </main>
 
 <style>
-  :root {
-    --spacing: 0.5em;
-  }
-
   #spc {
+    --spacing: 0.5em;
     z-index: 9999;
     position: absolute;
     background: #f8f8f8;

src/identifiers.js

@@ -0,0 +1,2 @@
+export const wrapper = "spc-wrapper";
+export const popup = "spc";

src/main.css.js

@@ -0,0 +1,17 @@
+// inject CSS to the Shadow DOM
+// to avoid CSS collision with the main DOM
+
+import browser from "webextension-polyfill";
+import { wrapper as id } from "./identifiers";
+
+window.addEventListener("load", () => {
+  const wrapper = document.createElement("div");
+  const link = document.createElement("link");
+  const shadow = wrapper.attachShadow({ mode: "open" });
+
+  wrapper.id = id;
+  link.rel = "stylesheet";
+  link.href = browser.extension.getURL("build/main.css");
+  shadow.append(link);
+  document.body.append(wrapper);
+});

src/main.js

@@ -1,20 +1,21 @@
 import Popup from "./Popup.svelte";
 import { isEditable } from "./utils";
+import * as id from "./identifiers";
 
-const id = "spc";
 const { activeElement } = document;
 let popup = null;
 
 if (isEditable(activeElement)) {
+  const { shadowRoot } = document.querySelector("#" + id.wrapper);
   const { top, left, height } = activeElement.getBoundingClientRect();
   const x = left + 3;
   const y = top + height;
 
-  popup = document.querySelector("#" + id);
+  popup = shadowRoot.querySelector("#" + id.popup);
   popup && popup.remove();
   popup = new Popup({
-    target: document.body,
-    props: { document, id, offset: { x, y } },
+    target: shadowRoot,
+    props: { document, offset: { x, y } },
   });
 }