chore: update examples

Jervis2049 · Feb 9, 2023 · 1ddfbe9 · 1ddfbe9
1 parent e706934
commit 1ddfbe9
Show file tree

Hide file tree

Showing 38 changed files with 312 additions and 177 deletions.
diff --git a/examples/crx-basic/src/content.js b/examples/crx-basic/src/content.js
@@ -1 +1 @@
-console.log('content script')
+console.log('content script')
diff --git a/examples/crx-basic/src/popup.js b/examples/crx-basic/src/popup.js
@@ -1 +1,2 @@
+import './style.css'
 console.log('popup')
diff --git a/examples/crx-basic/src/style.css b/examples/crx-basic/src/style.css
@@ -0,0 +1,10 @@
+body{
+    width: 200px;
+    height: 50px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 14px;
+    font-weight: bold;
+    background-color: blueviolet;
+}
diff --git a/examples/crx-contentscript-sass-less/vite.config.js b/examples/crx-contentscript-sass-less/vite.config.js
@@ -1,7 +1,7 @@
 import { defineConfig } from 'vite'
 import crx from 'vite-plugin-crx-mv3'
 
-export default defineConfig(({mode}) => {
+export default defineConfig(({ mode }) => {
   return {
     plugins: [
       crx({
@@ -10,7 +10,6 @@ export default defineConfig(({mode}) => {
     ],
     build: {
       emptyOutDir: mode == 'production'
-    },
+    }
   }
 })
-
diff --git a/examples/crx-devtools/panel.html b/examples/crx-devtools/panel.html
@@ -1,12 +1,12 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta http-equiv="X-UA-Compatible" content="IE=edge">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Document</title>
-</head>
-<body>
-  panel
-</body>
-</html>
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+  </head>
+  <body>
+    panel
+  </body>
+</html>
diff --git a/examples/crx-devtools/src/devtools.js b/examples/crx-devtools/src/devtools.js
@@ -1,15 +1,13 @@
 chrome.devtools.panels.create(
   'DevPanel',
   null,
-  '../panel.html',
-  function (panel) {
-
-  }
+  'panel.html',
+  function (panel) {}
 )
 
 chrome.devtools.panels.elements.createSidebarPane(
   'Sidebar',
   function (sidebar) {
-    sidebar.setPage('../sidebar.html')
+    sidebar.setPage('sidebar.html')
   }
 )
diff --git a/examples/crx-executescript-files/src/background.js b/examples/crx-executescript-files/src/background.js
@@ -1,5 +1,5 @@
 chrome.action.onClicked.addListener((tab) => {
-  if (!tab.url.includes('chrome://')) {
+  if (!tab.url?.startsWith('chrome://')) {
     chrome.scripting.executeScript({
       target: { tabId: tab.id },
       files: ['dynamicScript.js']

diff --git a/examples/crx-executescript-function/src/background.js b/examples/crx-executescript-function/src/background.js
@@ -1,12 +1,12 @@
 function setBgColor() {
-  document.body.style.backgroundColor = '#ff0';
+  document.body.style.backgroundColor = '#f00'
 }
 
-chrome.action.onClicked.addListener((tab) => {    
-  if(!tab.url.includes("chrome://")) {
+chrome.action.onClicked.addListener((tab) => {
+  if (!tab.url?.startsWith('chrome://')) {
     chrome.scripting.executeScript({
       target: { tabId: tab.id },
       function: setBgColor
-    });
+    })
   }
-});
+})
diff --git a/examples/crx-jquery/package.json b/examples/crx-jquery/package.json
diff --git a/examples/crx-jquery/src/assets/icons/icon128.png b/examples/crx-jquery/src/assets/icons/icon128.png
diff --git a/examples/crx-jquery/src/assets/icons/icon16.png b/examples/crx-jquery/src/assets/icons/icon16.png
diff --git a/examples/crx-jquery/src/assets/icons/icon48.png b/examples/crx-jquery/src/assets/icons/icon48.png
diff --git a/examples/crx-jquery/src/background.js b/examples/crx-jquery/src/background.js
diff --git a/examples/crx-jquery/src/content.js b/examples/crx-jquery/src/content.js
diff --git a/examples/crx-jquery/src/main.js b/examples/crx-jquery/src/main.js
diff --git a/examples/crx-jquery/src/manifest.json b/examples/crx-jquery/src/manifest.json
diff --git a/examples/crx-react-sandbox/README.md b/examples/crx-react-sandbox/README.md
@@ -0,0 +1,9 @@
+## Usage
+The dist directory will be created after starting the project.Then Open chrome://extensions/ and import the dist directory.
+```bash
+# development
+pnpm dev
+
+# production
+pnpm build
+```
diff --git a/examples/crx-jquery/popup.html → examples/crx-react-sandbox/options.html b/examples/crx-jquery/popup.html → examples/crx-react-sandbox/options.html
@@ -6,9 +6,7 @@
     <title>title</title>
   </head>
   <body>
-    <div id="app">
-      <button id="btn">button</button>
-    </div>
-    <script type="module" src="./src/main.js"></script>
+    <div id="app"></div>
+    <script type="module" src="./src/main.tsx"></script>
   </body>
 </html>
diff --git a/examples/crx-react-sandbox/package.json b/examples/crx-react-sandbox/package.json
@@ -0,0 +1,20 @@
+{
+  "name": "crx-react-sandbox",
+  "version": "0.0.1",
+  "scripts": {
+    "dev": "vite build --watch --mode development",
+    "build": "vite build"
+  },
+  "dependencies": {
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
+  },
+  "devDependencies": {
+    "@types/react": "^17.0.33",
+    "@types/react-dom": "^17.0.10",
+    "@vitejs/plugin-react": "^1.0.7",
+    "vite": "^3.0.9",
+    "typescript": "^4.5.4",
+    "vite-plugin-crx-mv3": "workspace:*"
+  }
+}
diff --git a/examples/crx-react-sandbox/popup.html b/examples/crx-react-sandbox/popup.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title></title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="./src/main.tsx"></script>
+  </body>
+</html>
diff --git a/examples/crx-react-sandbox/sandbox.html b/examples/crx-react-sandbox/sandbox.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title></title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="./src/sandbox.tsx"></script>
+  </body>
+</html>
diff --git a/examples/crx-react-sandbox/src/Popup.tsx b/examples/crx-react-sandbox/src/Popup.tsx
@@ -0,0 +1,37 @@
+import { useEffect, useRef, useState } from "react"
+
+function Popup() {
+  const iframeRef = useRef<HTMLIFrameElement>(null)
+  const [count, setCount] = useState("");
+
+  useEffect(() => {
+    window.addEventListener("message", (event) => {
+      setCount(event.data)
+      console.log("EVAL output: " + event.data)
+    })
+  }, [])
+
+  return (
+    <div
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        padding: 12,
+        width: 175
+      }}>
+      <button
+        onClick={() => {
+          setCount(count + 1)
+          iframeRef.current?.contentWindow?.postMessage("10 + 20", "*")
+        }}>
+        Trigger iframe eval
+      </button>
+      <div style={{marginTop:5}}>
+        Use eval to execute "10 + 20": {count}
+      </div>
+      <iframe src="sandbox.html" ref={iframeRef} style={{ display: "none" }} />
+    </div>
+  )
+}
+
+export default Popup
diff --git a/examples/crx-react-sandbox/src/main.tsx b/examples/crx-react-sandbox/src/main.tsx
@@ -0,0 +1,7 @@
+import ReactDOM from 'react-dom'
+import Popup from './Popup.tsx'
+
+ReactDOM.render(
+  <Popup />,
+  document.getElementById('app')
+)
diff --git a/examples/crx-react-sandbox/src/manifest.json b/examples/crx-react-sandbox/src/manifest.json
@@ -0,0 +1,13 @@
+{
+  "name": "crx-react-sandbox",
+  "description": "A Chrome extension demo.",
+  "version": "1.0.0",
+  "icons": {},
+  "action": {
+    "default_popup": "../popup.html"
+  },
+  "sandbox":{
+    "pages": ["../sandbox.html"]
+  },
+  "manifest_version": 3
+}
diff --git a/examples/crx-react-sandbox/src/sandbox.tsx b/examples/crx-react-sandbox/src/sandbox.tsx
@@ -0,0 +1,21 @@
+import ReactDOM from 'react-dom'
+
+window.addEventListener("message", async function (event) {
+  const source = event.source as {
+    window: WindowProxy
+  }
+  source.window.postMessage(eval(event.data), event.origin)
+})
+
+
+ReactDOM.render(
+  <div
+    style={{
+        display: "flex",
+        flexDirection: "column",
+        padding: 16
+      }}>
+      HELLO SANDBOX
+  </div>,
+  document.getElementById('app')
+)
diff --git a/examples/crx-react-sandbox/tsconfig.json b/examples/crx-react-sandbox/tsconfig.json
@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "allowJs": false,
+    "skipLibCheck": false,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "resolveJsonModule": true,
+    "isolatedModules": false,
+    "noEmit": true,
+    "jsx": "react-jsx"
+  },
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}
diff --git a/examples/crx-react-sandbox/tsconfig.node.json b/examples/crx-react-sandbox/tsconfig.node.json
@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "module": "esnext",
+    "moduleResolution": "node"
+  },
+  "include": ["vite.config.ts"]
+}
diff --git a/examples/crx-jquery/vite.config.js → examples/crx-react-sandbox/vite.config.ts b/examples/crx-jquery/vite.config.js → examples/crx-react-sandbox/vite.config.ts
@@ -1,15 +1,19 @@
 import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
 import crx from 'vite-plugin-crx-mv3'
 
 export default defineConfig(({ mode }) => {
   return {
     plugins: [
+      react(),
       crx({
-        manifest: './src/manifest.json'
+        manifest: './src/manifest.json',
       }),
     ],
     build: {
       emptyOutDir: mode == 'production',
+      rollupOptions: {
+      }
     },
   }
 })
diff --git a/examples/crx-solid/src/manifest.json b/examples/crx-solid/src/manifest.json
@@ -8,7 +8,7 @@
     "128": "assets/icons/icon128.png"
   },
   "action": {
-    "default_title": "Hello World",
+    "default_title": "crx-solid",
     "default_popup": "../popup.html"
   },
   "background": {
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		console.log('content script')
		console.log('content script')