From 1ddfbe983ab48d2d3087b2c1d050ec41c400494a Mon Sep 17 00:00:00 2001 From: xiaojiecong Date: Thu, 9 Feb 2023 15:34:08 +0800 Subject: [PATCH] chore: update examples --- examples/crx-basic/src/content.js | 2 +- examples/crx-basic/src/popup.js | 1 + examples/crx-basic/src/style.css | 10 + .../vite.config.js | 5 +- examples/crx-devtools/panel.html | 20 +- examples/crx-devtools/src/devtools.js | 8 +- .../crx-executescript-files/src/background.js | 2 +- .../src/background.js | 10 +- examples/crx-jquery/package.json | 16 -- .../crx-jquery/src/assets/icons/icon128.png | Bin 5174 -> 0 bytes .../crx-jquery/src/assets/icons/icon16.png | Bin 406 -> 0 bytes .../crx-jquery/src/assets/icons/icon48.png | Bin 681 -> 0 bytes examples/crx-jquery/src/background.js | 1 - examples/crx-jquery/src/content.js | 6 - examples/crx-jquery/src/main.js | 7 - examples/crx-jquery/src/manifest.json | 22 -- examples/crx-react-sandbox/README.md | 9 + .../options.html} | 6 +- examples/crx-react-sandbox/package.json | 20 ++ examples/crx-react-sandbox/popup.html | 12 ++ examples/crx-react-sandbox/sandbox.html | 12 ++ examples/crx-react-sandbox/src/Popup.tsx | 37 ++++ examples/crx-react-sandbox/src/main.tsx | 7 + examples/crx-react-sandbox/src/manifest.json | 13 ++ examples/crx-react-sandbox/src/sandbox.tsx | 21 ++ examples/crx-react-sandbox/tsconfig.json | 21 ++ examples/crx-react-sandbox/tsconfig.node.json | 8 + .../vite.config.ts} | 6 +- examples/crx-solid/src/manifest.json | 2 +- examples/crx-vue-antd-bookmarks/src/App.vue | 191 +++++++++--------- examples/crx-vue-drawer/src/background.ts | 1 + .../assets/click-here.png | Bin .../src/content-scripts/App.vue | 2 +- examples/crx-vue-multi-page/src/manifest.json | 2 +- examples/crx-vue/src/App.vue | 5 + .../assets/click-here.png | Bin examples/crx-vue/src/content-scripts/App.vue | 2 +- examples/crx-vue/src/manifest.json | 2 +- 38 files changed, 312 insertions(+), 177 deletions(-) create mode 100644 examples/crx-basic/src/style.css delete mode 100644 examples/crx-jquery/package.json delete mode 100644 examples/crx-jquery/src/assets/icons/icon128.png delete mode 100644 examples/crx-jquery/src/assets/icons/icon16.png delete mode 100644 examples/crx-jquery/src/assets/icons/icon48.png delete mode 100644 examples/crx-jquery/src/background.js delete mode 100644 examples/crx-jquery/src/content.js delete mode 100644 examples/crx-jquery/src/main.js delete mode 100644 examples/crx-jquery/src/manifest.json create mode 100644 examples/crx-react-sandbox/README.md rename examples/{crx-jquery/popup.html => crx-react-sandbox/options.html} (62%) create mode 100644 examples/crx-react-sandbox/package.json create mode 100644 examples/crx-react-sandbox/popup.html create mode 100644 examples/crx-react-sandbox/sandbox.html create mode 100644 examples/crx-react-sandbox/src/Popup.tsx create mode 100644 examples/crx-react-sandbox/src/main.tsx create mode 100644 examples/crx-react-sandbox/src/manifest.json create mode 100644 examples/crx-react-sandbox/src/sandbox.tsx create mode 100644 examples/crx-react-sandbox/tsconfig.json create mode 100644 examples/crx-react-sandbox/tsconfig.node.json rename examples/{crx-jquery/vite.config.js => crx-react-sandbox/vite.config.ts} (65%) rename examples/crx-vue-multi-page/src/{content-scripts => }/assets/click-here.png (100%) rename examples/crx-vue/src/{content-scripts => }/assets/click-here.png (100%) diff --git a/examples/crx-basic/src/content.js b/examples/crx-basic/src/content.js index d1a8612..d6cd560 100644 --- a/examples/crx-basic/src/content.js +++ b/examples/crx-basic/src/content.js @@ -1 +1 @@ -console.log('content script') \ No newline at end of file +console.log('content script') diff --git a/examples/crx-basic/src/popup.js b/examples/crx-basic/src/popup.js index 41d2f70..c35a02f 100644 --- 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 new file mode 100644 index 0000000..eb6916c --- /dev/null +++ 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; +} \ No newline at end of file diff --git a/examples/crx-contentscript-sass-less/vite.config.js b/examples/crx-contentscript-sass-less/vite.config.js index 2aefbcd..e3daf44 100644 --- 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 index 623a9f5..533888c 100644 --- a/examples/crx-devtools/panel.html +++ b/examples/crx-devtools/panel.html @@ -1,12 +1,12 @@ - - - - - Document - - - panel - - \ No newline at end of file + + + + + Document + + + panel + + diff --git a/examples/crx-devtools/src/devtools.js b/examples/crx-devtools/src/devtools.js index d49ed8d..1fe1ad2 100644 --- 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 index ad346a8..3231685 100644 --- 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 index 30a597e..88e0c28 100644 --- 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 deleted file mode 100644 index dfb3aca..0000000 --- a/examples/crx-jquery/package.json +++ /dev/null @@ -1,16 +0,0 @@ -{ - "name": "crx-jquery", - "version": "0.0.1", - "scripts": { - "dev": "vite build --watch --mode development", - "build": "vite build" - }, - "devDependencies": { - "vite-plugin-crx-mv3": "workspace:*", - "vite": "^3.0.9" - }, - "license": "ISC", - "dependencies": { - "jquery": "^3.6.1" - } -} diff --git a/examples/crx-jquery/src/assets/icons/icon128.png b/examples/crx-jquery/src/assets/icons/icon128.png deleted file mode 100644 index aa475e0fd6117e2f367f598c2bb2cc9a28c7fa71..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 5174 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 diff --git a/examples/crx-jquery/src/assets/icons/icon48.png b/examples/crx-jquery/src/assets/icons/icon48.png deleted file mode 100644 index e727b94b94755ec7fcbbd156ea5b49bffa268e2b..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 681 zcmeAS@N?(olHy`uVBq!ia0vp^Y9P$P3?%12mYf5m7>k44ofvPP)Tsw@I14-?iy0WW zg+Z8+Vb&Z8py0g#pAc6dZJhRBA?CkAEEvW7mj^NuKqLso{8t7_#X-4haZoi%U=ig+ z5LYqgze58^rF`6fMX({7Km)-HAXhsJECn-75oQ9!aG=RRyC8-D-JlFq-|$}v>;|BL z5Lba1VADVjivd{&Bvo?3)+K|qt0#dJsKi5U2RZ|)CGLM=gq|eOhh8N?e!&bZ0TXvV zoUAbQ?SHF^ulJ=cu2-8a^RkuYXm{&oiJuR9c|One`mJ~T_|m)cIbQ2+bYcry`+fiN z*-OvgJ~-8bZL*w%)N`$x=^ov?{Veq#z5oU=pQnpsNX49^mv4q0G7w=6U{&p(L^1IsPpWip+=)GU_xA7Xc-m;q;?uR@v zZt-1x>yyFxZN5`w7H&umtec?m=8~3E-~8Tq@2B6qOW(&XI;`9EIqI!YyHcEzfxnrCf70^@(OkRle=Jb<|B_^BJXzRyKFYGv%5XF!8-o%d%4cA aY4S_!l?6UZ>mLDzH-o3EpUXO@geCy+9y0a- diff --git a/examples/crx-jquery/src/background.js b/examples/crx-jquery/src/background.js deleted file mode 100644 index 2934828..0000000 --- a/examples/crx-jquery/src/background.js +++ /dev/null @@ -1 +0,0 @@ -console.log(1) \ No newline at end of file diff --git a/examples/crx-jquery/src/content.js b/examples/crx-jquery/src/content.js deleted file mode 100644 index 362d80a..0000000 --- a/examples/crx-jquery/src/content.js +++ /dev/null @@ -1,6 +0,0 @@ -import $ from 'jquery' - -window.onload = function(){ - console.log($('body')) -} - diff --git a/examples/crx-jquery/src/main.js b/examples/crx-jquery/src/main.js deleted file mode 100644 index 37f5888..0000000 --- a/examples/crx-jquery/src/main.js +++ /dev/null @@ -1,7 +0,0 @@ -import $ from 'jquery' - -window.onload = function(){ - $('#btn').on('click',function(){ - alert('hello world') - }) -} \ No newline at end of file diff --git a/examples/crx-jquery/src/manifest.json b/examples/crx-jquery/src/manifest.json deleted file mode 100644 index af7b21c..0000000 --- a/examples/crx-jquery/src/manifest.json +++ /dev/null @@ -1,22 +0,0 @@ -{ - "name": "crx-jquery", - "description": "A Chrome extension demo.", - "version": "0.0.1", - "icons": { - "16": "assets/icons/icon16.png", - "48": "assets/icons/icon48.png", - "128": "assets/icons/icon128.png" - }, - "action": { - "default_title": "Hello World", - "default_popup": "../popup.html" - }, - "background": { - "service_worker": "background.js" - }, - "content_scripts": [{ - "matches": [ "" ], - "js": ["content.js"] - }], - "manifest_version": 3 -} diff --git a/examples/crx-react-sandbox/README.md b/examples/crx-react-sandbox/README.md new file mode 100644 index 0000000..186acd9 --- /dev/null +++ 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 b/examples/crx-react-sandbox/options.html similarity index 62% rename from examples/crx-jquery/popup.html rename to examples/crx-react-sandbox/options.html index 06c9f4c..1d9e3b7 100644 --- a/examples/crx-jquery/popup.html +++ b/examples/crx-react-sandbox/options.html @@ -6,9 +6,7 @@ title -
- -
- +
+ diff --git a/examples/crx-react-sandbox/package.json b/examples/crx-react-sandbox/package.json new file mode 100644 index 0000000..8ed179a --- /dev/null +++ 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:*" + } +} \ No newline at end of file diff --git a/examples/crx-react-sandbox/popup.html b/examples/crx-react-sandbox/popup.html new file mode 100644 index 0000000..a6044b2 --- /dev/null +++ b/examples/crx-react-sandbox/popup.html @@ -0,0 +1,12 @@ + + + + + + + + +
+ + + diff --git a/examples/crx-react-sandbox/sandbox.html b/examples/crx-react-sandbox/sandbox.html new file mode 100644 index 0000000..d53031b --- /dev/null +++ b/examples/crx-react-sandbox/sandbox.html @@ -0,0 +1,12 @@ + + + + + + + + +
+ + + diff --git a/examples/crx-react-sandbox/src/Popup.tsx b/examples/crx-react-sandbox/src/Popup.tsx new file mode 100644 index 0000000..97294eb --- /dev/null +++ b/examples/crx-react-sandbox/src/Popup.tsx @@ -0,0 +1,37 @@ +import { useEffect, useRef, useState } from "react" + +function Popup() { + const iframeRef = useRef(null) + const [count, setCount] = useState(""); + + useEffect(() => { + window.addEventListener("message", (event) => { + setCount(event.data) + console.log("EVAL output: " + event.data) + }) + }, []) + + return ( +
+ +
+ Use eval to execute "10 + 20": {count} +
+