fix: moved widget from DOM to shadowDOM

docs/readme.md

@@ -0,0 +1,2 @@
+## Documentation for Font Tester
+

package.json

@@ -12,6 +12,7 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-scripts": "5.0.1",
+    "react-shadow": "^20.5.0",
     "web-vitals": "^2.1.4"
   },
   "scripts": {
@@ -53,10 +54,13 @@
     "node-fetch": "^3.3.2",
     "postcss": "^8.4.41",
     "postcss-loader": "^8.1.1",
+    "postcss-nested": "^6.2.0",
     "postcss-preset-env": "^10.0.2",
     "postcss-simple-vars": "^7.0.1",
+    "raw-loader": "^4.0.2",
     "style-loader": "^4.0.0",
     "tailwindcss": "^3.4.10",
+    "to-string-loader": "^1.2.0",
     "webpack": "^5.93.0",
     "webpack-assets-manifest": "^5.2.1",
     "webpack-cli": "^5.1.4",

readme.md

@@ -12,7 +12,19 @@ one of the reason I created Font Tester.
 
 Now you can go to your website, click on the extension, test fonts and pick the one you like along with the code.
 
-![](./docs/demo/font-tester.gif)
+![font tester demo](./docs/demo/font-tester.gif)
+
+### Add to waitlist
+
+The extension is submitted to store for review, once its done, you'll be notified. 
+
+Join the waitlist with others: [Join waitlist](https://getwaitlist.com/waitlist/19742)
+
+or 
+
+---
+You can either download the dist folder from releases and load it manually
+
 
 ## Whom is the meant for?
 * Frontend developers.
@@ -43,14 +55,20 @@ Though the extension is free to use forever, there is an optional license you ca
 
 Pluse you get more advanced features, early access, Upcoming Edge/Firefox addons.
 
-
+Pre-order from store at a limited period discount price: [License](https://foxcraft.gumroad.com/l/font-tester/preorder)
 
 ---
 **Other ways to support open-source**
 
 * Order a [custom work](https://tally.so/r/woO0Kx).
 * Order a premium SaaS [Landing page template](https://foxcraft.gumroad.com/l/ai-saas-landingpage/saasboost)
 
+
+## Current limitations
+* Cannot execute the script in chrome extension store, its blocked by default
+* If the font tester doesn't open even after double click on a website, please file an issue
+
+
 ## Other free and open-source tools
 
 * [Awesome landing pages](https://github.com/PaulleDemon/awesome-landing-pages)
@@ -83,4 +101,7 @@ This is because the extension requires to point to the build folder, using this
 won't have to rebuild on every save.
 
 For development you can also use 
-`npm start`, but you won't be able to load it as extension but as a react app.
+`npm start`, but you won't be able to load it as extension but as a react app.
+
+Some important notes:
+* The extension attaches to a [shadowdom](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_shadow_DOM), this is to avoid page style affecting the widget style.

src/App.js

@@ -21,7 +21,7 @@ const BMC_IMG = `https://raw.githubusercontent.com/PaulleDemon/landing-pages-bro
 
 
 const defaultPosition = {
-	x: (window.innerWidth - 300) - 15,
+	x: (window.innerWidth - 300) - 25,
 	y: (window.innerHeight - 700) - 15
 }
 
@@ -145,6 +145,7 @@ function App() {
 
 	const handleClose = () => {
 		// console.log("run time: ", chrome.runtime)
+		onReset() // reset the selection before closing
         chrome.runtime.sendMessage({ action: 'widgetClosed' })
     }
 

src/codeSection.js

@@ -78,10 +78,10 @@ function CodeSection({fontStyle, type="import"}){
 
     const onCopy = () => {
         navigator.clipboard.writeText(codeRef.current?.innerText).then(function() {
-            message.success("Copied to clipboard")
+            message.success({content: "Copied to clipboard"})  
 
         }, function(err) {
-            message.error("Error copying to clipboard")
+            message.error({content: "Error copying to clipboard"})
         })
     }