We could not find what you were looking for.
Please contact the owner of the site that linked you to the original URL and let them know their link is broken.
src \u4f5c\u4e3a\u6e90\u7801\u76ee\u5f55",id:"\u4f7f\u7528-src-\u4f5c\u4e3a\u6e90\u7801\u76ee\u5f55",level:3},{value:"\u6307\u5b9a\u5165\u53e3\u6587\u4ef6",id:"\u6307\u5b9a\u5165\u53e3\u6587\u4ef6",level:3},{value:"\u4f7f\u7528\u6a21\u677f\u6587\u4ef6",id:"\u4f7f\u7528\u6a21\u677f\u6587\u4ef6",level:3},{value:"Development Sever",id:"development-sever",level:2},{value:"\u52a0\u8f7d\u6269\u5c55",id:"\u52a0\u8f7d\u6269\u5c55",level:3},{value:"\u9009\u62e9\u4e00\u4e2a\u6307\u5b9a\u7684\u76ee\u6807\u6587\u4ef6",id:"\u9009\u62e9\u4e00\u4e2a\u6307\u5b9a\u7684\u76ee\u6807\u6587\u4ef6",level:3},{value:"\u53bb\u6389 source maps",id:"\u53bb\u6389-source-maps",level:3},{value:"\u6307\u5b9a Server port \u548c websocket",id:"\u6307\u5b9a-server-port-\u548c-websocket",level:3},{value:"\u53d1\u5e03\u4e00\u4e2a\u4ea7\u54c1\u5305",id:"\u53d1\u5e03\u4e00\u4e2a\u4ea7\u54c1\u5305",level:2},{value:"\u5e38\u89c4\u7684 build",id:"\u5e38\u89c4\u7684-build",level:3},{value:"\u8bbe\u7f6e\u76ee\u6807",id:"\u8bbe\u7f6e\u76ee\u6807",level:3},{value:"\u6dfb\u52a0\u81ea\u5b9a\u4e49 tag",id:"\u6dfb\u52a0\u81ea\u5b9a\u4e49-tag",level:3},{value:"\u53bb\u6389 source maps",id:"\u53bb\u6389-source-maps-1",level:3},{value:"\u5176\u4ed6\u4f18\u5316",id:"\u5176\u4ed6\u4f18\u5316",level:3}];function t(e){const n={a:"a",admonition:"admonition",code:"code",h1:"h1",h2:"h2",h3:"h3",img:"img",li:"li",ol:"ol",p:"p",pre:"pre",...(0,r.a)(),...e.components};return(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)(n.h1,{id:"\u5f00\u53d1\u5de5\u4f5c\u6d41",children:"\u5f00\u53d1\u5de5\u4f5c\u6d41"}),"\n",(0,l.jsxs)(n.p,{children:["\u8fd9\u91cc\u4e3b\u8981\u4ecb\u7ecd\u4f7f\u7528 ",(0,l.jsx)(n.code,{children:"plasmo"})," \u5f00\u53d1\u6d4f\u89c8\u5668\u6269\u5c55\u7684\u5de5\u4f5c\u6d41\u3002"]}),"\n",(0,l.jsx)(n.h2,{id:"\u521b\u5efa\u9879\u76ee",children:"\u521b\u5efa\u9879\u76ee"}),"\n",(0,l.jsxs)(n.p,{children:["\u901a\u8fc7\u5982\u4e0b\u7684\u547d\u4ee4\u521b\u5efa ",(0,l.jsx)(n.code,{children:"plasmo"})," \u9879\u76ee\uff1a"]}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-shell",children:"pnpm create plasmo\n# OR\nyarn create plasmo\n# OR\nnpm create plasmo\n"})}),"\n",(0,l.jsx)(n.p,{children:"\u5982\u679c\uff0c\u8df3\u8fc7\u540d\u5b57\u7684\u63d0\u793a\uff0c\u6dfb\u52a0\u4e00\u4e2a\u6269\u5c55\u7684\u540d\u5b57\u5373\u53ef:"}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-shell",children:'pnpm create plasmo "My Awesome Extension"\n# OR\nyarn create plasmo "My Awesome Extension"\n# OR\nnpm create plasmo "My Awesome Extension"\n'})}),"\n",(0,l.jsx)(n.admonition,{type:"tip",children:(0,l.jsxs)(n.p,{children:["\u4f60\u4e5f\u53ef\u4ee5\u628a ",(0,l.jsx)(n.code,{children:"plasmo"})," \u5b89\u88c5\u4e3a\u5168\u5c40\u7684\u5bf9\u8c61 ",(0,l.jsx)(n.code,{children:"pnpm i -g plasmo"}),"\u3002"]})}),"\n",(0,l.jsxs)(n.h3,{id:"\u4f7f\u7528-src-\u4f5c\u4e3a\u6e90\u7801\u76ee\u5f55",children:["\u4f7f\u7528 ",(0,l.jsx)(n.code,{children:"src"})," \u4f5c\u4e3a\u6e90\u7801\u76ee\u5f55"]}),"\n",(0,l.jsxs)(n.p,{children:["\u9ed8\u8ba4\u60c5\u51b5\u4e0b\uff0c",(0,l.jsx)(n.code,{children:"plasmo"})," \u4f7f\u7528\u5f53\u524d\u9879\u76ee\u7684\u6587\u4ef6\u5939\u4f5c\u4e3a\u4ee3\u7801\u6839\u76ee\u5f55\u3002 \u521b\u5efa\u9879\u76ee\u7684\u65f6\u5019\uff0c\u4f7f\u7528 --with-src \u53c2\u6570\u5373\u53ef"]}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-shell",children:"pnpm create plasmo --with-src\n# OR\nyarn create plasmo --with-src\n# OR\nnpm create plasmo --with-src\n"})}),"\n",(0,l.jsx)(n.p,{children:"\u5982\u679c\u4f60\u7684\u9879\u76ee\u5df2\u7ecf\u521b\u5efa\u597d\u4e86\uff0c\u8bf7\u6309\u7167\u5982\u4e0b\u7684\u64cd\u4f5c:"}),"\n",(0,l.jsxs)(n.ol,{children:["\n",(0,l.jsxs)(n.li,{children:["\u628a\u6240\u6709\u7684\u6e90\u7801\u590d\u5236\u5230 ",(0,l.jsx)(n.code,{children:"src"})," \u76ee\u5f55\u3002\n\u7136\u540e\u4fee\u6539 ",(0,l.jsx)(n.code,{children:"tsconfig.json"})," \uff1a \u539f\u6765\u6307\u5411 ",(0,l.jsx)(n.code,{children:"~*"})," \uff0c\u6539\u4e3a ",(0,l.jsx)(n.code,{children:"./src/*"})]}),"\n",(0,l.jsx)(n.li,{children:"\u4fee\u6539 \u914d\u7f6e\u6587\u4ef6\u6e90\u7801\u90e8\u5206:"}),"\n"]}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-shell",children:'{\n "extends": "plasmo/templates/tsconfig.base",\n "exclude": ["node_modules"],\n "include": [".plasmo/index.d.ts", "./**/*.ts", "./**/*.tsx"],\n "compilerOptions": {\n "paths": {\n "~*": ["./src/*"]\n },\n "baseUrl": "."\n }\n}\n'})}),"\n",(0,l.jsx)(n.h3,{id:"\u6307\u5b9a\u5165\u53e3\u6587\u4ef6",children:"\u6307\u5b9a\u5165\u53e3\u6587\u4ef6"}),"\n",(0,l.jsxs)(n.p,{children:["\u9ed8\u8ba4\u7684\u5165\u53e3\u6587\u4ef6\u4e3a ",(0,l.jsx)(n.a,{href:"https://docs.plasmo.com/framework/ext-pages#adding-a-popup-page",children:"popup"}),"\u3002\n\u4f60\u53ef\u4ee5\u4f7f\u7528 --entry \u8bbe\u7f6e\u4e0d\u540c\u7684\u5165\u53e3\u3002\n\u8fd9\u91cc\u5217\u51fa\u4e86",(0,l.jsx)(n.code,{children:"plasmo"})," \u652f\u6301\u7684 ",(0,l.jsx)(n.a,{href:"https://github.com/PlasmoHQ/plasmo/tree/main/packages/init/entries",children:"entries"}),"\u3002"]}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-shell",children:"pnpm create plasmo --entry=options,newtab,contents/inline\n# OR\nnpm create plasmo -- --entry=options,newtab,contents/inline\n"})}),"\n",(0,l.jsx)(n.admonition,{type:"tip",children:(0,l.jsx)(n.p,{children:"npm \u4e0d\u652f\u6301 \u5411\u4ed6\u7684\u5b50\u547d\u4ee4\u76f4\u63a5\u4f20\u9012\u53c2\u6570\uff0c\u9700\u8981\u4f7f\u7528 -- \u8f6c\u79fb\u4f20\u9012\u7684\u53c2\u6570\u3002"})}),"\n",(0,l.jsx)(n.h3,{id:"\u4f7f\u7528\u6a21\u677f\u6587\u4ef6",children:"\u4f7f\u7528\u6a21\u677f\u6587\u4ef6"}),"\n",(0,l.jsxs)(n.p,{children:["plasmo \u5b98\u65b9\u63d0\u4f9b\u4e86\u4e00\u4e2a ",(0,l.jsx)(n.a,{href:"https://github.com/PlasmoHQ/examples/",children:"\u6a21\u677f\u5217\u8868"}),"\u3002\u53ef\u4ee5\u9009\u62e9\u4e0d\u540c\u7684\u6a21\u677f\u7c7b\u578b\u521d\u59cb\u5316:"]}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-shell",children:"pnpm create plasmo --with-env\n# OR\nnpm create plasmo -- --with-env\n"})}),"\n",(0,l.jsx)(n.h2,{id:"development-sever",children:"Development Sever"}),"\n",(0,l.jsx)(n.p,{children:"\u4f7f\u7528\u5982\u4e0b\u7684\u547d\u4ee4\u542f\u52a8"}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-shell",children:"pnpm dev\n# OR\nnpm run dev\n# OR\nplasmo dev\n"})}),"\n",(0,l.jsxs)(n.p,{children:[(0,l.jsx)(n.code,{children:"Plasmo"})," \u5c06\u4e3a\u60a8\u7684\u6269\u5c55\u521b\u5efa\u4e00\u4e2a\u5f00\u53d1\u6587\u4ef6\u5939\u548c\u4e00\u4e2a\u5b9e\u65f6\u91cd\u8f7d\u5f00\u53d1\u670d\u52a1\u5668(\u4e00\u4e2a websocket \u670d\u52a1\u5668)\uff0c\u6587\u4ef6\u66f4\u6539\u65f6\u81ea\u52a8\u66f4\u65b0\u60a8\u7684\u5f00\u53d1\u6587\u4ef6\u5939\u3002\n\u66f4\u65b9\u4fbf\u7684\u662f\u5f53\u4f60\u4fee\u6539\u6e90\u4ee3\u7801\u66f4\u6539\u65f6\u91cd\u65b0\u52a0\u8f7d\u6d4f\u89c8\u5668\u3002\n\u5b83\u8fd8\u4f1a\u5728\u6269\u5c55\u540d\u524d\u52a0\u4e0a DEV | \u5e76\u4f7f\u56fe\u6807\u53d8\u6210\u7070\u5ea6\uff0c\u4ee5\u533a\u5206\u5f00\u53d1\u548c\u751f\u4ea7\u6269\u5c55\u6346\u7ed1\u5305\u3002"]}),"\n",(0,l.jsx)(n.h3,{id:"\u52a0\u8f7d\u6269\u5c55",children:"\u52a0\u8f7d\u6269\u5c55"}),"\n",(0,l.jsxs)(n.p,{children:["\u4f7f\u7528 ",(0,l.jsx)(n.code,{children:"chrome://extensions"})," \u6253\u5f00\u8bbe\u7f6e\u9875\u9762\u542f\u7528\u5f00\u53d1\u8005\u6a21\u5f0f\u3002"]}),"\n",(0,l.jsx)(n.p,{children:(0,l.jsx)(n.img,{alt:"dev mode",src:s(9027).Z+"",width:"690",height:"624"})}),"\n",(0,l.jsxs)(n.p,{children:["\u70b9\u51fb\u9875\u9762 ",(0,l.jsx)(n.code,{children:"\u52a0\u8f7d\u5df2\u89e3\u538b\u7684\u6269\u5c55\u7a0b\u5e8f"})," \u9009\u9879\uff0c\u5728\u5f39\u51fa\u7684\u6587\u4ef6\u5bfc\u822a\u4e2d\u5b9a\u4f4d\u5230\u9879\u76ee\u7684\u5f00\u53d1\u76ee\u5f55\u4e2d\u7684",(0,l.jsx)(n.code,{children:"build"}),"\u6587\u4ef6\u5939\u3002"]}),"\n",(0,l.jsx)(n.p,{children:"\u5176\u4e2d\u53ef\u80fd\u6709\u4e24\u4e2a\u6587\u4ef6\u5939:"}),"\n",(0,l.jsxs)(n.ol,{children:["\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.code,{children:"chrome-mv3-dev"})," \u4e3a\u5f00\u53d1\u76ee\u5f55\uff0c\u4e3a\u5f00\u53d1\u8fc7\u7a0b\u4e2d\u4f7f\u7528\u7684\u76ee\u5f55\u3002 ",(0,l.jsx)(n.code,{children:"run dev"})," \u7684\u65f6\u5019\u4f1a\u540c\u65f6\u89e6\u53d1\u4e00\u4e2a\u548c\u9875\u9762\u8fde\u63a5\u7684 websocket,\u66f4\u65b0\u6269\u5c55\u7684\u65f6\u5019\uff0c\u9664\u4e86\u4f1a\u91cd\u65b0\u6253\u5305\u6269\u5c55\u4ee5\u5916\u3002\n\u9875\u9762\u4e5f\u4f1a\u6709\u6240\u53cd\u9988\u3002"]}),"\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.code,{children:"chrome-mv3-prod"})," \u8fd9\u91cc\u4e3a\u4ea7\u54c1\u76ee\u5f55\uff0c\u4e0e\u7ebf\u4e0a\u53d1\u5e03\u540e\u7684\u771f\u5b9e\u60c5\u51b5\u6ca1\u6709\u533a\u522b\uff0c\u4e5f\u53ef\u4ee5\u5c0f\u8303\u56f4\u4f7f\u7528\u5206\u53d1\u6d4b\u8bd5\u3002"]}),"\n"]}),"\n",(0,l.jsx)(n.admonition,{type:"tip",children:(0,l.jsxs)(n.p,{children:["\u6709\u65f6\u4f60\u65e0\u6cd5\u5728 chrome \u4e2d\u770b\u5230\u4f60\u7684\u6269\u5c55\u3002\u5728 chrome \u5bfc\u822a\u680f\u7684\u8bbe\u7f6e\u4e2d\u70b9\u5f00\uff0c\u9009\u62e9 Pin \u5373\u53ef\u663e\u793a\u51fa\u6765\u3002\n",(0,l.jsx)(n.img,{alt:"dev mode",src:s(1622).Z+"",width:"495",height:"641"})]})}),"\n",(0,l.jsx)(n.h3,{id:"\u9009\u62e9\u4e00\u4e2a\u6307\u5b9a\u7684\u76ee\u6807\u6587\u4ef6",children:"\u9009\u62e9\u4e00\u4e2a\u6307\u5b9a\u7684\u76ee\u6807\u6587\u4ef6"}),"\n",(0,l.jsxs)(n.p,{children:["\u6211\u4eec\u4f7f\u7528 ",(0,l.jsx)(n.code,{children:"plasmo"})," \u5f00\u53d1\u6846\u67b6\uff0c\u4e0d\u53ea\u662f\u4e00\u4e2a Chrome \u6269\u5c55\u6216\u8005 Firefox \u6269\u5c55\u3002 \u4ed6\u5e94\u8be5\u79f0\u4e4b\u4e3a ",(0,l.jsx)(n.code,{children:"plasmo"}),"\u6269\u5c55\u3002\n\u8fd9\u4e5f\u610f\u5473\u7740\uff0c\u4f60\u53ef\u4ee5\u4f60\u53ef\u4ee5\u6253\u5305\u51fa\u6240\u6709\u652f\u6301\u7684\u6d4f\u89c8\u5668\u3002\u4f60\u53ef\u4ee5\u4f7f\u7528 ",(0,l.jsx)(n.code,{children:"--target"})," \u53c2\u6570\u6765\u5236\u5b9a\u3002"]}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-shell",children:"plasmo dev --target=firefox-mv2\n"})}),"\n",(0,l.jsx)(n.p,{children:(0,l.jsx)(n.a,{href:"https://docs.plasmo.com/framework/workflows/faq#what-are-the-officially-supported-browser-targets",children:"\u652f\u6301\u7684\u76ee\u6807\u6d4f\u89c8\u5668\u5217\u8868"})}),"\n",(0,l.jsxs)(n.h3,{id:"\u53bb\u6389-source-maps",children:["\u53bb\u6389 ",(0,l.jsx)(n.code,{children:"source maps"})]}),"\n",(0,l.jsxs)(n.p,{children:["source maps \u4e3a\u8c03\u5236\u7a0b\u5e8f\u7684\u65f6\u5019\uff0c\u4ed6\u4f1a\u5f71\u54cd\u6269\u5c55\u7684\u52a0\u8f7d\u987a\u5e8f\u3002\u4f7f\u7528 ",(0,l.jsx)(n.code,{children:"--no-source-maps"})," \u53bb\u6389"]}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-shell",children:"plasmo dev --no-source-maps\n"})}),"\n",(0,l.jsx)(n.h3,{id:"\u6307\u5b9a-server-port-\u548c-websocket",children:"\u6307\u5b9a Server port \u548c websocket"}),"\n",(0,l.jsx)(n.p,{children:"\u6309\u7167\u5982\u4e0b\u7684\u547d\u4ee4\u4fee\u6539 \u542f\u52a8\u7684 Server port \u548c websocket \u7aef\u53e3"}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-shell",children:"plasmo dev --serve-host=localhost --serve-port-1012\nplasmo dev --hmr-host=localhost --hmr-port=1815\n"})}),"\n",(0,l.jsx)(n.h2,{id:"\u53d1\u5e03\u4e00\u4e2a\u4ea7\u54c1\u5305",children:"\u53d1\u5e03\u4e00\u4e2a\u4ea7\u54c1\u5305"}),"\n",(0,l.jsxs)(n.h3,{id:"\u5e38\u89c4\u7684-build",children:["\u5e38\u89c4\u7684 ",(0,l.jsx)(n.code,{children:"build"})]}),"\n",(0,l.jsxs)(n.p,{children:["\u4ea7\u54c1\u5305 ",(0,l.jsx)(n.code,{children:"build"})," \u547d\u4ee4"]}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-shell",children:"pnpm build\n# OR\nnpm run build\n"})}),"\n",(0,l.jsx)(n.p,{children:"\u751f\u6210 zip \u5305"}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-shell",children:"pnpm package\n# OR\nnpm run package\n"})}),"\n",(0,l.jsx)(n.p,{children:"\u4ee5\u4e0a\u4e24\u6b65\u4e5f\u53ef\u4ee5\u5408\u6210\u4e00\u6b65"}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-shell",children:"pnpm build --zip\n# OR\nnpm run build -- --zip\n"})}),"\n",(0,l.jsx)(n.h3,{id:"\u8bbe\u7f6e\u76ee\u6807",children:"\u8bbe\u7f6e\u76ee\u6807"}),"\n",(0,l.jsxs)(n.p,{children:["\u540c dev \u4e00\u6837\uff0c\u4f60\u53ef\u4ee5\u4f7f\u7528 ",(0,l.jsx)(n.code,{children:"--target"})," \u8bbe\u7f6e\u76ee\u6807"]}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-shell",children:"plasmo build --target=firefox-mv2\n"})}),"\n",(0,l.jsx)(n.p,{children:(0,l.jsx)(n.a,{href:"https://docs.plasmo.com/framework/workflows/faq#what-are-the-officially-supported-browser-targets",children:"\u652f\u6301\u5217\u8868"})}),"\n",(0,l.jsx)(n.h3,{id:"\u6dfb\u52a0\u81ea\u5b9a\u4e49-tag",children:"\u6dfb\u52a0\u81ea\u5b9a\u4e49 tag"}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-shell",children:"plasmo build --tag=staging\n"})}),"\n",(0,l.jsxs)(n.p,{children:["\u5c06\u4f1a\u751f\u6210 ",(0,l.jsx)(n.code,{children:"build/chrome-mv3-staging"})," \u76ee\u5f55\u3002"]}),"\n",(0,l.jsx)(n.h3,{id:"\u53bb\u6389-source-maps-1",children:"\u53bb\u6389 source maps"}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-shell",children:"plasmo build --source-maps\n"})}),"\n",(0,l.jsx)(n.h3,{id:"\u5176\u4ed6\u4f18\u5316",children:"\u5176\u4ed6\u4f18\u5316"}),"\n",(0,l.jsx)(n.p,{children:"\u5173\u95ed minification (\u4e00\u79cd\u4ee3\u7801\u538b\u7f29\u6280\u672f)"}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-shell",children:"plasmo build --no-minify\n"})}),"\n",(0,l.jsxs)(n.p,{children:["\u542f\u7528 ",(0,l.jsx)(n.code,{children:"hoisting"})," \u7684\u6280\u672f\u3002\n\u5728 JavaScript \u548c\u6d4f\u89c8\u5668\u6269\u5c55\u5f00\u53d1\u4e2d\uff0choisting \u6307\u7684\u662f\u63d0\u5347\u6a21\u5757\u4f9d\u8d56\u9879\u7684\u8fc7\u7a0b\uff0c\u4f7f\u5f97\u88ab\u591a\u4e2a\u6587\u4ef6\u5171\u540c\u4f9d\u8d56\u7684\u6a21\u5757\u53ea\u9700\u8981\u52a0\u8f7d\u4e00\u6b21\u3002"]}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-shell",children:"plasmo build --hoist\n"})}),"\n",(0,l.jsx)(n.p,{children:"\u4ee5\u4e0a\u7684\u4e24\u4e2a\u53c2\u6570\uff0c\u53ef\u4ee5\u7ec4\u5408\u4f7f\u7528\u3002"})]})}function h(e={}){const{wrapper:n}={...(0,r.a)(),...e.components};return n?(0,l.jsx)(n,{...e,children:(0,l.jsx)(t,{...e})}):t(e)}},9027:(e,n,s)=>{s.d(n,{Z:()=>l});const l=s.p+"assets/images/devmod-0154a12bc307a9ff9eed9d1959254249.jpg"},1622:(e,n,s)=>{s.d(n,{Z:()=>l});const l=s.p+"assets/images/show_extension-2ff6d404b47d0c027ee3105fe0104d5a.jpg"},1151:(e,n,s)=>{s.d(n,{Z:()=>i,a:()=>d});var l=s(7294);const r={},c=l.createContext(r);function d(e){const n=l.useContext(c);return l.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function i(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:d(e.components),l.createElement(c.Provider,{value:n},e.children)}}}]);
\ No newline at end of file
+"use strict";(self.webpackChunkplasmo_co_learn=self.webpackChunkplasmo_co_learn||[]).push([[9906],{4335:(e,n,s)=>{s.r(n),s.d(n,{assets:()=>o,contentTitle:()=>d,default:()=>h,frontMatter:()=>c,metadata:()=>i,toc:()=>a});var l=s(5893),r=s(1151);const c={sidebar_position:3},d="\u5f00\u53d1\u5de5\u4f5c\u6d41",i={id:"module2/workflow",title:"\u5f00\u53d1\u5de5\u4f5c\u6d41",description:"\u8fd9\u91cc\u4e3b\u8981\u4ecb\u7ecd\u4f7f\u7528 plasmo \u5f00\u53d1\u6d4f\u89c8\u5668\u6269\u5c55\u7684\u5de5\u4f5c\u6d41\u3002",source:"@site/docs/module2/workflow.mdx",sourceDirName:"module2",slug:"/module2/workflow",permalink:"/plasmo-co-learn/docs/module2/workflow",draft:!1,unlisted:!1,editUrl:"https://github.com/CreatorsDAO/plasmo-co-learn/tree/main/docs/module2/workflow.mdx",tags:[],version:"current",lastUpdatedAt:1703894918,formattedLastUpdatedAt:"Dec 30, 2023",sidebarPosition:3,frontMatter:{sidebar_position:3},sidebar:"tutorialSidebar",previous:{title:"10 \u5206\u949f React",permalink:"/plasmo-co-learn/docs/module1/basic_react"},next:{title:"\u6269\u5c55\u5185\u7f6e\u9875\u9762",permalink:"/plasmo-co-learn/docs/module2/pages"}},o={},a=[{value:"\u521b\u5efa\u9879\u76ee",id:"\u521b\u5efa\u9879\u76ee",level:2},{value:"\u4f7f\u7528 src \u4f5c\u4e3a\u6e90\u7801\u76ee\u5f55",id:"\u4f7f\u7528-src-\u4f5c\u4e3a\u6e90\u7801\u76ee\u5f55",level:3},{value:"\u6307\u5b9a\u5165\u53e3\u6587\u4ef6",id:"\u6307\u5b9a\u5165\u53e3\u6587\u4ef6",level:3},{value:"\u4f7f\u7528\u6a21\u677f\u6587\u4ef6",id:"\u4f7f\u7528\u6a21\u677f\u6587\u4ef6",level:3},{value:"Development Sever",id:"development-sever",level:2},{value:"\u52a0\u8f7d\u6269\u5c55",id:"\u52a0\u8f7d\u6269\u5c55",level:3},{value:"\u9009\u62e9\u4e00\u4e2a\u6307\u5b9a\u7684\u76ee\u6807\u6587\u4ef6",id:"\u9009\u62e9\u4e00\u4e2a\u6307\u5b9a\u7684\u76ee\u6807\u6587\u4ef6",level:3},{value:"\u53bb\u6389 source maps",id:"\u53bb\u6389-source-maps",level:3},{value:"\u6307\u5b9a Server port \u548c websocket",id:"\u6307\u5b9a-server-port-\u548c-websocket",level:3},{value:"\u53d1\u5e03\u4e00\u4e2a\u4ea7\u54c1\u5305",id:"\u53d1\u5e03\u4e00\u4e2a\u4ea7\u54c1\u5305",level:2},{value:"\u5e38\u89c4\u7684 build",id:"\u5e38\u89c4\u7684-build",level:3},{value:"\u8bbe\u7f6e\u76ee\u6807",id:"\u8bbe\u7f6e\u76ee\u6807",level:3},{value:"\u6dfb\u52a0\u81ea\u5b9a\u4e49 tag",id:"\u6dfb\u52a0\u81ea\u5b9a\u4e49-tag",level:3},{value:"\u53bb\u6389 source maps",id:"\u53bb\u6389-source-maps-1",level:3},{value:"\u5176\u4ed6\u4f18\u5316",id:"\u5176\u4ed6\u4f18\u5316",level:3}];function t(e){const n={a:"a",admonition:"admonition",code:"code",h1:"h1",h2:"h2",h3:"h3",img:"img",li:"li",ol:"ol",p:"p",pre:"pre",...(0,r.a)(),...e.components};return(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)(n.h1,{id:"\u5f00\u53d1\u5de5\u4f5c\u6d41",children:"\u5f00\u53d1\u5de5\u4f5c\u6d41"}),"\n",(0,l.jsxs)(n.p,{children:["\u8fd9\u91cc\u4e3b\u8981\u4ecb\u7ecd\u4f7f\u7528 ",(0,l.jsx)(n.code,{children:"plasmo"})," \u5f00\u53d1\u6d4f\u89c8\u5668\u6269\u5c55\u7684\u5de5\u4f5c\u6d41\u3002"]}),"\n",(0,l.jsx)(n.h2,{id:"\u521b\u5efa\u9879\u76ee",children:"\u521b\u5efa\u9879\u76ee"}),"\n",(0,l.jsxs)(n.p,{children:["\u901a\u8fc7\u5982\u4e0b\u7684\u547d\u4ee4\u521b\u5efa ",(0,l.jsx)(n.code,{children:"plasmo"})," \u9879\u76ee\uff1a"]}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-shell",children:"pnpm create plasmo\n# OR\nyarn create plasmo\n# OR\nnpm create plasmo\n"})}),"\n",(0,l.jsx)(n.p,{children:"\u5982\u679c\uff0c\u8df3\u8fc7\u540d\u5b57\u7684\u63d0\u793a\uff0c\u6dfb\u52a0\u4e00\u4e2a\u6269\u5c55\u7684\u540d\u5b57\u5373\u53ef:"}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-shell",children:'pnpm create plasmo "My Awesome Extension"\n# OR\nyarn create plasmo "My Awesome Extension"\n# OR\nnpm create plasmo "My Awesome Extension"\n'})}),"\n",(0,l.jsx)(n.admonition,{type:"tip",children:(0,l.jsxs)(n.p,{children:["\u4f60\u4e5f\u53ef\u4ee5\u628a ",(0,l.jsx)(n.code,{children:"plasmo"})," \u5b89\u88c5\u4e3a\u5168\u5c40\u7684\u5bf9\u8c61 ",(0,l.jsx)(n.code,{children:"pnpm i -g plasmo"}),"\u3002"]})}),"\n",(0,l.jsxs)(n.h3,{id:"\u4f7f\u7528-src-\u4f5c\u4e3a\u6e90\u7801\u76ee\u5f55",children:["\u4f7f\u7528 ",(0,l.jsx)(n.code,{children:"src"})," \u4f5c\u4e3a\u6e90\u7801\u76ee\u5f55"]}),"\n",(0,l.jsxs)(n.p,{children:["\u9ed8\u8ba4\u60c5\u51b5\u4e0b\uff0c",(0,l.jsx)(n.code,{children:"plasmo"})," \u4f7f\u7528\u5f53\u524d\u9879\u76ee\u7684\u6587\u4ef6\u5939\u4f5c\u4e3a\u4ee3\u7801\u6839\u76ee\u5f55\u3002 \u521b\u5efa\u9879\u76ee\u7684\u65f6\u5019\uff0c\u4f7f\u7528 --with-src \u53c2\u6570\u5373\u53ef"]}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-shell",children:"pnpm create plasmo --with-src\n# OR\nyarn create plasmo --with-src\n# OR\nnpm create plasmo --with-src\n"})}),"\n",(0,l.jsx)(n.p,{children:"\u5982\u679c\u4f60\u7684\u9879\u76ee\u5df2\u7ecf\u521b\u5efa\u597d\u4e86\uff0c\u8bf7\u6309\u7167\u5982\u4e0b\u7684\u64cd\u4f5c:"}),"\n",(0,l.jsxs)(n.ol,{children:["\n",(0,l.jsxs)(n.li,{children:["\u628a\u6240\u6709\u7684\u6e90\u7801\u590d\u5236\u5230 ",(0,l.jsx)(n.code,{children:"src"})," \u76ee\u5f55\u3002\n\u7136\u540e\u4fee\u6539 ",(0,l.jsx)(n.code,{children:"tsconfig.json"})," \uff1a \u539f\u6765\u6307\u5411 ",(0,l.jsx)(n.code,{children:"~*"})," \uff0c\u6539\u4e3a ",(0,l.jsx)(n.code,{children:"./src/*"})]}),"\n",(0,l.jsx)(n.li,{children:"\u4fee\u6539 \u914d\u7f6e\u6587\u4ef6\u6e90\u7801\u90e8\u5206:"}),"\n"]}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-shell",children:'{\n "extends": "plasmo/templates/tsconfig.base",\n "exclude": ["node_modules"],\n "include": [".plasmo/index.d.ts", "./**/*.ts", "./**/*.tsx"],\n "compilerOptions": {\n "paths": {\n "~*": ["./src/*"]\n },\n "baseUrl": "."\n }\n}\n'})}),"\n",(0,l.jsx)(n.h3,{id:"\u6307\u5b9a\u5165\u53e3\u6587\u4ef6",children:"\u6307\u5b9a\u5165\u53e3\u6587\u4ef6"}),"\n",(0,l.jsxs)(n.p,{children:["\u9ed8\u8ba4\u7684\u5165\u53e3\u6587\u4ef6\u4e3a ",(0,l.jsx)(n.a,{href:"https://docs.plasmo.com/framework/ext-pages#adding-a-popup-page",children:"popup"}),"\u3002\n\u4f60\u53ef\u4ee5\u4f7f\u7528 --entry \u8bbe\u7f6e\u4e0d\u540c\u7684\u5165\u53e3\u3002\n\u8fd9\u91cc\u5217\u51fa\u4e86",(0,l.jsx)(n.code,{children:"plasmo"})," \u652f\u6301\u7684 ",(0,l.jsx)(n.a,{href:"https://github.com/PlasmoHQ/plasmo/tree/main/packages/init/entries",children:"entries"}),"\u3002"]}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-shell",children:"pnpm create plasmo --entry=options,newtab,contents/inline\n# OR\nnpm create plasmo -- --entry=options,newtab,contents/inline\n"})}),"\n",(0,l.jsx)(n.admonition,{type:"tip",children:(0,l.jsx)(n.p,{children:"npm \u4e0d\u652f\u6301 \u5411\u4ed6\u7684\u5b50\u547d\u4ee4\u76f4\u63a5\u4f20\u9012\u53c2\u6570\uff0c\u9700\u8981\u4f7f\u7528 -- \u8f6c\u79fb\u4f20\u9012\u7684\u53c2\u6570\u3002"})}),"\n",(0,l.jsx)(n.h3,{id:"\u4f7f\u7528\u6a21\u677f\u6587\u4ef6",children:"\u4f7f\u7528\u6a21\u677f\u6587\u4ef6"}),"\n",(0,l.jsxs)(n.p,{children:["plasmo \u5b98\u65b9\u63d0\u4f9b\u4e86\u4e00\u4e2a ",(0,l.jsx)(n.a,{href:"https://github.com/PlasmoHQ/examples/",children:"\u6a21\u677f\u5217\u8868"}),"\u3002\u53ef\u4ee5\u9009\u62e9\u4e0d\u540c\u7684\u6a21\u677f\u7c7b\u578b\u521d\u59cb\u5316:"]}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-shell",children:"pnpm create plasmo --with-env\n# OR\nnpm create plasmo -- --with-env\n"})}),"\n",(0,l.jsx)(n.h2,{id:"development-sever",children:"Development Sever"}),"\n",(0,l.jsx)(n.p,{children:"\u4f7f\u7528\u5982\u4e0b\u7684\u547d\u4ee4\u542f\u52a8"}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-shell",children:"pnpm dev\n# OR\nnpm run dev\n# OR\nplasmo dev\n"})}),"\n",(0,l.jsxs)(n.p,{children:[(0,l.jsx)(n.code,{children:"Plasmo"})," \u5c06\u4e3a\u60a8\u7684\u6269\u5c55\u521b\u5efa\u4e00\u4e2a\u5f00\u53d1\u6587\u4ef6\u5939\u548c\u4e00\u4e2a\u5b9e\u65f6\u91cd\u8f7d\u5f00\u53d1\u670d\u52a1\u5668(\u4e00\u4e2a websocket \u670d\u52a1\u5668)\uff0c\u6587\u4ef6\u66f4\u6539\u65f6\u81ea\u52a8\u66f4\u65b0\u60a8\u7684\u5f00\u53d1\u6587\u4ef6\u5939\u3002\n\u66f4\u65b9\u4fbf\u7684\u662f\u5f53\u4f60\u4fee\u6539\u6e90\u4ee3\u7801\u66f4\u6539\u65f6\u91cd\u65b0\u52a0\u8f7d\u6d4f\u89c8\u5668\u3002\n\u5b83\u8fd8\u4f1a\u5728\u6269\u5c55\u540d\u524d\u52a0\u4e0a DEV | \u5e76\u4f7f\u56fe\u6807\u53d8\u6210\u7070\u5ea6\uff0c\u4ee5\u533a\u5206\u5f00\u53d1\u548c\u751f\u4ea7\u6269\u5c55\u6346\u7ed1\u5305\u3002"]}),"\n",(0,l.jsx)(n.h3,{id:"\u52a0\u8f7d\u6269\u5c55",children:"\u52a0\u8f7d\u6269\u5c55"}),"\n",(0,l.jsxs)(n.p,{children:["\u4f7f\u7528 ",(0,l.jsx)(n.code,{children:"chrome://extensions"})," \u6253\u5f00\u8bbe\u7f6e\u9875\u9762\u542f\u7528\u5f00\u53d1\u8005\u6a21\u5f0f\u3002"]}),"\n",(0,l.jsx)(n.p,{children:(0,l.jsx)(n.img,{alt:"dev mode",src:s(9027).Z+"",width:"690",height:"624"})}),"\n",(0,l.jsxs)(n.p,{children:["\u70b9\u51fb\u9875\u9762 ",(0,l.jsx)(n.code,{children:"\u52a0\u8f7d\u5df2\u89e3\u538b\u7684\u6269\u5c55\u7a0b\u5e8f"})," \u9009\u9879\uff0c\u5728\u5f39\u51fa\u7684\u6587\u4ef6\u5bfc\u822a\u4e2d\u5b9a\u4f4d\u5230\u9879\u76ee\u7684\u5f00\u53d1\u76ee\u5f55\u4e2d\u7684",(0,l.jsx)(n.code,{children:"build"}),"\u6587\u4ef6\u5939\u3002"]}),"\n",(0,l.jsx)(n.p,{children:"\u5176\u4e2d\u53ef\u80fd\u6709\u4e24\u4e2a\u6587\u4ef6\u5939:"}),"\n",(0,l.jsxs)(n.ol,{children:["\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.code,{children:"chrome-mv3-dev"})," \u4e3a\u5f00\u53d1\u76ee\u5f55\uff0c\u4e3a\u5f00\u53d1\u8fc7\u7a0b\u4e2d\u4f7f\u7528\u7684\u76ee\u5f55\u3002 ",(0,l.jsx)(n.code,{children:"run dev"})," \u7684\u65f6\u5019\u4f1a\u540c\u65f6\u89e6\u53d1\u4e00\u4e2a\u548c\u9875\u9762\u8fde\u63a5\u7684 websocket,\u66f4\u65b0\u6269\u5c55\u7684\u65f6\u5019\uff0c\u9664\u4e86\u4f1a\u91cd\u65b0\u6253\u5305\u6269\u5c55\u4ee5\u5916\u3002\n\u9875\u9762\u4e5f\u4f1a\u6709\u6240\u53cd\u9988\u3002"]}),"\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.code,{children:"chrome-mv3-prod"})," \u8fd9\u91cc\u4e3a\u4ea7\u54c1\u76ee\u5f55\uff0c\u4e0e\u7ebf\u4e0a\u53d1\u5e03\u540e\u7684\u771f\u5b9e\u60c5\u51b5\u6ca1\u6709\u533a\u522b\uff0c\u4e5f\u53ef\u4ee5\u5c0f\u8303\u56f4\u4f7f\u7528\u5206\u53d1\u6d4b\u8bd5\u3002"]}),"\n"]}),"\n",(0,l.jsx)(n.admonition,{type:"tip",children:(0,l.jsxs)(n.p,{children:["\u6709\u65f6\u4f60\u65e0\u6cd5\u5728 chrome \u4e2d\u770b\u5230\u4f60\u7684\u6269\u5c55\u3002\u5728 chrome \u5bfc\u822a\u680f\u7684\u8bbe\u7f6e\u4e2d\u70b9\u5f00\uff0c\u9009\u62e9 Pin \u5373\u53ef\u663e\u793a\u51fa\u6765\u3002\n",(0,l.jsx)(n.img,{alt:"dev mode",src:s(1622).Z+"",width:"495",height:"641"})]})}),"\n",(0,l.jsx)(n.h3,{id:"\u9009\u62e9\u4e00\u4e2a\u6307\u5b9a\u7684\u76ee\u6807\u6587\u4ef6",children:"\u9009\u62e9\u4e00\u4e2a\u6307\u5b9a\u7684\u76ee\u6807\u6587\u4ef6"}),"\n",(0,l.jsxs)(n.p,{children:["\u6211\u4eec\u4f7f\u7528 ",(0,l.jsx)(n.code,{children:"plasmo"})," \u5f00\u53d1\u6846\u67b6\uff0c\u4e0d\u53ea\u662f\u4e00\u4e2a Chrome \u6269\u5c55\u6216\u8005 Firefox \u6269\u5c55\u3002 \u4ed6\u5e94\u8be5\u79f0\u4e4b\u4e3a ",(0,l.jsx)(n.code,{children:"plasmo"}),"\u6269\u5c55\u3002\n\u8fd9\u4e5f\u610f\u5473\u7740\uff0c\u4f60\u53ef\u4ee5\u4f60\u53ef\u4ee5\u6253\u5305\u51fa\u6240\u6709\u652f\u6301\u7684\u6d4f\u89c8\u5668\u3002\u4f60\u53ef\u4ee5\u4f7f\u7528 ",(0,l.jsx)(n.code,{children:"--target"})," \u53c2\u6570\u6765\u5236\u5b9a\u3002"]}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-shell",children:"plasmo dev --target=firefox-mv2\n"})}),"\n",(0,l.jsx)(n.p,{children:(0,l.jsx)(n.a,{href:"https://docs.plasmo.com/framework/workflows/faq#what-are-the-officially-supported-browser-targets",children:"\u652f\u6301\u7684\u76ee\u6807\u6d4f\u89c8\u5668\u5217\u8868"})}),"\n",(0,l.jsxs)(n.h3,{id:"\u53bb\u6389-source-maps",children:["\u53bb\u6389 ",(0,l.jsx)(n.code,{children:"source maps"})]}),"\n",(0,l.jsxs)(n.p,{children:["source maps \u4e3a\u8c03\u5236\u7a0b\u5e8f\u7684\u65f6\u5019\uff0c\u4ed6\u4f1a\u5f71\u54cd\u6269\u5c55\u7684\u52a0\u8f7d\u987a\u5e8f\u3002\u4f7f\u7528 ",(0,l.jsx)(n.code,{children:"--no-source-maps"})," \u53bb\u6389"]}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-shell",children:"plasmo dev --no-source-maps\n"})}),"\n",(0,l.jsx)(n.h3,{id:"\u6307\u5b9a-server-port-\u548c-websocket",children:"\u6307\u5b9a Server port \u548c websocket"}),"\n",(0,l.jsx)(n.p,{children:"\u6309\u7167\u5982\u4e0b\u7684\u547d\u4ee4\u4fee\u6539 \u542f\u52a8\u7684 Server port \u548c websocket \u7aef\u53e3"}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-shell",children:"plasmo dev --serve-host=localhost --serve-port-1012\nplasmo dev --hmr-host=localhost --hmr-port=1815\n"})}),"\n",(0,l.jsx)(n.h2,{id:"\u53d1\u5e03\u4e00\u4e2a\u4ea7\u54c1\u5305",children:"\u53d1\u5e03\u4e00\u4e2a\u4ea7\u54c1\u5305"}),"\n",(0,l.jsxs)(n.h3,{id:"\u5e38\u89c4\u7684-build",children:["\u5e38\u89c4\u7684 ",(0,l.jsx)(n.code,{children:"build"})]}),"\n",(0,l.jsxs)(n.p,{children:["\u4ea7\u54c1\u5305 ",(0,l.jsx)(n.code,{children:"build"})," \u547d\u4ee4"]}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-shell",children:"pnpm build\n# OR\nnpm run build\n"})}),"\n",(0,l.jsx)(n.p,{children:"\u751f\u6210 zip \u5305"}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-shell",children:"pnpm package\n# OR\nnpm run package\n"})}),"\n",(0,l.jsx)(n.p,{children:"\u4ee5\u4e0a\u4e24\u6b65\u4e5f\u53ef\u4ee5\u5408\u6210\u4e00\u6b65"}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-shell",children:"pnpm build --zip\n# OR\nnpm run build -- --zip\n"})}),"\n",(0,l.jsx)(n.h3,{id:"\u8bbe\u7f6e\u76ee\u6807",children:"\u8bbe\u7f6e\u76ee\u6807"}),"\n",(0,l.jsxs)(n.p,{children:["\u540c dev \u4e00\u6837\uff0c\u4f60\u53ef\u4ee5\u4f7f\u7528 ",(0,l.jsx)(n.code,{children:"--target"})," \u8bbe\u7f6e\u76ee\u6807"]}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-shell",children:"plasmo build --target=firefox-mv2\n"})}),"\n",(0,l.jsx)(n.p,{children:(0,l.jsx)(n.a,{href:"https://docs.plasmo.com/framework/workflows/faq#what-are-the-officially-supported-browser-targets",children:"\u652f\u6301\u5217\u8868"})}),"\n",(0,l.jsx)(n.h3,{id:"\u6dfb\u52a0\u81ea\u5b9a\u4e49-tag",children:"\u6dfb\u52a0\u81ea\u5b9a\u4e49 tag"}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-shell",children:"plasmo build --tag=staging\n"})}),"\n",(0,l.jsxs)(n.p,{children:["\u5c06\u4f1a\u751f\u6210 ",(0,l.jsx)(n.code,{children:"build/chrome-mv3-staging"})," \u76ee\u5f55\u3002"]}),"\n",(0,l.jsx)(n.h3,{id:"\u53bb\u6389-source-maps-1",children:"\u53bb\u6389 source maps"}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-shell",children:"plasmo build --source-maps\n"})}),"\n",(0,l.jsx)(n.h3,{id:"\u5176\u4ed6\u4f18\u5316",children:"\u5176\u4ed6\u4f18\u5316"}),"\n",(0,l.jsx)(n.p,{children:"\u5173\u95ed minification (\u4e00\u79cd\u4ee3\u7801\u538b\u7f29\u6280\u672f)"}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-shell",children:"plasmo build --no-minify\n"})}),"\n",(0,l.jsxs)(n.p,{children:["\u542f\u7528 ",(0,l.jsx)(n.code,{children:"hoisting"})," \u7684\u6280\u672f\u3002\n\u5728 JavaScript \u548c\u6d4f\u89c8\u5668\u6269\u5c55\u5f00\u53d1\u4e2d\uff0choisting \u6307\u7684\u662f\u63d0\u5347\u6a21\u5757\u4f9d\u8d56\u9879\u7684\u8fc7\u7a0b\uff0c\u4f7f\u5f97\u88ab\u591a\u4e2a\u6587\u4ef6\u5171\u540c\u4f9d\u8d56\u7684\u6a21\u5757\u53ea\u9700\u8981\u52a0\u8f7d\u4e00\u6b21\u3002"]}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-shell",children:"plasmo build --hoist\n"})}),"\n",(0,l.jsx)(n.p,{children:"\u4ee5\u4e0a\u7684\u4e24\u4e2a\u53c2\u6570\uff0c\u53ef\u4ee5\u7ec4\u5408\u4f7f\u7528\u3002"})]})}function h(e={}){const{wrapper:n}={...(0,r.a)(),...e.components};return n?(0,l.jsx)(n,{...e,children:(0,l.jsx)(t,{...e})}):t(e)}},9027:(e,n,s)=>{s.d(n,{Z:()=>l});const l=s.p+"assets/images/devmod-0154a12bc307a9ff9eed9d1959254249.jpg"},1622:(e,n,s)=>{s.d(n,{Z:()=>l});const l=s.p+"assets/images/show_extension-2ff6d404b47d0c027ee3105fe0104d5a.jpg"},1151:(e,n,s)=>{s.d(n,{Z:()=>i,a:()=>d});var l=s(7294);const r={},c=l.createContext(r);function d(e){const n=l.useContext(c);return l.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function i(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:d(e.components),l.createElement(c.Provider,{value:n},e.children)}}}]);
\ No newline at end of file
diff --git a/assets/js/16e31973.6333e4de.js b/assets/js/16e31973.b5883a8b.js
similarity index 98%
rename from assets/js/16e31973.6333e4de.js
rename to assets/js/16e31973.b5883a8b.js
index e053226..0113418 100644
--- a/assets/js/16e31973.6333e4de.js
+++ b/assets/js/16e31973.b5883a8b.js
@@ -1 +1 @@
-"use strict";(self.webpackChunkplasmo_co_learn=self.webpackChunkplasmo_co_learn||[]).push([[9459],{8452:(e,n,s)=>{s.r(n),s.d(n,{assets:()=>c,contentTitle:()=>t,default:()=>x,frontMatter:()=>a,metadata:()=>r,toc:()=>i});var o=s(5893),d=s(1151);const a={sidebar_position:6},t="sandbox pages",r={id:"module2/sandbox_pages",title:"sandbox pages",description:"\u7b80\u5355\u8bf4\u660e",source:"@site/docs/module2/sandbox_pages.mdx",sourceDirName:"module2",slug:"/module2/sandbox_pages",permalink:"/plasmo-co-learn/docs/module2/sandbox_pages",draft:!1,unlisted:!1,editUrl:"https://github.com/CreatorsDAO/plasmo-co-learn/tree/main/docs/module2/sandbox_pages.mdx",tags:[],version:"current",lastUpdatedAt:1703480569,formattedLastUpdatedAt:"Dec 25, 2023",sidebarPosition:6,frontMatter:{sidebar_position:6},sidebar:"tutorialSidebar",previous:{title:"Tab Pages",permalink:"/plasmo-co-learn/docs/module2/tab_pages"},next:{title:"\u9759\u6001\u8d44\u6e90",permalink:"/plasmo-co-learn/docs/module2/assets"}},c={},i=[{value:"\u7b80\u5355\u8bf4\u660e",id:"\u7b80\u5355\u8bf4\u660e",level:2},{value:"\u4f7f\u7528\u5b9e\u4f8b",id:"\u4f7f\u7528\u5b9e\u4f8b",level:2},{value:"\u521b\u5efa\u4e00\u4e2a Sandbox Page",id:"\u521b\u5efa\u4e00\u4e2a-sandbox-page",level:3},{value:"\u8c03\u7528\u65b9\u9875\u9762",id:"\u8c03\u7528\u65b9\u9875\u9762",level:3}];function l(e){const n={code:"code",h1:"h1",h2:"h2",h3:"h3",li:"li",ol:"ol",p:"p",pre:"pre",...(0,d.a)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(n.h1,{id:"sandbox-pages",children:"sandbox pages"}),"\n",(0,o.jsx)(n.h2,{id:"\u7b80\u5355\u8bf4\u660e",children:"\u7b80\u5355\u8bf4\u660e"}),"\n",(0,o.jsxs)(n.p,{children:[(0,o.jsx)(n.code,{children:"Sandbox Pages"})," \u662f\u4e00\u79cd\u7279\u6b8a\u7684\u6269\u5c55\u9875\u9762\uff0c\u4ed6\u533a\u522b\u4e8e\u6574\u4f53\u7684 CSP \u9650\u5236\u3002\n\u6bd4\u5982\uff0c\u4f60\u53ef\u4ee5\u5728\u5176\u4e2d\u6267\u884c ",(0,o.jsx)(n.code,{children:"eval"})," \u7684\u76f8\u5173\u4ee3\u7801\u903b\u8f91\uff0c\u800c\u4e0d\u5f71\u54cd\u6574\u4e2a\u7684\u5b89\u5168\u73af\u5883\u3002\n\u4f7f\u7528",(0,o.jsx)(n.code,{children:"Sandbox Pages"})," \u6267\u884c\u76f8\u5173\u4ee3\u7801\uff0c\u4f60\u5c06\u83b7\u5f97\u66f4\u9ad8\u7684\u4f18\u5148\u7ea7\u548c\u66f4\u5b89\u5168\u7684\u9694\u79bb\u73af\u5883\u3002"]}),"\n",(0,o.jsx)(n.h2,{id:"\u4f7f\u7528\u5b9e\u4f8b",children:"\u4f7f\u7528\u5b9e\u4f8b"}),"\n",(0,o.jsxs)(n.p,{children:["\u901a\u5e38\uff0c\u4e00\u4e2a",(0,o.jsx)(n.code,{children:"Sandbox Page"})," \u4f1a\u6302\u8f7d\u5230\u4e00\u4e2a ",(0,o.jsx)(n.code,{children:"Content Script UI"}),"\u9875\u9762\u7ed3\u6784\u4e2d\u3002\n\u4e0b\u8fb9\u7684\u4e00\u4e2a\u5b9e\u4f8b \u5c55\u793a\u4e86\u5982\u4f55 \u4f7f\u7528",(0,o.jsx)(n.code,{children:"Sandbox Pages"})," \u6267\u884c ",(0,o.jsx)(n.code,{children:"eval"})," \u7684\u7cfb\u7edf\u8c03\u7528\uff0c\u5e76\u5c06\u6d88\u606f\u8fd4\u56de\u7ed9\u8c03\u7528\u5185\u5bb9\u3002\n\u6574\u4e2a\u5185\u5bb9\u4f7f\u7528\u7684 ",(0,o.jsx)(n.code,{children:"chrome.message"})," \u673a\u5236\u8fdb\u884c\u901a\u4fe1\u3002"]}),"\n",(0,o.jsxs)(n.h3,{id:"\u521b\u5efa\u4e00\u4e2a-sandbox-page",children:["\u521b\u5efa\u4e00\u4e2a ",(0,o.jsx)(n.code,{children:"Sandbox Page"})]}),"\n",(0,o.jsxs)(n.ol,{children:["\n",(0,o.jsxs)(n.li,{children:["\u8def\u5f84\u4e3a ",(0,o.jsx)(n.code,{children:"plasmo"})," \u76ee\u5f55\u4e0b\u7684 ",(0,o.jsx)(n.code,{children:"sandbox.ts"})," \u6216\u8005 ",(0,o.jsx)(n.code,{children:"sandbox/Sandbox Page",id:"\u521b\u5efa\u4e00\u4e2a-sandbox-page",level:3},{value:"\u8c03\u7528\u65b9\u9875\u9762",id:"\u8c03\u7528\u65b9\u9875\u9762",level:3}];function l(e){const n={code:"code",h1:"h1",h2:"h2",h3:"h3",li:"li",ol:"ol",p:"p",pre:"pre",...(0,d.a)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(n.h1,{id:"sandbox-pages",children:"sandbox pages"}),"\n",(0,o.jsx)(n.h2,{id:"\u7b80\u5355\u8bf4\u660e",children:"\u7b80\u5355\u8bf4\u660e"}),"\n",(0,o.jsxs)(n.p,{children:[(0,o.jsx)(n.code,{children:"Sandbox Pages"})," \u662f\u4e00\u79cd\u7279\u6b8a\u7684\u6269\u5c55\u9875\u9762\uff0c\u4ed6\u533a\u522b\u4e8e\u6574\u4f53\u7684 CSP \u9650\u5236\u3002\n\u6bd4\u5982\uff0c\u4f60\u53ef\u4ee5\u5728\u5176\u4e2d\u6267\u884c ",(0,o.jsx)(n.code,{children:"eval"})," \u7684\u76f8\u5173\u4ee3\u7801\u903b\u8f91\uff0c\u800c\u4e0d\u5f71\u54cd\u6574\u4e2a\u7684\u5b89\u5168\u73af\u5883\u3002\n\u4f7f\u7528",(0,o.jsx)(n.code,{children:"Sandbox Pages"})," \u6267\u884c\u76f8\u5173\u4ee3\u7801\uff0c\u4f60\u5c06\u83b7\u5f97\u66f4\u9ad8\u7684\u4f18\u5148\u7ea7\u548c\u66f4\u5b89\u5168\u7684\u9694\u79bb\u73af\u5883\u3002"]}),"\n",(0,o.jsx)(n.h2,{id:"\u4f7f\u7528\u5b9e\u4f8b",children:"\u4f7f\u7528\u5b9e\u4f8b"}),"\n",(0,o.jsxs)(n.p,{children:["\u901a\u5e38\uff0c\u4e00\u4e2a",(0,o.jsx)(n.code,{children:"Sandbox Page"})," \u4f1a\u6302\u8f7d\u5230\u4e00\u4e2a ",(0,o.jsx)(n.code,{children:"Content Script UI"}),"\u9875\u9762\u7ed3\u6784\u4e2d\u3002\n\u4e0b\u8fb9\u7684\u4e00\u4e2a\u5b9e\u4f8b \u5c55\u793a\u4e86\u5982\u4f55 \u4f7f\u7528",(0,o.jsx)(n.code,{children:"Sandbox Pages"})," \u6267\u884c ",(0,o.jsx)(n.code,{children:"eval"})," \u7684\u7cfb\u7edf\u8c03\u7528\uff0c\u5e76\u5c06\u6d88\u606f\u8fd4\u56de\u7ed9\u8c03\u7528\u5185\u5bb9\u3002\n\u6574\u4e2a\u5185\u5bb9\u4f7f\u7528\u7684 ",(0,o.jsx)(n.code,{children:"chrome.message"})," \u673a\u5236\u8fdb\u884c\u901a\u4fe1\u3002"]}),"\n",(0,o.jsxs)(n.h3,{id:"\u521b\u5efa\u4e00\u4e2a-sandbox-page",children:["\u521b\u5efa\u4e00\u4e2a ",(0,o.jsx)(n.code,{children:"Sandbox Page"})]}),"\n",(0,o.jsxs)(n.ol,{children:["\n",(0,o.jsxs)(n.li,{children:["\u8def\u5f84\u4e3a ",(0,o.jsx)(n.code,{children:"plasmo"})," \u76ee\u5f55\u4e0b\u7684 ",(0,o.jsx)(n.code,{children:"sandbox.ts"})," \u6216\u8005 ",(0,o.jsx)(n.code,{children:"sandbox/{hailingFrequency}
; // undefined\n'})}),"\n",(0,t.jsx)(n.p,{children:"\u672a\u5b9a\u4e49\u521d\u59cb\u503c\uff0c\u5c06\u663e\u793a undefined\u3002"}),"\n",(0,t.jsxs)(n.p,{children:["\u5728 ",(0,t.jsx)(n.code,{children:"options.tsx"}),"\u4e2d\u8ba2\u9605\u6570\u636e\uff0c\u5e76\u63d0\u4f9b\u4e0d\u4e00\u6837\u7684\u521d\u59cb\u503c\u3002"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-ts",metastring:'title="options.tsx"',children:'const [hailingFrequency] = useStorage("hailing", "147");\nreturn{hailingFrequency}
; // "147"\n'})}),"\n",(0,t.jsx)(n.p,{children:"\u5b9a\u4e49\u4e86\u4e0d\u4e00\u6837\u7684\u521d\u59cb\u503c\uff0c\u663e\u793a\u4e3a 147\u3002"}),"\n",(0,t.jsxs)(n.p,{children:["\u6700\u540e\uff0c\u5f53\u4f60\u5728 ",(0,t.jsx)(n.code,{children:"popup"})," \u4e2d\u8f93\u5165\u503c\u7684\u65f6\u5019\uff0c\u8be5\u503c\u5c06\u901a\u8fc7 ",(0,t.jsx)(n.code,{children:"storage"})," \u540c\u6b65\u5230\u5404\u4e2a\u6a21\u5757\u3002"]}),"\n",(0,t.jsx)(n.h3,{id:"\u6e32\u67d3-\u521d\u59cb\u503c-\u5e76\u6301\u4e45\u5316",children:"\u6e32\u67d3 \u521d\u59cb\u503c (\u5e76\u6301\u4e45\u5316)"}),"\n",(0,t.jsxs)(n.p,{children:["\u521d\u59cb\u5316 ",(0,t.jsx)(n.code,{children:"storage"})," \u7684\u65f6\u5019\uff0c\u4f20\u9012\u4e00\u4e2a\u51fd\u6570\u3002\u8be5\u51fd\u6570\u63d0\u4f9b\u4e00\u4e2a\u53c2\u6570\uff0c\u8868\u793a\u5f53\u524d storage \u4e2d\u7684\u503c\u3002\n\u5982\u679c\u5df2\u7ecf\u88ab\u5176\u4ed6\u7684\u7ec4\u4ef6\u521d\u59cb\u5316\u6216\u8005\u53d8\u66f4\uff0c\u8be5\u503c\u5c06\u4e3a\u6700\u65b0\u7684\u503c\uff0c\u5426\u5219\uff0c\u5c06\u4e3a undefined\u3002"]}),"\n",(0,t.jsx)(n.p,{children:"\u7528\u5982\u4e0b\u7684\u5b9e\u4f8b\u6f14\u793a:"}),"\n",(0,t.jsx)(n.p,{children:"\u8bbe\u7f6e\u5982\u4e0b\u7684 popup"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-ts",metastring:'title="popup.tsx"',children:'const [hailingFrequency, setHailingFrequency] = useStorage("hailing", (v) => v === undefined ? "200": v)\n...\n{hailingFrequency} // "200"\n'})}),"\n",(0,t.jsx)(n.p,{children:"\u7136\u540e\uff0c\u8bbe\u7f6e\u5982\u4e0b\u7684 options"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-ts",metastring:'title="options.tsx"',children:'const [hailingFrequency, setHailingFrequency] = useStorage("hailing", (v) => v === undefined ? "100": v)\n...\n{hailingFrequency} // "100"\n'})}),"\n",(0,t.jsx)(n.p,{children:"\u4ee5\u4e0a\uff0c\u4f1a\u6839\u636e options \u6216\u8005 popup \u6253\u5f00\u7684\u5148\u540e\u987a\u5e8f\u4e0d\u540c\uff0c\u800c\u786e\u5b9a\u4e3a\u4e0d\u540c\u7684\u503c\u3002"}),"\n",(0,t.jsxs)(n.ol,{children:["\n",(0,t.jsx)(n.li,{children:"\u5148\u6253\u5f00 popup ,\u503c\u4f1a\u521d\u59cb\u5316\u4e3a 100"}),"\n",(0,t.jsx)(n.li,{children:"\u5148\u6253\u5f00 options , \u503c\u4f1a\u521d\u59cb\u5316\u4e3a 200"}),"\n"]}),"\n",(0,t.jsx)(n.h3,{id:"\u9ad8\u7ea7\u7528\u6cd5",children:"\u9ad8\u7ea7\u7528\u6cd5"}),"\n",(0,t.jsx)(n.p,{children:"\u53ef\u4ee5\u4f7f\u7528 useStorage \u7684\u4e0d\u540c\u8fd4\u56de\u503c\uff0c\u786e\u5b9a\u4e0d\u540c\u7684\u53d8\u66f4\u8303\u56f4\u3002"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:"setStoreValue \u5c06\u4f1a\u540c\u6b65\u6570\u636e\u5230\u5176\u4ed6\u7684\u7ec4\u4ef6"}),"\n",(0,t.jsx)(n.li,{children:"setRenderValue \u53ea\u5f71\u54cd\u5f53\u524d\u7684\u72b6\u6001"}),"\n",(0,t.jsx)(n.li,{children:"remove \u5219\u662f\u5220\u9664 storage \u6570\u636e"}),"\n"]}),"\n",(0,t.jsx)(n.p,{children:"\u5177\u4f53\u5b9e\u4f8b\u5982\u4e0b"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-typescript",children:'const [\n hailingFrequency,\n setHailingFrequency,\n { setRenderValue, setStoreValue, remove },\n] = useStorage("hailing");\n\nreturn (\n <>\n{hailingFrequency}
; // undefined\n'})}),"\n",(0,t.jsx)(n.p,{children:"\u672a\u5b9a\u4e49\u521d\u59cb\u503c\uff0c\u5c06\u663e\u793a undefined\u3002"}),"\n",(0,t.jsxs)(n.p,{children:["\u5728 ",(0,t.jsx)(n.code,{children:"options.tsx"}),"\u4e2d\u8ba2\u9605\u6570\u636e\uff0c\u5e76\u63d0\u4f9b\u4e0d\u4e00\u6837\u7684\u521d\u59cb\u503c\u3002"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-ts",metastring:'title="options.tsx"',children:'const [hailingFrequency] = useStorage("hailing", "147");\nreturn{hailingFrequency}
; // "147"\n'})}),"\n",(0,t.jsx)(n.p,{children:"\u5b9a\u4e49\u4e86\u4e0d\u4e00\u6837\u7684\u521d\u59cb\u503c\uff0c\u663e\u793a\u4e3a 147\u3002"}),"\n",(0,t.jsxs)(n.p,{children:["\u6700\u540e\uff0c\u5f53\u4f60\u5728 ",(0,t.jsx)(n.code,{children:"popup"})," \u4e2d\u8f93\u5165\u503c\u7684\u65f6\u5019\uff0c\u8be5\u503c\u5c06\u901a\u8fc7 ",(0,t.jsx)(n.code,{children:"storage"})," \u540c\u6b65\u5230\u5404\u4e2a\u6a21\u5757\u3002"]}),"\n",(0,t.jsx)(n.h3,{id:"\u6e32\u67d3-\u521d\u59cb\u503c-\u5e76\u6301\u4e45\u5316",children:"\u6e32\u67d3 \u521d\u59cb\u503c (\u5e76\u6301\u4e45\u5316)"}),"\n",(0,t.jsxs)(n.p,{children:["\u521d\u59cb\u5316 ",(0,t.jsx)(n.code,{children:"storage"})," \u7684\u65f6\u5019\uff0c\u4f20\u9012\u4e00\u4e2a\u51fd\u6570\u3002\u8be5\u51fd\u6570\u63d0\u4f9b\u4e00\u4e2a\u53c2\u6570\uff0c\u8868\u793a\u5f53\u524d storage \u4e2d\u7684\u503c\u3002\n\u5982\u679c\u5df2\u7ecf\u88ab\u5176\u4ed6\u7684\u7ec4\u4ef6\u521d\u59cb\u5316\u6216\u8005\u53d8\u66f4\uff0c\u8be5\u503c\u5c06\u4e3a\u6700\u65b0\u7684\u503c\uff0c\u5426\u5219\uff0c\u5c06\u4e3a undefined\u3002"]}),"\n",(0,t.jsx)(n.p,{children:"\u7528\u5982\u4e0b\u7684\u5b9e\u4f8b\u6f14\u793a:"}),"\n",(0,t.jsx)(n.p,{children:"\u8bbe\u7f6e\u5982\u4e0b\u7684 popup"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-ts",metastring:'title="popup.tsx"',children:'const [hailingFrequency, setHailingFrequency] = useStorage("hailing", (v) => v === undefined ? "200": v)\n...\n{hailingFrequency} // "200"\n'})}),"\n",(0,t.jsx)(n.p,{children:"\u7136\u540e\uff0c\u8bbe\u7f6e\u5982\u4e0b\u7684 options"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-ts",metastring:'title="options.tsx"',children:'const [hailingFrequency, setHailingFrequency] = useStorage("hailing", (v) => v === undefined ? "100": v)\n...\n{hailingFrequency} // "100"\n'})}),"\n",(0,t.jsx)(n.p,{children:"\u4ee5\u4e0a\uff0c\u4f1a\u6839\u636e options \u6216\u8005 popup \u6253\u5f00\u7684\u5148\u540e\u987a\u5e8f\u4e0d\u540c\uff0c\u800c\u786e\u5b9a\u4e3a\u4e0d\u540c\u7684\u503c\u3002"}),"\n",(0,t.jsxs)(n.ol,{children:["\n",(0,t.jsx)(n.li,{children:"\u5148\u6253\u5f00 popup ,\u503c\u4f1a\u521d\u59cb\u5316\u4e3a 100"}),"\n",(0,t.jsx)(n.li,{children:"\u5148\u6253\u5f00 options , \u503c\u4f1a\u521d\u59cb\u5316\u4e3a 200"}),"\n"]}),"\n",(0,t.jsx)(n.h3,{id:"\u9ad8\u7ea7\u7528\u6cd5",children:"\u9ad8\u7ea7\u7528\u6cd5"}),"\n",(0,t.jsx)(n.p,{children:"\u53ef\u4ee5\u4f7f\u7528 useStorage \u7684\u4e0d\u540c\u8fd4\u56de\u503c\uff0c\u786e\u5b9a\u4e0d\u540c\u7684\u53d8\u66f4\u8303\u56f4\u3002"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:"setStoreValue \u5c06\u4f1a\u540c\u6b65\u6570\u636e\u5230\u5176\u4ed6\u7684\u7ec4\u4ef6"}),"\n",(0,t.jsx)(n.li,{children:"setRenderValue \u53ea\u5f71\u54cd\u5f53\u524d\u7684\u72b6\u6001"}),"\n",(0,t.jsx)(n.li,{children:"remove \u5219\u662f\u5220\u9664 storage \u6570\u636e"}),"\n"]}),"\n",(0,t.jsx)(n.p,{children:"\u5177\u4f53\u5b9e\u4f8b\u5982\u4e0b"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-typescript",children:'const [\n hailingFrequency,\n setHailingFrequency,\n { setRenderValue, setStoreValue, remove },\n] = useStorage("hailing");\n\nreturn (\n <>\ncontextMenu",id:"\u521b\u5efa\u81ea\u5b9a\u4e49\u4e0a\u4e0b\u6587\u83dc\u5355-contextmenu",level:3}];function l(e){const n={a:"a",admonition:"admonition",code:"code",h1:"h1",h2:"h2",h3:"h3",img:"img",p:"p",pre:"pre",...(0,c.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(n.h1,{id:"background-service-worker",children:"Background Service Worker"}),"\n",(0,r.jsx)(n.h2,{id:"\u76f8\u5173\u4ecb\u7ecd",children:"\u76f8\u5173\u4ecb\u7ecd"}),"\n",(0,r.jsxs)(n.p,{children:["\u6d4f\u89c8\u5668\u6269\u5c55\u4e5f\u5206\u4e3a ",(0,r.jsx)(n.code,{children:"Background"}),"\uff0c\u5b83\u8fd0\u884c\u7684\u4e0a\u4e0b\u6587 \u79f0\u4e3a ",(0,r.jsx)(n.a,{href:"https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers",children:"Service \u4e0a\u4e0b\u6587"}),"\u3002\n\u5728\u8fd9\u4e2a\u4e0a\u4e0b\u6587\uff0c\u4f60\u53ef\u4ee5\u8131\u79bb\u5f00\u5f88\u591a\u675f\u7f1a\uff0c\u5c3d\u53ef\u80fd\u53d1\u6325\u4f60\u7684\u60f3\u8c61\u7a7a\u95f4\u3002 \u6bd4\u5982: \u4f60\u518d\u4e5f\u4e0d\u7528\u62c5\u5fc3 ",(0,r.jsx)(n.code,{children:"CORS"})," \u9650\u5236\uff0c\u53ef\u4ee5\u83b7\u53d6\u4f60\u60f3\u8981\u7684\u4efb\u610f\u7684\u8d44\u6e90\u3002\n\u901a\u5e38\u7684\u64cd\u4f5c\u662f\u628a\u4e00\u4e9b\uff0c\u76f8\u5bf9\u8017\u65f6\u7684\u64cd\u4f5c\u653e\u5728\u540e\u53f0\u6267\u884c\u3002"]}),"\n",(0,r.jsx)(n.h3,{id:"\u57fa\u7840\u4f7f\u7528",children:"\u57fa\u7840\u4f7f\u7528"}),"\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.code,{children:"plasmo"})," \u63d0\u4f9b\u4e86\u4e00\u4e2a\u53ca\u7b80\u5355\u7684\u65b9\u5f0f\u6dfb\u52a0 ",(0,r.jsx)(n.code,{children:"Background"}),"\u3002 \u5728 ",(0,r.jsx)(n.code,{children:"plasmo"}),"\u76ee\u5f55\u521b\u5efa",(0,r.jsx)(n.code,{children:"background.ts"}),"\u5373\u53ef\u3002"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:'title="background.ts"',children:'export {};\n\nconsole.log(\n "Live now; make now always the most precious time. Now will never come again."\n);\n'})}),"\n",(0,r.jsx)(n.admonition,{type:"tip",children:(0,r.jsxs)(n.p,{children:["\u56e0\u4e3a,",(0,r.jsx)(n.code,{children:"plasmo"})," \u9ed8\u8ba4\u4f7f\u7528 ",(0,r.jsx)(n.code,{children:"typescript"})," \u3002\u4ed6\u90a3\u4efb\u4f55\u7684\u4e00\u4e2a\u6587\u4ef6\u5f53\u6210\u4e00\u4e2a ",(0,r.jsx)(n.code,{children:"module"}),"\u3002\n\u5982\u679c\u4f60\u6ca1\u6709\u5176\u4ed6\u7684 ",(0,r.jsx)(n.code,{children:"import"})," \u6216\u8005 ",(0,r.jsx)(n.code,{children:"export"}),", \u4f60\u9700\u8981\u5728\u5f00\u5934\u6dfb\u52a0 ",(0,r.jsx)(n.code,{children:"export {};"})]})}),"\n",(0,r.jsxs)(n.p,{children:["\u91cd\u65b0\u52a0\u8f7d\u4f60\u7684\u6269\u5c55\uff0c\u6253\u5f00 ",(0,r.jsx)(n.code,{children:"Service Worker"}),"\u3002"]}),"\n",(0,r.jsx)(n.p,{children:(0,r.jsx)(n.img,{src:o(4189).Z+"",width:"446",height:"290"})}),"\n",(0,r.jsxs)(n.p,{children:["\u70b9\u5f00 ",(0,r.jsx)(n.code,{children:"Service Worker"})," \u5217\u8868\u3002\n",(0,r.jsx)(n.img,{src:o(9446).Z+"",width:"1016",height:"115"})]}),"\n",(0,r.jsx)(n.p,{children:"\u606d\u559c\u4f60! \u4f60\u63a8\u5f00\u4e86\u65b0\u4e16\u754c\u7684\u5927\u95e8\u3002"}),"\n",(0,r.jsxs)(n.p,{children:["\u5b98\u65b9\u63d0\u4f9b\u7684\u5b9e\u4f8b\u53ef\u4ee5\u53c2\u8003\uff1a ",(0,r.jsx)(n.a,{href:"https://github.com/PlasmoHQ/examples/tree/main/with-background",children:"with-background"})]}),"\n",(0,r.jsx)(n.h3,{id:"\u6570\u636e\u6301\u4e45\u5316",children:"\u6570\u636e\u6301\u4e45\u5316"}),"\n",(0,r.jsx)(n.admonition,{type:"tip",children:(0,r.jsxs)(n.p,{children:["\u4f7f\u7528 ",(0,r.jsx)(n.code,{children:"plasmo"})," \u5f00\u53d1\u7684\u6a21\u5757 \u5728 ",(0,r.jsx)(n.code,{children:"dev"})," \u6a21\u5f0f\u4e0b\uff0c Service \u603b\u4fdd\u6301 active \u7684\u72b6\u6001\u3002"]})}),"\n",(0,r.jsxs)(n.p,{children:["\u901a\u5e38\u60c5\u51b5\u4e0b\uff0c\u6d4f\u89c8\u5668\u7684\u6269\u5c55\u7a7a\u95f2 5 \u5206\u949f\u5de6\u53f3\uff0c\u5c31\u4f1a\u88ab\u6d4f\u89c8\u5668\u5f53\u505a\u7a7a\u95f2\u8fdb\u7a0b\u6e05\u7406\u3002\n\u6e05\u9664\u4ee5\u540e\uff0c\u4f60\u7684 ",(0,r.jsx)(n.code,{children:"Service"})," \u811a\u672c\u4e2d\u7684\u6570\u636e\u5c06\u4f1a\u6d88\u5931\u3002"]}),"\n",(0,r.jsx)(n.p,{children:"\u6240\u4ee5\uff0c\u4f60\u9700\u8981\u4e00\u4e2a\u5b58\u50a8\u5e93\uff0c\u4fdd\u6301\u4f60\u7684\u4e0a\u4e0b\u6587\u4fe1\u606f\u3002"}),"\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.a,{href:"https://docs.plasmo.com/framework/storage",children:"storage"})," \u6a21\u5757\u53ef\u4ee5\u89e3\u51b3\u8fd9\u4e2a\u95ee\u9898\u3002\n\u5f53\u7136\uff0c\u66f4\u9ad8\u7ea7\u7684\u529e\u6cd5\u662f\u901a\u8fc7",(0,r.jsx)(n.code,{children:"fetch"})," \u6216\u8005 ",(0,r.jsx)(n.code,{children:"websocket"}),"\u5c06\u672c\u5730\u7684\u72b6\u6001\u5b58\u50a8\u5230\u8fdc\u7aef\u7684\u6570\u636e\u5e93\u3002"]}),"\n",(0,r.jsx)(n.h2,{id:"background-\u4f7f\u7528\u5b9e\u4f8b",children:"Background \u4f7f\u7528\u5b9e\u4f8b"}),"\n",(0,r.jsxs)(n.h3,{id:"\u521b\u5efa\u81ea\u5b9a\u4e49\u4e0a\u4e0b\u6587\u83dc\u5355-contextmenu",children:["\u521b\u5efa\u81ea\u5b9a\u4e49\u4e0a\u4e0b\u6587\u83dc\u5355 ",(0,r.jsx)(n.code,{children:"contextMenu"})]}),"\n",(0,r.jsxs)(n.p,{children:["\u5728 ",(0,r.jsx)(n.code,{children:"background.ts"})," \u4e2d\u6dfb\u52a0\u5b9a\u4e49:"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:'title="background.ts"',children:'chrome.runtime.onInstalled.addListener(() => {\n // \u521b\u5efa\u4e0a\u4e0b\u6587\u83dc\u5355\u9879\n chrome.contextMenus.create({\n id: "myExtensionOpenPage",\n title: "Open My Page",\n contexts: ["all"],\n });\n\n chrome.contextMenus.create({\n id: "Github",\n title: "Open Github",\n contexts: ["all"],\n parentId: "myExtensionOpenPage",\n });\n});\n\n// \u76d1\u542c\u4e0a\u4e0b\u6587\u83dc\u5355\u7684\u70b9\u51fb\u4e8b\u4ef6\nchrome.contextMenus.onClicked.addListener((info, tab) => {\n if (info.menuItemId === "Github") {\n // \u8981\u6253\u5f00\u7684\u9875\u9762 URL\n const pageUrl = "https://creatorsdao.github.io/plasmo-co-learn/docs/intro/";\n\n // \u6253\u5f00\u65b0\u6807\u7b7e\u9875\n chrome.tabs.create({ url: pageUrl });\n }\n});\n'})}),"\n",(0,r.jsxs)(n.p,{children:["\u7136\u540e\u5728 ",(0,r.jsx)(n.code,{children:"package.json"})," \u4e2d\u6dfb\u52a0\u6743\u9650\u58f0\u660e:"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-json",metastring:'title="package.json"',children:'....\n"permissions": [\n "tabs","commands"\n],\n....\n'})}),"\n",(0,r.jsx)(n.p,{children:"\u4ee5\u4e0a\u5c31\u521b\u5efa\u4e86\u4e00\u4e2a\u53f3\u952e\u8df3\u8f6c Github \u7684\u4e0a\u4e0b\u6587\u83dc\u5355\u3002"})]})}function h(e={}){const{wrapper:n}={...(0,c.a)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(l,{...e})}):l(e)}},4189:(e,n,o)=>{o.d(n,{Z:()=>r});const r=o.p+"assets/images/creators-e9ca3eb36a373cdcf0ea64aced818f7f.jpg"},9446:(e,n,o)=>{o.d(n,{Z:()=>r});const r=o.p+"assets/images/log-ed4ead263343d71e18ea0a2a0d747280.jpg"},1151:(e,n,o)=>{o.d(n,{Z:()=>d,a:()=>t});var r=o(7294);const c={},s=r.createContext(c);function t(e){const n=r.useContext(s);return r.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function d(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(c):e.components||c:t(e.components),r.createElement(s.Provider,{value:n},e.children)}}}]);
\ No newline at end of file
+"use strict";(self.webpackChunkplasmo_co_learn=self.webpackChunkplasmo_co_learn||[]).push([[9209],{9558:(e,n,o)=>{o.r(n),o.d(n,{assets:()=>i,contentTitle:()=>t,default:()=>h,frontMatter:()=>s,metadata:()=>d,toc:()=>a});var r=o(5893),c=o(1151);const s={sidebar_position:3},t="Background Service Worker",d={id:"module4/background",title:"Background Service Worker",description:"\u76f8\u5173\u4ecb\u7ecd",source:"@site/docs/module4/background.mdx",sourceDirName:"module4",slug:"/module4/background",permalink:"/plasmo-co-learn/docs/module4/background",draft:!1,unlisted:!1,editUrl:"https://github.com/CreatorsDAO/plasmo-co-learn/tree/main/docs/module4/background.mdx",tags:[],version:"current",lastUpdatedAt:1703894918,formattedLastUpdatedAt:"Dec 30, 2023",sidebarPosition:3,frontMatter:{sidebar_position:3},sidebar:"tutorialSidebar",previous:{title:"Remote Code",permalink:"/plasmo-co-learn/docs/module4/remote"},next:{title:"Message API",permalink:"/plasmo-co-learn/docs/module4/message"}},i={},a=[{value:"\u76f8\u5173\u4ecb\u7ecd",id:"\u76f8\u5173\u4ecb\u7ecd",level:2},{value:"\u57fa\u7840\u4f7f\u7528",id:"\u57fa\u7840\u4f7f\u7528",level:3},{value:"\u6570\u636e\u6301\u4e45\u5316",id:"\u6570\u636e\u6301\u4e45\u5316",level:3},{value:"Background \u4f7f\u7528\u5b9e\u4f8b",id:"background-\u4f7f\u7528\u5b9e\u4f8b",level:2},{value:"\u521b\u5efa\u81ea\u5b9a\u4e49\u4e0a\u4e0b\u6587\u83dc\u5355 contextMenu",id:"\u521b\u5efa\u81ea\u5b9a\u4e49\u4e0a\u4e0b\u6587\u83dc\u5355-contextmenu",level:3}];function l(e){const n={a:"a",admonition:"admonition",code:"code",h1:"h1",h2:"h2",h3:"h3",img:"img",p:"p",pre:"pre",...(0,c.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(n.h1,{id:"background-service-worker",children:"Background Service Worker"}),"\n",(0,r.jsx)(n.h2,{id:"\u76f8\u5173\u4ecb\u7ecd",children:"\u76f8\u5173\u4ecb\u7ecd"}),"\n",(0,r.jsxs)(n.p,{children:["\u6d4f\u89c8\u5668\u6269\u5c55\u4e5f\u5206\u4e3a ",(0,r.jsx)(n.code,{children:"Background"}),"\uff0c\u5b83\u8fd0\u884c\u7684\u4e0a\u4e0b\u6587 \u79f0\u4e3a ",(0,r.jsx)(n.a,{href:"https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers",children:"Service \u4e0a\u4e0b\u6587"}),"\u3002\n\u5728\u8fd9\u4e2a\u4e0a\u4e0b\u6587\uff0c\u4f60\u53ef\u4ee5\u8131\u79bb\u5f00\u5f88\u591a\u675f\u7f1a\uff0c\u5c3d\u53ef\u80fd\u53d1\u6325\u4f60\u7684\u60f3\u8c61\u7a7a\u95f4\u3002 \u6bd4\u5982: \u4f60\u518d\u4e5f\u4e0d\u7528\u62c5\u5fc3 ",(0,r.jsx)(n.code,{children:"CORS"})," \u9650\u5236\uff0c\u53ef\u4ee5\u83b7\u53d6\u4f60\u60f3\u8981\u7684\u4efb\u610f\u7684\u8d44\u6e90\u3002\n\u901a\u5e38\u7684\u64cd\u4f5c\u662f\u628a\u4e00\u4e9b\uff0c\u76f8\u5bf9\u8017\u65f6\u7684\u64cd\u4f5c\u653e\u5728\u540e\u53f0\u6267\u884c\u3002"]}),"\n",(0,r.jsx)(n.h3,{id:"\u57fa\u7840\u4f7f\u7528",children:"\u57fa\u7840\u4f7f\u7528"}),"\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.code,{children:"plasmo"})," \u63d0\u4f9b\u4e86\u4e00\u4e2a\u53ca\u7b80\u5355\u7684\u65b9\u5f0f\u6dfb\u52a0 ",(0,r.jsx)(n.code,{children:"Background"}),"\u3002 \u5728 ",(0,r.jsx)(n.code,{children:"plasmo"}),"\u76ee\u5f55\u521b\u5efa",(0,r.jsx)(n.code,{children:"background.ts"}),"\u5373\u53ef\u3002"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:'title="background.ts"',children:'export {};\n\nconsole.log(\n "Live now; make now always the most precious time. Now will never come again."\n);\n'})}),"\n",(0,r.jsx)(n.admonition,{type:"tip",children:(0,r.jsxs)(n.p,{children:["\u56e0\u4e3a,",(0,r.jsx)(n.code,{children:"plasmo"})," \u9ed8\u8ba4\u4f7f\u7528 ",(0,r.jsx)(n.code,{children:"typescript"})," \u3002\u4ed6\u90a3\u4efb\u4f55\u7684\u4e00\u4e2a\u6587\u4ef6\u5f53\u6210\u4e00\u4e2a ",(0,r.jsx)(n.code,{children:"module"}),"\u3002\n\u5982\u679c\u4f60\u6ca1\u6709\u5176\u4ed6\u7684 ",(0,r.jsx)(n.code,{children:"import"})," \u6216\u8005 ",(0,r.jsx)(n.code,{children:"export"}),", \u4f60\u9700\u8981\u5728\u5f00\u5934\u6dfb\u52a0 ",(0,r.jsx)(n.code,{children:"export {};"})]})}),"\n",(0,r.jsxs)(n.p,{children:["\u91cd\u65b0\u52a0\u8f7d\u4f60\u7684\u6269\u5c55\uff0c\u6253\u5f00 ",(0,r.jsx)(n.code,{children:"Service Worker"}),"\u3002"]}),"\n",(0,r.jsx)(n.p,{children:(0,r.jsx)(n.img,{src:o(4189).Z+"",width:"446",height:"290"})}),"\n",(0,r.jsxs)(n.p,{children:["\u70b9\u5f00 ",(0,r.jsx)(n.code,{children:"Service Worker"})," \u5217\u8868\u3002\n",(0,r.jsx)(n.img,{src:o(9446).Z+"",width:"1016",height:"115"})]}),"\n",(0,r.jsx)(n.p,{children:"\u606d\u559c\u4f60! \u4f60\u63a8\u5f00\u4e86\u65b0\u4e16\u754c\u7684\u5927\u95e8\u3002"}),"\n",(0,r.jsxs)(n.p,{children:["\u5b98\u65b9\u63d0\u4f9b\u7684\u5b9e\u4f8b\u53ef\u4ee5\u53c2\u8003\uff1a ",(0,r.jsx)(n.a,{href:"https://github.com/PlasmoHQ/examples/tree/main/with-background",children:"with-background"})]}),"\n",(0,r.jsx)(n.h3,{id:"\u6570\u636e\u6301\u4e45\u5316",children:"\u6570\u636e\u6301\u4e45\u5316"}),"\n",(0,r.jsx)(n.admonition,{type:"tip",children:(0,r.jsxs)(n.p,{children:["\u4f7f\u7528 ",(0,r.jsx)(n.code,{children:"plasmo"})," \u5f00\u53d1\u7684\u6a21\u5757 \u5728 ",(0,r.jsx)(n.code,{children:"dev"})," \u6a21\u5f0f\u4e0b\uff0c Service \u603b\u4fdd\u6301 active \u7684\u72b6\u6001\u3002"]})}),"\n",(0,r.jsxs)(n.p,{children:["\u901a\u5e38\u60c5\u51b5\u4e0b\uff0c\u6d4f\u89c8\u5668\u7684\u6269\u5c55\u7a7a\u95f2 5 \u5206\u949f\u5de6\u53f3\uff0c\u5c31\u4f1a\u88ab\u6d4f\u89c8\u5668\u5f53\u505a\u7a7a\u95f2\u8fdb\u7a0b\u6e05\u7406\u3002\n\u6e05\u9664\u4ee5\u540e\uff0c\u4f60\u7684 ",(0,r.jsx)(n.code,{children:"Service"})," \u811a\u672c\u4e2d\u7684\u6570\u636e\u5c06\u4f1a\u6d88\u5931\u3002"]}),"\n",(0,r.jsx)(n.p,{children:"\u6240\u4ee5\uff0c\u4f60\u9700\u8981\u4e00\u4e2a\u5b58\u50a8\u5e93\uff0c\u4fdd\u6301\u4f60\u7684\u4e0a\u4e0b\u6587\u4fe1\u606f\u3002"}),"\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.a,{href:"https://docs.plasmo.com/framework/storage",children:"storage"})," \u6a21\u5757\u53ef\u4ee5\u89e3\u51b3\u8fd9\u4e2a\u95ee\u9898\u3002\n\u5f53\u7136\uff0c\u66f4\u9ad8\u7ea7\u7684\u529e\u6cd5\u662f\u901a\u8fc7",(0,r.jsx)(n.code,{children:"fetch"})," \u6216\u8005 ",(0,r.jsx)(n.code,{children:"websocket"}),"\u5c06\u672c\u5730\u7684\u72b6\u6001\u5b58\u50a8\u5230\u8fdc\u7aef\u7684\u6570\u636e\u5e93\u3002"]}),"\n",(0,r.jsx)(n.h2,{id:"background-\u4f7f\u7528\u5b9e\u4f8b",children:"Background \u4f7f\u7528\u5b9e\u4f8b"}),"\n",(0,r.jsxs)(n.h3,{id:"\u521b\u5efa\u81ea\u5b9a\u4e49\u4e0a\u4e0b\u6587\u83dc\u5355-contextmenu",children:["\u521b\u5efa\u81ea\u5b9a\u4e49\u4e0a\u4e0b\u6587\u83dc\u5355 ",(0,r.jsx)(n.code,{children:"contextMenu"})]}),"\n",(0,r.jsxs)(n.p,{children:["\u5728 ",(0,r.jsx)(n.code,{children:"background.ts"})," \u4e2d\u6dfb\u52a0\u5b9a\u4e49:"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:'title="background.ts"',children:'chrome.runtime.onInstalled.addListener(() => {\n // \u521b\u5efa\u4e0a\u4e0b\u6587\u83dc\u5355\u9879\n chrome.contextMenus.create({\n id: "myExtensionOpenPage",\n title: "Open My Page",\n contexts: ["all"],\n });\n\n chrome.contextMenus.create({\n id: "Github",\n title: "Open Github",\n contexts: ["all"],\n parentId: "myExtensionOpenPage",\n });\n});\n\n// \u76d1\u542c\u4e0a\u4e0b\u6587\u83dc\u5355\u7684\u70b9\u51fb\u4e8b\u4ef6\nchrome.contextMenus.onClicked.addListener((info, tab) => {\n if (info.menuItemId === "Github") {\n // \u8981\u6253\u5f00\u7684\u9875\u9762 URL\n const pageUrl = "https://creatorsdao.github.io/plasmo-co-learn/docs/intro/";\n\n // \u6253\u5f00\u65b0\u6807\u7b7e\u9875\n chrome.tabs.create({ url: pageUrl });\n }\n});\n'})}),"\n",(0,r.jsxs)(n.p,{children:["\u7136\u540e\u5728 ",(0,r.jsx)(n.code,{children:"package.json"})," \u4e2d\u6dfb\u52a0\u6743\u9650\u58f0\u660e:"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-json",metastring:'title="package.json"',children:'....\n"permissions": [\n "tabs","commands"\n],\n....\n'})}),"\n",(0,r.jsx)(n.p,{children:"\u4ee5\u4e0a\u5c31\u521b\u5efa\u4e86\u4e00\u4e2a\u53f3\u952e\u8df3\u8f6c Github \u7684\u4e0a\u4e0b\u6587\u83dc\u5355\u3002"})]})}function h(e={}){const{wrapper:n}={...(0,c.a)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(l,{...e})}):l(e)}},4189:(e,n,o)=>{o.d(n,{Z:()=>r});const r=o.p+"assets/images/creators-e9ca3eb36a373cdcf0ea64aced818f7f.jpg"},9446:(e,n,o)=>{o.d(n,{Z:()=>r});const r=o.p+"assets/images/log-ed4ead263343d71e18ea0a2a0d747280.jpg"},1151:(e,n,o)=>{o.d(n,{Z:()=>d,a:()=>t});var r=o(7294);const c={},s=r.createContext(c);function t(e){const n=r.useContext(s);return r.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function d(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(c):e.components||c:t(e.components),r.createElement(s.Provider,{value:n},e.children)}}}]);
\ No newline at end of file
diff --git a/assets/js/4a0c03ec.2cb9d0cc.js b/assets/js/4a0c03ec.b767d821.js
similarity index 98%
rename from assets/js/4a0c03ec.2cb9d0cc.js
rename to assets/js/4a0c03ec.b767d821.js
index 7527487..6fde851 100644
--- a/assets/js/4a0c03ec.2cb9d0cc.js
+++ b/assets/js/4a0c03ec.b767d821.js
@@ -1 +1 @@
-"use strict";(self.webpackChunkplasmo_co_learn=self.webpackChunkplasmo_co_learn||[]).push([[7518],{6553:(e,n,s)=>{s.r(n),s.d(n,{assets:()=>r,contentTitle:()=>l,default:()=>h,frontMatter:()=>c,metadata:()=>t,toc:()=>o});var i=s(5893),d=s(1151);const c={sidebar_position:4},l="\u5f00\u53d1\u4f60\u7684\u7b2c\u4e00\u4e2a\u6d4f\u89c8\u5668\u6269\u5c55",t={id:"module1/first-extension",title:"\u5f00\u53d1\u4f60\u7684\u7b2c\u4e00\u4e2a\u6d4f\u89c8\u5668\u6269\u5c55",description:"cli demo",source:"@site/docs/module1/first-extension.mdx",sourceDirName:"module1",slug:"/module1/first-extension",permalink:"/plasmo-co-learn/docs/module1/first-extension",draft:!1,unlisted:!1,editUrl:"https://github.com/CreatorsDAO/plasmo-co-learn/tree/main/docs/module1/first-extension.mdx",tags:[],version:"current",lastUpdatedAt:1703480569,formattedLastUpdatedAt:"Dec 25, 2023",sidebarPosition:4,frontMatter:{sidebar_position:4},sidebar:"tutorialSidebar",previous:{title:"\u6b22\u8fce\u6765\u5230 plasmo \u7684\u4e16\u754c",permalink:"/plasmo-co-learn/docs/module1/introduction"},next:{title:"10 \u5206\u949f React",permalink:"/plasmo-co-learn/docs/module1/basic_react"}},r={},o=[{value:"\u73af\u5883\u51c6\u5907",id:"\u73af\u5883\u51c6\u5907",level:2},{value:"\u521b\u5efa\u9879\u76ee",id:"\u521b\u5efa\u9879\u76ee",level:2},{value:"\u5b89\u88c5\u8c03\u8bd5",id:"\u5b89\u88c5\u8c03\u8bd5",level:2},{value:"\u505a\u4e00\u4e9b\u4fee\u6539",id:"\u505a\u4e00\u4e9b\u4fee\u6539",level:2},{value:"\u6253\u5305\u9884\u53d1\u5e03",id:"\u6253\u5305\u9884\u53d1\u5e03",level:2}];function a(e){const n={a:"a",admonition:"admonition",code:"code",em:"em",h1:"h1",h2:"h2",img:"img",li:"li",ol:"ol",p:"p",pre:"pre",strong:"strong",...(0,d.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(n.h1,{id:"\u5f00\u53d1\u4f60\u7684\u7b2c\u4e00\u4e2a\u6d4f\u89c8\u5668\u6269\u5c55",children:"\u5f00\u53d1\u4f60\u7684\u7b2c\u4e00\u4e2a\u6d4f\u89c8\u5668\u6269\u5c55"}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.img,{alt:"cli demo",src:s(1245).Z+"",width:"1915",height:"1240"})}),"\n",(0,i.jsx)(n.h2,{id:"\u73af\u5883\u51c6\u5907",children:"\u73af\u5883\u51c6\u5907"}),"\n",(0,i.jsx)(n.p,{children:"\u5f00\u59cb\u4e4b\u524d\u5148\u68c0\u67e5\u4e0b\u4f60\u7684\u8fd0\u884c\u73af\u5883\u3002"}),"\n",(0,i.jsxs)(n.ol,{children:["\n",(0,i.jsxs)(n.li,{children:["\u5b89\u88c5 ",(0,i.jsx)(n.a,{href:"https://nodejs.org/en/learn/getting-started/how-to-install-nodejs",children:"Nodejs"}),"\u3002"]}),"\n"]}),"\n",(0,i.jsxs)(n.p,{children:["\u975e\u5e38\u5efa\u8bae\u4f60\u5b89\u88c5\u591a\u7248\u672c\u7ba1\u7406\u5de5\u5177 : ",(0,i.jsx)(n.a,{href:"https://github.com/nvm-sh/nvm",children:"nvm"}),"\u3002\n\u5982\u679c\u4f60\u662f windows \u7528\u6237\uff0c\u53ef\u80fd\u4f60\u9700\u8981\u8d39\u529b\u4e00\u70b9\u3002 \u4e0d\u8fc7\u8fd8\u597d\uff0c\u76f8\u6bd4\u4e8e\u5176\u4ed6\u7684\u5f00\u53d1\uff0c\u4f60\u5b89\u88c5\u5b8c\u6210 ",(0,i.jsx)(n.code,{children:"Nodejs"})," \u5373\u53ef\u3002"]}),"\n",(0,i.jsxs)(n.ol,{start:"2",children:["\n",(0,i.jsx)(n.li,{children:"\u5b89\u88c5\u4e00\u4e2a\u987a\u624b\u7684\u4ee3\u7801\u7f16\u8f91\u5668"}),"\n"]}),"\n",(0,i.jsxs)(n.p,{children:["\u4f60\u53ef\u4ee5\u9009\u62e9",(0,i.jsx)(n.code,{children:"Vs Code"})," \u6216\u8005 ",(0,i.jsx)(n.code,{children:"Web Storm"}),"\u3002\u56e0\u4e3a\u5f00\u53d1\u6d4f\u89c8\u5668\u6269\u5c55\uff0c\u548c web \u524d\u7aef\u5f00\u53d1\u5f88\u63a5\u8fd1\u3002\u6240\u4ee5\uff0c\u9700\u8981\u4f60\u6309\u7167\u81ea\u5df1\u7684\u4f7f\u7528\u4e60\u60ef\uff0c\u914d\u7f6e\u597d \u81ea\u52a8\u8865\u5168\uff0c\u4ee3\u7801\u63d0\u793a\u8fd9\u4e9b\u3002"]}),"\n",(0,i.jsxs)(n.ol,{start:"3",children:["\n",(0,i.jsxs)(n.li,{children:["\n",(0,i.jsxs)(n.p,{children:["\u4fdd\u8bc1\u4f60\u6709\u4e00\u4e2a\u65b9\u4fbf\u5feb\u6377\u7684\u5305\u7ba1\u7406\u5668\uff1a ",(0,i.jsx)(n.code,{children:"npm"}),", ",(0,i.jsx)(n.code,{children:"pnpm"}),", ",(0,i.jsx)(n.code,{children:"yarn"})," \u5747\u53ef , \u6781\u529b\u63a8\u8350 ",(0,i.jsx)(n.code,{children:"pnpm"})]}),"\n"]}),"\n",(0,i.jsxs)(n.li,{children:["\n",(0,i.jsxs)(n.p,{children:["\u4e00\u4e2a\u6269\u5c55\u8fd0\u884c\u73af\u5883\uff0c\u63a8\u8350 ",(0,i.jsx)(n.code,{children:"chrome"})]}),"\n"]}),"\n"]}),"\n",(0,i.jsx)(n.h2,{id:"\u521b\u5efa\u9879\u76ee",children:"\u521b\u5efa\u9879\u76ee"}),"\n",(0,i.jsx)(n.p,{children:"\u4f7f\u7528\u5982\u4e0b\u7684\u547d\u4ee4\u5b8c\u6210\uff0c\u9879\u76ee\u521d\u59cb\u5316\uff1a"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-shell",children:"\npnpm create plasmo\n# OR\nyarn create plasmo\n# OR\nnpm create plasmo\n\n"})}),"\n",(0,i.jsx)(n.p,{children:"\u8f93\u5165\u9879\u76ee\u540d\u79f0\u540e\uff0c\u4f60\u5c06\u5f97\u5230\u5982\u4e0b\u7684\u4ee3\u7801\u76ee\u5f55\uff1a"}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.img,{alt:"cli demo",src:s(4486).Z+"",width:"1164",height:"1062"})}),"\n",(0,i.jsx)(n.p,{children:"\u6587\u4ef6\u76ee\u5f55\u7b80\u5355\u4ecb\u7ecd\u5982\u4e0b:"}),"\n",(0,i.jsxs)(n.ol,{children:["\n",(0,i.jsxs)(n.li,{children:["\n",(0,i.jsx)(n.p,{children:"assets \u9759\u6001\u8d44\u6e90\u6587\u4ef6\uff0c\u5305\u62ec\u56fe\u6807\uff0c\u56fe\u7247\u7b49"}),"\n"]}),"\n",(0,i.jsxs)(n.li,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.code,{children:"node_modules"})," \u9879\u76ee\u4f7f\u7528\u5230\u7684\u7c7b\u5e93\u6587\u4ef6\uff0c\u5305\u542b\u4e86\u91cd\u8981\u7684 ",(0,i.jsx)(n.code,{children:"plasmo framework"})]}),"\n"]}),"\n",(0,i.jsxs)(n.li,{children:["\n",(0,i.jsx)(n.p,{children:"typescript.json \u4f5c\u4e3a typescript \u914d\u7f6e\u6587\u4ef6"}),"\n"]}),"\n",(0,i.jsxs)(n.li,{children:["\n",(0,i.jsx)(n.p,{children:"package.json"}),"\n",(0,i.jsxs)(n.p,{children:["\u9879\u76ee\u6e05\u5355\u6587\u4ef6\uff0c",(0,i.jsx)(n.strong,{children:(0,i.jsx)(n.em,{children:"\u5f88\u91cd\u8981"})})," \u3002",(0,i.jsx)(n.code,{children:"plasmo"})," \u4f1a\u6839\u636e\u5176\u4e2d\u5b9a\u4e49\u7684\u5185\u5bb9\uff0c\u548c\u5f53\u524d\u9879\u76ee\u7684\u6587\u4ef6\u72b6\u51b5\u751f\u6210 ",(0,i.jsx)(n.code,{children:"manifeset.json"})," \u6587\u4ef6\u3002"]}),"\n"]}),"\n",(0,i.jsxs)(n.li,{children:["\n",(0,i.jsx)(n.p,{children:"popup.tsx"}),"\n"]}),"\n"]}),"\n",(0,i.jsx)(n.p,{children:"\u4e00\u4e2a React Dom \u6587\u4ef6\u3002\u4ed6\u4f1a\u5728\u4f60\u70b9\u51fb\u6d4f\u89c8\u5668\u56fe\u6807\u7684\u65f6\u5019\uff0c\u5f39\u51fa\u6765\u3002"}),"\n",(0,i.jsx)(n.h2,{id:"\u5b89\u88c5\u8c03\u8bd5",children:"\u5b89\u88c5\u8c03\u8bd5"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-shell",children:"pnpm run dev\n"})}),"\n",(0,i.jsxs)(n.p,{children:["\u4f7f\u7528\u4ee5\u4e0a\u547d\u4ee4\uff0c\u4f60\u5c06\u542f\u52a8\u4e00\u4e2a",(0,i.jsx)(n.code,{children:"watch"}),"\u7a0b\u5e8f\uff0c\u968f\u65f6\uff0c\u6839\u636e\u4f60\u672c\u5730\u7684\u6587\u4ef6\u53d8\u5316\uff0c\u91cd\u65b0 package \u6269\u5c55\u5185\u5bb9\u5230\u76ee\u5f55: ",(0,i.jsx)(n.code,{children:"build/chrome-mv3-dev"}),"\u3002\n\u6253\u5f00 chrome \u6d4f\u89c8\u5668\u7684 \u6269\u5c55\u9875\u9762 \uff1a ",(0,i.jsx)(n.a,{href:"chrome://extensions",children:"chrome://extensions"})," \uff0c\u6309\u7167\u4e0b\u56fe\u5f00\u542f ",(0,i.jsx)(n.code,{children:"\u5f00\u53d1\u8005\u6a21\u5f0f"}),"\u3002"]}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.img,{alt:"dev mode",src:s(9027).Z+"",width:"690",height:"624"})}),"\n",(0,i.jsx)(n.p,{children:"\u901a\u8fc7\u9009\u62e9\u52a0\u8f7d\u5df2\u89e3\u538b\u7684\u6269\u5c55\u7a0b\u5e8f\u6309\u94ae\uff0c\u628a\u5f00\u53d1\u8c03\u8bd5\u7684\u6269\u5c55\u52a0\u5230\u6d4f\u89c8\u5668\u4e2d\u3002"}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.img,{alt:"dev mode",src:s(615).Z+"",width:"846",height:"379"})}),"\n",(0,i.jsxs)(n.p,{children:["\u6700\u540e\uff0c\u5728\u6d4f\u89c8\u5668\u4e2d\u6fc0\u6d3b\u663e\u793a\u4f60\u81ea\u5df1\u7684\u6269\u5c55\u3002\n",(0,i.jsx)(n.img,{alt:"show extension",src:s(1622).Z+"",width:"495",height:"641"})]}),"\n",(0,i.jsx)(n.h2,{id:"\u505a\u4e00\u4e9b\u4fee\u6539",children:"\u505a\u4e00\u4e9b\u4fee\u6539"}),"\n",(0,i.jsx)(n.p,{children:"\u6253\u5f00 popup.tsx, \u5185\u5bb9\u5927\u81f4\u5982\u4e0b:"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-ts",metastring:'title="popup.tsx"',children:'import { useState } from "react";\n\nfunction IndexPopup() {\n const [data, setData] = useState("");\n\n return (\n React\u7ec4\u4ef6",id:"\u6ce8\u5165\u4e00\u4e2a-react\u7ec4\u4ef6",level:3},{value:"\u914d\u7f6e\u9879",id:"\u914d\u7f6e\u9879",level:3},{value:"\u4ed6\u662f\u600e\u4e48\u5de5\u4f5c\u7684\u5462\uff1f",id:"\u4ed6\u662f\u600e\u4e48\u5de5\u4f5c\u7684\u5462",level:3},{value:"\u751f\u547d\u5468\u671f",id:"\u751f\u547d\u5468\u671f",level:2},{value:"\u76f8\u5173\u6982\u5ff5",id:"\u76f8\u5173\u6982\u5ff5",level:3},{value:"Anchor",id:"anchor",level:2},{value:"Overlay",id:"overlay",level:3},{value:"watch \u66f4\u65b0\u4f4d\u7f6e",id:"watch-\u66f4\u65b0\u4f4d\u7f6e",level:4},{value:"Inline",id:"inline",level:3},{value:"Root Container",id:"root-container",level:2},{value:"\u81ea\u5b9a\u4e49\u6302\u8f7d Dom",id:"\u81ea\u5b9a\u4e49\u6302\u8f7d-dom",level:3},{value:"\u5173\u95ed Shadow Root",id:"\u5173\u95ed-shadow-root",level:3},{value:"\u81ea\u5b9a\u4e49\u6837\u5f0f",id:"\u81ea\u5b9a\u4e49\u6837\u5f0f",level:3},{value:"\u81ea\u5b9a\u4e49 Root \u5bb9\u5668",id:"\u81ea\u5b9a\u4e49-root-\u5bb9\u5668",level:3},{value:"Renderer",id:"renderer",level:2}];function h(e){const n={a:"a",admonition:"admonition",code:"code",h1:"h1",h2:"h2",h3:"h3",h4:"h4",img:"img",li:"li",ol:"ol",p:"p",pre:"pre",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",ul:"ul",...(0,o.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(n.h1,{id:"content-script-ui",children:"Content Script UI"}),"\n",(0,s.jsx)(n.h2,{id:"\u57fa\u7840\u63cf\u8ff0",children:"\u57fa\u7840\u63cf\u8ff0"}),"\n",(0,s.jsxs)(n.p,{children:["\u540c ",(0,s.jsx)(n.code,{children:"Content Script"})," \u5904\u4e8e\u540c\u7b49\u91cd\u8981\u7684\u5730\u4f4d\uff0c\u4f60\u53ef\u4ee5\u9009\u62e9\uff0c\u5728\u5404\u4e2a\u9875\u9762\u4e2d\uff0c\u6ce8\u5165\u5305\u542b UI \u7684\u90e8\u5206\u3002\n",(0,s.jsx)(n.code,{children:"Plasmo"})," \u5bf9\u8fd9\u90e8\u5206\u505a\u4e86\u5c01\u88c5\uff0c\u4f60\u53ef\u4ee5\u5f88\u8f7b\u6613\u5b8c\u6210\u9700\u6c42\u3002"]}),"\n",(0,s.jsxs)(n.p,{children:["\u5728",(0,s.jsx)(n.code,{children:"Plasmo"}),"\u4e2d \u9996\u5148\u652f\u6301\u5728 Web \u7f51\u9875\u4e2d\u5d4c\u5165 React \u3001Svelte3\u3001Vue3 \u7ec4\u4ef6\u3002 \u8fd9\u7c7b\u529f\u80fd\u53eb\u505a ",(0,s.jsx)(n.code,{children:"Content Script UI"}),", \u4ee5\u4e0b\u7b80\u79f0 ",(0,s.jsx)(n.code,{children:"CSUI"}),"\u3002"]}),"\n",(0,s.jsxs)(n.p,{children:["\u4e00\u4e2a\u6d4f\u89c8\u5668\u6269\u5c55\u53ef\u4ee5\u5305\u542b\u591a\u4e2a ",(0,s.jsx)(n.code,{children:"CSUI"})," \u7ec4\u4ef6\uff0c \u901a\u8fc7 \u5bfc\u51fa ",(0,s.jsx)(n.a,{href:"https://docs.plasmo.com/framework/content-scripts#config",children:"Config"})," \u5bf9\u8c61\uff0c\u53ef\u4ee5\u63a7\u5236\u7ec4\u4ef6\u7684\u884c\u4e3a\u3002"]}),"\n",(0,s.jsxs)(n.h3,{id:"\u6ce8\u5165\u4e00\u4e2a-react\u7ec4\u4ef6",children:["\u6ce8\u5165\u4e00\u4e2a ",(0,s.jsx)(n.code,{children:"React"}),"\u7ec4\u4ef6"]}),"\n",(0,s.jsxs)(n.ol,{children:["\n",(0,s.jsxs)(n.li,{children:["\u521b\u5efa\u4e00\u4e2a ",(0,s.jsx)(n.code,{children:"content.tsx"})]}),"\n",(0,s.jsxs)(n.li,{children:["\u5bfc\u51fa\u4e00\u4e2a\u9ed8\u8ba4\u7684 ",(0,s.jsx)(n.code,{children:"React"})," \u7ec4\u4ef6\u3002"]}),"\n",(0,s.jsx)(n.li,{children:"\u5b8c\u6210 \ud83c\udf89"}),"\n"]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",metastring:'title="content.tsx"',children:"const CustomButton = () => {\n return ;\n};\n\nexport default CustomButton;\n"})}),"\n",(0,s.jsx)(n.admonition,{type:"note",children:(0,s.jsxs)(n.p,{children:["\u5f53\u9700\u8981\u591a\u4e2a\u7ec4\u4ef6\u65f6\uff0c\u4f60\u9700\u8981\u521b\u5efa ",(0,s.jsx)(n.code,{children:"contents"})," \u76ee\u5f55,\u5728\u8be5\u76ee\u5f55\u4e0b\u521b\u5efa\u7ec4\u4ef6\u6587\u4ef6\u3002"]})}),"\n",(0,s.jsxs)(n.p,{children:["\u5b8c\u6574\u5b9e\u4f8b : ",(0,s.jsx)(n.a,{href:"https://github.com/PlasmoHQ/examples/tree/main/with-content-scripts-ui",children:"with-content-scripts-ui"})]}),"\n",(0,s.jsx)(n.h3,{id:"\u914d\u7f6e\u9879",children:"\u914d\u7f6e\u9879"}),"\n",(0,s.jsxs)(n.p,{children:["\u56e0\u4e3a, CSUI \u4e5f\u662f Content Script \u7684\u5b50\u96c6\uff0c\u6240\u4ee5\uff0c\u5171\u4eab\u4e00\u4e2a",(0,s.jsx)(n.a,{href:"content#%E5%86%85%E5%AE%B9%E9%85%8D%E7%BD%AE",children:"\u5185\u5bb9\u914d\u7f6e"}),"\u3002"]}),"\n",(0,s.jsx)(n.h3,{id:"\u4ed6\u662f\u600e\u4e48\u5de5\u4f5c\u7684\u5462",children:"\u4ed6\u662f\u600e\u4e48\u5de5\u4f5c\u7684\u5462\uff1f"}),"\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.code,{children:"Plasmo"})," \u521b\u5efa\u4e86\u4e00\u4e2a ",(0,s.jsx)(n.a,{href:"https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_shadow_DOM",children:"Shadow DOM"}),"\u3002\n\u5728\u5176\u4e2d\u6302\u8f7d\u4e86\u4f60\u5bfc\u51fa\u7684 UI \u7ec4\u4ef6\u3002\u8fd9\u79cd\u673a\u5236\u6709\u6548\u4fdd\u8bc1\u4e86\u4f60\u7684\u7ec4\u4ef6\u6837\u5f0f\u7684\u72ec\u7acb\u6027\uff0c\u5373\u4e0d\u53d7\u9875\u9762\u6837\u5f0f\u5f71\u54cd\u3002"]}),"\n",(0,s.jsx)(n.h2,{id:"\u751f\u547d\u5468\u671f",children:"\u751f\u547d\u5468\u671f"}),"\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.code,{children:"Plasmo"})," \u7684 ",(0,s.jsx)(n.code,{children:"CSUI"})," \u8d1f\u8d23\u534f\u8c03\u4e00\u4e2a\u4e13\u95e8\u7528\u4e8e\u5728\u5185\u5bb9\u811a\u672c\u4e2d\u6302\u8f7d\u548c\u5378\u8f7d\u4f60\u7684 React\u3001Vue \u6216 Svelte \u7ec4\u4ef6\u7684\u751f\u547d\u5468\u671f\u3002\n\u5c3d\u7ba1\u6bcf\u4e2a UI \u5e93/\u6846\u67b6\u7684\u6302\u8f7d API \u7565\u6709\u4e0d\u540c\uff0c\u4f46\u9876\u7ea7\u751f\u547d\u5468\u671f\u5927\u4f53\u76f8\u540c\uff1a"]}),"\n",(0,s.jsxs)(n.ol,{children:["\n",(0,s.jsxs)(n.li,{children:["\u83b7\u53d6\u4e00\u4e2a ",(0,s.jsx)(n.a,{href:"#anchor",children:"Anchor"})," (\u5b9a\u4f4d\u5668)"]}),"\n",(0,s.jsxs)(n.li,{children:["\u521b\u5efa\uff0c\u6216\u8005\u83b7\u53d6\u4e00\u4e2a ",(0,s.jsx)(n.a,{href:"#root-container",children:"\u5bb9\u5668"}),"\uff0c \u8be5\u5bb9\u5668\u7528\u4e8e\u5b9a\u4f4d ",(0,s.jsx)(n.code,{children:"CSUI"})," \u7684\u5143\u7d20\u3002"]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.a,{href:"#renderer",children:"Render"})," \u6e32\u67d3\u5bfc\u51fa \u7684 UI \u7ec4\u4ef6\u3002"]}),"\n"]}),"\n",(0,s.jsx)(n.h3,{id:"\u76f8\u5173\u6982\u5ff5",children:"\u76f8\u5173\u6982\u5ff5"}),"\n",(0,s.jsxs)(n.table,{children:[(0,s.jsx)(n.thead,{children:(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.th,{style:{textAlign:"left"},children:"\u540d\u8bcd"}),(0,s.jsx)(n.th,{style:{textAlign:"left"},children:"\u76f8\u5173\u63cf\u8ff0"})]})}),(0,s.jsxs)(n.tbody,{children:[(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{style:{textAlign:"left"},children:"Anchor"}),(0,s.jsx)(n.td,{style:{textAlign:"left"},children:"\u544a\u8bc9 CSUI \u6302\u8f7d\u4f60\u7684\u7ec4\u4ef6\u7684\u4f4d\u7f6e\u548c\u65b9\u6cd5\u3002"})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{style:{textAlign:"left"},children:"Anchor-getter"}),(0,s.jsx)(n.td,{style:{textAlign:"left"},children:"\u544a\u8bc9 CSUI \u600e\u4e48\u627e\u5230\u4f60\u7684 Anchor\u3002"})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{style:{textAlign:"left"},children:"Overlay"}),(0,s.jsx)(n.td,{style:{textAlign:"left"},children:"Overlay \u6a21\u5f0f\u6302\u8f7d\u4f60\u7684\u7ec4\u4ef6\uff0c\u6302\u8f7d\u5728\u5f53\u524d\u9875\u9762\u7684 \u6700\u4e0a\u5c42\u3002"})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{style:{textAlign:"left"},children:"Inline"}),(0,s.jsx)(n.td,{style:{textAlign:"left"},children:"\u6302\u8f7d\u4f60\u7684\u7ec4\u4ef6\u5728\u9875\u9762\u7684 Dom \u91cc\uff0c\u7d27\u6328\u7740\u4f60\u7684 \u76ee\u6807 Dom\u3002"})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{style:{textAlign:"left"},children:"Root Container"}),(0,s.jsx)(n.td,{style:{textAlign:"left"},children:"\u4e00\u4e2a \u7531 Plasmo \u521b\u5efa\u7684 ShadowDOM \u7528\u6765\u5305\u88c5\u4f60\u7684\u7ec4\u4ef6\u3002"})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{style:{textAlign:"left"},children:"Renderer"}),(0,s.jsx)(n.td,{style:{textAlign:"left"},children:"\u6700\u4e0a\u5c42\u7684\u6e32\u67d3\u7ed3\u6784\uff0c\u5305\u542b\u4e86\u4ee5\u4e0a\u7684\u6240\u6709\u65b9\u6cd5\u3002"})]})]})]}),"\n",(0,s.jsx)(n.h2,{id:"anchor",children:"Anchor"}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.img,{alt:"Find Anchor",src:t(6579).Z+"",width:"830",height:"727"})}),"\n",(0,s.jsx)(n.p,{children:"\u4ee5\u4e0a\u6d41\u7a0b\u56fe\u63cf\u8ff0\u4e86\u5728\u7f51\u9875\u4e2d\u5904\u7406\uff08ANCHOR\uff09\u5143\u7d20\u7684\u4e00\u7cfb\u5217\u6b65\u9aa4\u3002"}),"\n",(0,s.jsx)(n.p,{children:"\u6d41\u7a0b\u5f00\u59cb\u4e8e\u201cSTART\u201d\uff0c\u7136\u540e\u9075\u5faa\u4ee5\u4e0b\u6b65\u9aa4\uff1a"}),"\n",(0,s.jsxs)(n.ol,{children:["\n",(0,s.jsxs)(n.li,{children:["\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.strong,{children:"\u68c0\u67e5\u662f\u5426\u5b58\u5728 ANCHOR \u83b7\u53d6\u5668\uff08has ANCHOR getter?\uff09"}),"\uff1a"]}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsxs)(n.li,{children:["\u5982\u679c\u6ca1\u6709\uff08NO\uff09\uff0c\u5219\u5728",(0,s.jsx)(n.code,{children:"document.body"}),"\u4e2d\u521b\u5efa\u4e00\u4e2a\u8986\u76d6\u5c42\u951a\u70b9\uff08overlay ANCHOR\uff09\u3002"]}),"\n",(0,s.jsx)(n.li,{children:"\u5982\u679c\u6709\uff08YES\uff09\uff0c\u5219\u7ee7\u7eed\u4e0b\u4e00\u4e2a\u6b65\u9aa4\u3002"}),"\n"]}),"\n"]}),"\n",(0,s.jsxs)(n.li,{children:["\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.strong,{children:"\u904d\u5386\u627e\u5230\u7684\u6bcf\u4e00\u4e2a\u951a\u70b9\uff08for each ANCHOR found\uff09"}),"\uff1a\n\u8fd9\u4e00\u6b65\u662f\u5bf9\u9875\u9762\u4e2d\u6240\u6709\u951a\u70b9\u8fdb\u884c\u5faa\u73af\u3002"]}),"\n"]}),"\n",(0,s.jsxs)(n.li,{children:["\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.strong,{children:"\u68c0\u67e5\u951a\u70b9\u662f\u5426\u4e3a\u5185\u8054\uff08is inline?\uff09"}),"\uff1a"]}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsx)(n.li,{children:"\u5982\u679c\u951a\u70b9\u662f\u5185\u8054\u7684\uff08YES\uff09\uff0c\u90a3\u4e48\u521b\u5efa\u4e00\u4e2a\u6839\u5bb9\u5668\uff08ROOT CONTAINER\uff09\u3002"}),"\n",(0,s.jsx)(n.li,{children:"\u5982\u679c\u951a\u70b9\u4e0d\u662f\u5185\u8054\u7684\uff08NO\uff09\uff0c\u90a3\u4e48\u5b9a\u4f4d\u5230\u9876\u5c42\u7684\u6839\u5bb9\u5668\uff08locate top-level ROOT CONTAINER\uff09\u3002"}),"\n"]}),"\n"]}),"\n"]}),"\n",(0,s.jsxs)(n.p,{children:["\u5b9a\u4e49\u4e00\u4e2a ",(0,s.jsx)(n.code,{children:"Anchor"})]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",children:'export type PlasmoCSUIAnchor = {\n type: "overlay" | "inline";\n element: Element;\n};\n'})}),"\n",(0,s.jsxs)(n.p,{children:["\u9ed8\u8ba4\u7684 ",(0,s.jsx)(n.code,{children:"Plasmo"})," \u63d0\u4f9b\u4e00\u4e2a\u9ed8\u8ba4\u7684 Anchor \u4ed6\u5728 ",(0,s.jsx)(n.code,{children:"document.body"})," \u4f5c\u4e3a Element , \u4ee5 Overlay \u6a21\u5f0f\u5448\u73b0\u3002"]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",children:'{\n type: "overlay",\n element: document.body\n}\n'})}),"\n",(0,s.jsxs)(n.p,{children:["\u5982\u679c ",(0,s.jsx)(n.code,{children:"CSUI"})," \u6587\u4ef6\u4e2d\u5b9a\u4e49\u4e86 getter \u51fd\u6570 \uff0c\u90a3\u4e48 ",(0,s.jsx)(n.code,{children:"CSUI"})," \u5c06\u4f1a\u4f7f\u7528\u8be5\u51fd\u6570\u8fd4\u56de\u7684\u5143\u7d20\u4f5c\u4e3a Anchor\u3002\n\u56e0\u4e3a \uff0c\u51fd\u6570\u5b9a\u4e49\u53ef\u4ee5\u4f7f\u7528 async \u5f02\u6b65\uff0c\u6240\u4ee5\uff0c\u4f60\u4e5f\u5c31\u53ef\u4ee5\u638c\u63a7\u4f60\u7684 Anchor \u7684\u4f4d\u7f6e\u3002\n\u6bd4\u5982\uff0c\u4f60\u53ef\u4ee5\u4e00\u76f4\u7b49\u5f85\u9875\u9762\u4e0a\u51fa\u73b0\u67d0\u4e2a\u5143\u7d20\uff0c\u7136\u540e\uff0c\u518d\u8fd4\u56de\u5b9a\u4e49\u7684 \u5143\u7d20\u3002"]}),"\n",(0,s.jsxs)(n.p,{children:["\u51fd\u6570\u5b9a\u4e49\u4e3a : ",(0,s.jsx)(n.strong,{children:"getOverlayAnchor"})," \u548c ",(0,s.jsx)(n.strong,{children:"getInlineAnchor"}),"\u3002"]}),"\n",(0,s.jsxs)(n.p,{children:["\u5f53\u4f60\u5bfc\u51fa\u7684 UI \u5143\u7d20\u9700\u8981\u548c Anchor \u4ea4\u4e92\u7684\u65f6\u5019\uff0c\u4f60\u53ef\u4ee5\u4f20\u9012 ",(0,s.jsx)(n.code,{children:"PlasmoCSUIProps"}),"\u5c5e\u6027\u3002"]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",children:'import type { PlasmoCSUIProps } from "plasmo";\n\nconst AnchorTypePrinter: FCReact\u7ec4\u4ef6",id:"\u6ce8\u5165\u4e00\u4e2a-react\u7ec4\u4ef6",level:3},{value:"\u914d\u7f6e\u9879",id:"\u914d\u7f6e\u9879",level:3},{value:"\u4ed6\u662f\u600e\u4e48\u5de5\u4f5c\u7684\u5462\uff1f",id:"\u4ed6\u662f\u600e\u4e48\u5de5\u4f5c\u7684\u5462",level:3},{value:"\u751f\u547d\u5468\u671f",id:"\u751f\u547d\u5468\u671f",level:2},{value:"\u76f8\u5173\u6982\u5ff5",id:"\u76f8\u5173\u6982\u5ff5",level:3},{value:"Anchor",id:"anchor",level:2},{value:"Overlay",id:"overlay",level:3},{value:"watch \u66f4\u65b0\u4f4d\u7f6e",id:"watch-\u66f4\u65b0\u4f4d\u7f6e",level:4},{value:"Inline",id:"inline",level:3},{value:"Root Container",id:"root-container",level:2},{value:"\u81ea\u5b9a\u4e49\u6302\u8f7d Dom",id:"\u81ea\u5b9a\u4e49\u6302\u8f7d-dom",level:3},{value:"\u5173\u95ed Shadow Root",id:"\u5173\u95ed-shadow-root",level:3},{value:"\u81ea\u5b9a\u4e49\u6837\u5f0f",id:"\u81ea\u5b9a\u4e49\u6837\u5f0f",level:3},{value:"\u81ea\u5b9a\u4e49 Root \u5bb9\u5668",id:"\u81ea\u5b9a\u4e49-root-\u5bb9\u5668",level:3},{value:"\u6e32\u67d3\u5668 (Renderer)",id:"\u6e32\u67d3\u5668-renderer",level:2},{value:"\u68c0\u6d4b\u5e76\u4f18\u5316 Root Container \u7684\u5220\u9664",id:"\u68c0\u6d4b\u5e76\u4f18\u5316-root-container-\u7684\u5220\u9664",level:3},{value:"\u81ea\u5b9a\u4e49\u6e32\u67d3\u5668",id:"\u81ea\u5b9a\u4e49\u6e32\u67d3\u5668",level:3},{value:"\u4f7f\u7528\u5185\u7f6e\u7684 Inline Container \u6216\u8005 Overlay Container",id:"\u4f7f\u7528\u5185\u7f6e\u7684-inline-container-\u6216\u8005-overlay-container",level:3}];function d(n){const e={a:"a",admonition:"admonition",code:"code",h1:"h1",h2:"h2",h3:"h3",h4:"h4",img:"img",li:"li",ol:"ol",p:"p",pre:"pre",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",ul:"ul",...(0,r.a)(),...n.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(e.h1,{id:"content-script-ui",children:"Content Script UI"}),"\n",(0,o.jsx)(e.h2,{id:"\u57fa\u7840\u63cf\u8ff0",children:"\u57fa\u7840\u63cf\u8ff0"}),"\n",(0,o.jsxs)(e.p,{children:["\u540c ",(0,o.jsx)(e.code,{children:"Content Script"})," \u5904\u4e8e\u540c\u7b49\u91cd\u8981\u7684\u5730\u4f4d\uff0c\u4f60\u53ef\u4ee5\u9009\u62e9\uff0c\u5728\u5404\u4e2a\u9875\u9762\u4e2d\uff0c\u6ce8\u5165\u5305\u542b UI \u7684\u90e8\u5206\u3002\n",(0,o.jsx)(e.code,{children:"Plasmo"})," \u5bf9\u8fd9\u90e8\u5206\u505a\u4e86\u5c01\u88c5\uff0c\u4f60\u53ef\u4ee5\u5f88\u8f7b\u6613\u5b8c\u6210\u9700\u6c42\u3002"]}),"\n",(0,o.jsxs)(e.p,{children:["\u5728",(0,o.jsx)(e.code,{children:"Plasmo"}),"\u4e2d \u9996\u5148\u652f\u6301\u5728 Web \u7f51\u9875\u4e2d\u5d4c\u5165 React \u3001Svelte3\u3001Vue3 \u7ec4\u4ef6\u3002 \u8fd9\u7c7b\u529f\u80fd\u53eb\u505a ",(0,o.jsx)(e.code,{children:"Content Script UI"}),", \u4ee5\u4e0b\u7b80\u79f0 ",(0,o.jsx)(e.code,{children:"CSUI"}),"\u3002"]}),"\n",(0,o.jsxs)(e.p,{children:["\u4e00\u4e2a\u6d4f\u89c8\u5668\u6269\u5c55\u53ef\u4ee5\u5305\u542b\u591a\u4e2a ",(0,o.jsx)(e.code,{children:"CSUI"})," \u7ec4\u4ef6\uff0c \u901a\u8fc7 \u5bfc\u51fa ",(0,o.jsx)(e.a,{href:"https://docs.plasmo.com/framework/content-scripts#config",children:"Config"})," \u5bf9\u8c61\uff0c\u53ef\u4ee5\u63a7\u5236\u7ec4\u4ef6\u7684\u884c\u4e3a\u3002"]}),"\n",(0,o.jsxs)(e.h3,{id:"\u6ce8\u5165\u4e00\u4e2a-react\u7ec4\u4ef6",children:["\u6ce8\u5165\u4e00\u4e2a ",(0,o.jsx)(e.code,{children:"React"}),"\u7ec4\u4ef6"]}),"\n",(0,o.jsxs)(e.ol,{children:["\n",(0,o.jsxs)(e.li,{children:["\u521b\u5efa\u4e00\u4e2a ",(0,o.jsx)(e.code,{children:"content.tsx"})]}),"\n",(0,o.jsxs)(e.li,{children:["\u5bfc\u51fa\u4e00\u4e2a\u9ed8\u8ba4\u7684 ",(0,o.jsx)(e.code,{children:"React"})," \u7ec4\u4ef6\u3002"]}),"\n",(0,o.jsx)(e.li,{children:"\u5b8c\u6210 \ud83c\udf89"}),"\n"]}),"\n",(0,o.jsx)(e.pre,{children:(0,o.jsx)(e.code,{className:"language-ts",metastring:'title="content.tsx"',children:"const CustomButton = () => {\n return ;\n};\n\nexport default CustomButton;\n"})}),"\n",(0,o.jsx)(e.admonition,{type:"note",children:(0,o.jsxs)(e.p,{children:["\u5f53\u9700\u8981\u591a\u4e2a\u7ec4\u4ef6\u65f6\uff0c\u4f60\u9700\u8981\u521b\u5efa ",(0,o.jsx)(e.code,{children:"contents"})," \u76ee\u5f55,\u5728\u8be5\u76ee\u5f55\u4e0b\u521b\u5efa\u7ec4\u4ef6\u6587\u4ef6\u3002"]})}),"\n",(0,o.jsxs)(e.p,{children:["\u5b8c\u6574\u5b9e\u4f8b : ",(0,o.jsx)(e.a,{href:"https://github.com/PlasmoHQ/examples/tree/main/with-content-scripts-ui",children:"with-content-scripts-ui"})]}),"\n",(0,o.jsx)(e.h3,{id:"\u914d\u7f6e\u9879",children:"\u914d\u7f6e\u9879"}),"\n",(0,o.jsxs)(e.p,{children:["\u56e0\u4e3a, CSUI \u4e5f\u662f Content Script \u7684\u5b50\u96c6\uff0c\u6240\u4ee5\uff0c\u5171\u4eab\u4e00\u4e2a",(0,o.jsx)(e.a,{href:"content#%E5%86%85%E5%AE%B9%E9%85%8D%E7%BD%AE",children:"\u5185\u5bb9\u914d\u7f6e"}),"\u3002"]}),"\n",(0,o.jsx)(e.h3,{id:"\u4ed6\u662f\u600e\u4e48\u5de5\u4f5c\u7684\u5462",children:"\u4ed6\u662f\u600e\u4e48\u5de5\u4f5c\u7684\u5462\uff1f"}),"\n",(0,o.jsxs)(e.p,{children:[(0,o.jsx)(e.code,{children:"Plasmo"})," \u521b\u5efa\u4e86\u4e00\u4e2a ",(0,o.jsx)(e.a,{href:"https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_shadow_DOM",children:"Shadow DOM"}),"\u3002\n\u5728\u5176\u4e2d\u6302\u8f7d\u4e86\u4f60\u5bfc\u51fa\u7684 UI \u7ec4\u4ef6\u3002\u8fd9\u79cd\u673a\u5236\u6709\u6548\u4fdd\u8bc1\u4e86\u4f60\u7684\u7ec4\u4ef6\u6837\u5f0f\u7684\u72ec\u7acb\u6027\uff0c\u5373\u4e0d\u53d7\u9875\u9762\u6837\u5f0f\u5f71\u54cd\u3002"]}),"\n",(0,o.jsx)(e.h2,{id:"\u751f\u547d\u5468\u671f",children:"\u751f\u547d\u5468\u671f"}),"\n",(0,o.jsxs)(e.p,{children:[(0,o.jsx)(e.code,{children:"Plasmo"})," \u7684 ",(0,o.jsx)(e.code,{children:"CSUI"})," \u8d1f\u8d23\u534f\u8c03\u4e00\u4e2a\u4e13\u95e8\u7528\u4e8e\u5728\u5185\u5bb9\u811a\u672c\u4e2d\u6302\u8f7d\u548c\u5378\u8f7d\u4f60\u7684 React\u3001Vue \u6216 Svelte \u7ec4\u4ef6\u7684\u751f\u547d\u5468\u671f\u3002\n\u5c3d\u7ba1\u6bcf\u4e2a UI \u5e93/\u6846\u67b6\u7684\u6302\u8f7d API \u7565\u6709\u4e0d\u540c\uff0c\u4f46\u9876\u7ea7\u751f\u547d\u5468\u671f\u5927\u4f53\u76f8\u540c\uff1a"]}),"\n",(0,o.jsxs)(e.ol,{children:["\n",(0,o.jsxs)(e.li,{children:["\u83b7\u53d6\u4e00\u4e2a ",(0,o.jsx)(e.a,{href:"#anchor",children:"Anchor"})," (\u5b9a\u4f4d\u5668)"]}),"\n",(0,o.jsxs)(e.li,{children:["\u521b\u5efa\uff0c\u6216\u8005\u83b7\u53d6\u4e00\u4e2a ",(0,o.jsx)(e.a,{href:"#root-container",children:"\u5bb9\u5668"}),"\uff0c \u8be5\u5bb9\u5668\u7528\u4e8e\u5b9a\u4f4d ",(0,o.jsx)(e.code,{children:"CSUI"})," \u7684\u5143\u7d20\u3002"]}),"\n",(0,o.jsxs)(e.li,{children:[(0,o.jsx)(e.a,{href:"#renderer",children:"Render"})," \u6e32\u67d3\u5bfc\u51fa \u7684 UI \u7ec4\u4ef6\u3002"]}),"\n"]}),"\n",(0,o.jsx)(e.h3,{id:"\u76f8\u5173\u6982\u5ff5",children:"\u76f8\u5173\u6982\u5ff5"}),"\n",(0,o.jsxs)(e.table,{children:[(0,o.jsx)(e.thead,{children:(0,o.jsxs)(e.tr,{children:[(0,o.jsx)(e.th,{style:{textAlign:"left"},children:"\u540d\u8bcd"}),(0,o.jsx)(e.th,{style:{textAlign:"left"},children:"\u76f8\u5173\u63cf\u8ff0"})]})}),(0,o.jsxs)(e.tbody,{children:[(0,o.jsxs)(e.tr,{children:[(0,o.jsx)(e.td,{style:{textAlign:"left"},children:"Anchor"}),(0,o.jsx)(e.td,{style:{textAlign:"left"},children:"\u544a\u8bc9 CSUI \u6302\u8f7d\u4f60\u7684\u7ec4\u4ef6\u7684\u4f4d\u7f6e\u548c\u65b9\u6cd5\u3002"})]}),(0,o.jsxs)(e.tr,{children:[(0,o.jsx)(e.td,{style:{textAlign:"left"},children:"Anchor-getter"}),(0,o.jsx)(e.td,{style:{textAlign:"left"},children:"\u544a\u8bc9 CSUI \u600e\u4e48\u627e\u5230\u4f60\u7684 Anchor\u3002"})]}),(0,o.jsxs)(e.tr,{children:[(0,o.jsx)(e.td,{style:{textAlign:"left"},children:"Overlay"}),(0,o.jsx)(e.td,{style:{textAlign:"left"},children:"Overlay \u6a21\u5f0f\u6302\u8f7d\u4f60\u7684\u7ec4\u4ef6\uff0c\u6302\u8f7d\u5728\u5f53\u524d\u9875\u9762\u7684 \u6700\u4e0a\u5c42\u3002"})]}),(0,o.jsxs)(e.tr,{children:[(0,o.jsx)(e.td,{style:{textAlign:"left"},children:"Inline"}),(0,o.jsx)(e.td,{style:{textAlign:"left"},children:"\u6302\u8f7d\u4f60\u7684\u7ec4\u4ef6\u5728\u9875\u9762\u7684 Dom \u91cc\uff0c\u7d27\u6328\u7740\u4f60\u7684 \u76ee\u6807 Dom\u3002"})]}),(0,o.jsxs)(e.tr,{children:[(0,o.jsx)(e.td,{style:{textAlign:"left"},children:"Root Container"}),(0,o.jsx)(e.td,{style:{textAlign:"left"},children:"\u4e00\u4e2a \u7531 Plasmo \u521b\u5efa\u7684 ShadowDOM \u7528\u6765\u5305\u88c5\u4f60\u7684\u7ec4\u4ef6\u3002"})]}),(0,o.jsxs)(e.tr,{children:[(0,o.jsx)(e.td,{style:{textAlign:"left"},children:"Renderer"}),(0,o.jsx)(e.td,{style:{textAlign:"left"},children:"\u6700\u4e0a\u5c42\u7684\u6e32\u67d3\u7ed3\u6784\uff0c\u5305\u542b\u4e86\u4ee5\u4e0a\u7684\u6240\u6709\u65b9\u6cd5\u3002"})]})]})]}),"\n",(0,o.jsx)(e.h2,{id:"anchor",children:"Anchor"}),"\n",(0,o.jsx)(e.p,{children:(0,o.jsx)(e.img,{alt:"Find Anchor",src:t(6579).Z+"",width:"830",height:"727"})}),"\n",(0,o.jsx)(e.p,{children:"\u4ee5\u4e0a\u6d41\u7a0b\u56fe\u63cf\u8ff0\u4e86\u5728\u7f51\u9875\u4e2d\u5904\u7406\uff08ANCHOR\uff09\u5143\u7d20\u7684\u4e00\u7cfb\u5217\u6b65\u9aa4\u3002"}),"\n",(0,o.jsx)(e.p,{children:"\u6d41\u7a0b\u5f00\u59cb\u4e8e\u201cSTART\u201d\uff0c\u7136\u540e\u9075\u5faa\u4ee5\u4e0b\u6b65\u9aa4\uff1a"}),"\n",(0,o.jsxs)(e.ol,{children:["\n",(0,o.jsxs)(e.li,{children:["\n",(0,o.jsxs)(e.p,{children:[(0,o.jsx)(e.strong,{children:"\u68c0\u67e5\u662f\u5426\u5b58\u5728 ANCHOR \u83b7\u53d6\u5668\uff08has ANCHOR getter?\uff09"}),"\uff1a"]}),"\n",(0,o.jsxs)(e.ul,{children:["\n",(0,o.jsxs)(e.li,{children:["\u5982\u679c\u6ca1\u6709\uff08NO\uff09\uff0c\u5219\u5728",(0,o.jsx)(e.code,{children:"document.body"}),"\u4e2d\u521b\u5efa\u4e00\u4e2a\u8986\u76d6\u5c42\u951a\u70b9\uff08overlay ANCHOR\uff09\u3002"]}),"\n",(0,o.jsx)(e.li,{children:"\u5982\u679c\u6709\uff08YES\uff09\uff0c\u5219\u7ee7\u7eed\u4e0b\u4e00\u4e2a\u6b65\u9aa4\u3002"}),"\n"]}),"\n"]}),"\n",(0,o.jsxs)(e.li,{children:["\n",(0,o.jsxs)(e.p,{children:[(0,o.jsx)(e.strong,{children:"\u904d\u5386\u627e\u5230\u7684\u6bcf\u4e00\u4e2a\u951a\u70b9\uff08for each ANCHOR found\uff09"}),"\uff1a\n\u8fd9\u4e00\u6b65\u662f\u5bf9\u9875\u9762\u4e2d\u6240\u6709\u951a\u70b9\u8fdb\u884c\u5faa\u73af\u3002"]}),"\n"]}),"\n",(0,o.jsxs)(e.li,{children:["\n",(0,o.jsxs)(e.p,{children:[(0,o.jsx)(e.strong,{children:"\u68c0\u67e5\u951a\u70b9\u662f\u5426\u4e3a\u5185\u8054\uff08is inline?\uff09"}),"\uff1a"]}),"\n",(0,o.jsxs)(e.ul,{children:["\n",(0,o.jsx)(e.li,{children:"\u5982\u679c\u951a\u70b9\u662f\u5185\u8054\u7684\uff08YES\uff09\uff0c\u90a3\u4e48\u521b\u5efa\u4e00\u4e2a\u6839\u5bb9\u5668\uff08ROOT CONTAINER\uff09\u3002"}),"\n",(0,o.jsx)(e.li,{children:"\u5982\u679c\u951a\u70b9\u4e0d\u662f\u5185\u8054\u7684\uff08NO\uff09\uff0c\u90a3\u4e48\u5b9a\u4f4d\u5230\u9876\u5c42\u7684\u6839\u5bb9\u5668\uff08locate top-level ROOT CONTAINER\uff09\u3002"}),"\n"]}),"\n"]}),"\n"]}),"\n",(0,o.jsxs)(e.p,{children:["\u5b9a\u4e49\u4e00\u4e2a ",(0,o.jsx)(e.code,{children:"Anchor"})]}),"\n",(0,o.jsx)(e.pre,{children:(0,o.jsx)(e.code,{className:"language-ts",children:'export type PlasmoCSUIAnchor = {\n type: "overlay" | "inline";\n element: Element;\n};\n'})}),"\n",(0,o.jsxs)(e.p,{children:["\u9ed8\u8ba4\u7684 ",(0,o.jsx)(e.code,{children:"Plasmo"})," \u63d0\u4f9b\u4e00\u4e2a\u9ed8\u8ba4\u7684 Anchor \u4ed6\u5728 ",(0,o.jsx)(e.code,{children:"document.body"})," \u4f5c\u4e3a Element , \u4ee5 Overlay \u6a21\u5f0f\u5448\u73b0\u3002"]}),"\n",(0,o.jsx)(e.pre,{children:(0,o.jsx)(e.code,{className:"language-ts",children:'{\n type: "overlay",\n element: document.body\n}\n'})}),"\n",(0,o.jsxs)(e.p,{children:["\u5982\u679c ",(0,o.jsx)(e.code,{children:"CSUI"})," \u6587\u4ef6\u4e2d\u5b9a\u4e49\u4e86 getter \u51fd\u6570 \uff0c\u90a3\u4e48 ",(0,o.jsx)(e.code,{children:"CSUI"})," \u5c06\u4f1a\u4f7f\u7528\u8be5\u51fd\u6570\u8fd4\u56de\u7684\u5143\u7d20\u4f5c\u4e3a Anchor\u3002\n\u56e0\u4e3a \uff0c\u51fd\u6570\u5b9a\u4e49\u53ef\u4ee5\u4f7f\u7528 async \u5f02\u6b65\uff0c\u6240\u4ee5\uff0c\u4f60\u4e5f\u5c31\u53ef\u4ee5\u638c\u63a7\u4f60\u7684 Anchor \u7684\u4f4d\u7f6e\u3002\n\u6bd4\u5982\uff0c\u4f60\u53ef\u4ee5\u4e00\u76f4\u7b49\u5f85\u9875\u9762\u4e0a\u51fa\u73b0\u67d0\u4e2a\u5143\u7d20\uff0c\u7136\u540e\uff0c\u518d\u8fd4\u56de\u5b9a\u4e49\u7684 \u5143\u7d20\u3002"]}),"\n",(0,o.jsxs)(e.p,{children:["\u51fd\u6570\u5b9a\u4e49\u4e3a : ",(0,o.jsx)(e.strong,{children:"getOverlayAnchor"})," \u548c ",(0,o.jsx)(e.strong,{children:"getInlineAnchor"}),"\u3002"]}),"\n",(0,o.jsxs)(e.p,{children:["\u5f53\u4f60\u5bfc\u51fa\u7684 UI \u5143\u7d20\u9700\u8981\u548c Anchor \u4ea4\u4e92\u7684\u65f6\u5019\uff0c\u4f60\u53ef\u4ee5\u4f20\u9012 ",(0,o.jsx)(e.code,{children:"PlasmoCSUIProps"}),"\u5c5e\u6027\u3002"]}),"\n",(0,o.jsx)(e.pre,{children:(0,o.jsx)(e.code,{className:"language-ts",children:'import type { PlasmoCSUIProps } from "plasmo";\n\nconst AnchorTypePrinter: FCusePort \u7684 React API",id:"\u4f7f\u7528-useport-\u7684-react-api",level:3},{value:"Initial Type Error",id:"initial-type-error",level:2},{value:"E2E Type Safety (WIP) \u70b9\u5bf9\u70b9\u7c7b\u578b\u5b89\u5168",id:"e2e-type-safety-wip-\u70b9\u5bf9\u70b9\u7c7b\u578b\u5b89\u5168",level:2}];function c(e){const n={a:"a",admonition:"admonition",code:"code",h1:"h1",h2:"h2",h3:"h3",li:"li",ol:"ol",p:"p",pre:"pre",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",ul:"ul",...(0,l.a)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(n.h1,{id:"message-api",children:"Message API"}),"\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.code,{children:"Plasmo"})," \u63d0\u4f9b\u4e86\u5c01\u88c5\u597d\u7684 Message API , \u8fd9\u8ba9\u6269\u5c55\u5404\u4e2a\u6a21\u5757\u4e4b\u95f4\u901a\u4fe1\u53d8\u5f97\u7b80\u5355\u3002\n\u5728\u4f60\u7684 ",(0,t.jsx)(n.code,{children:"Plasmo"}),"\u9879\u76ee\u76ee\u5f55\u4e2d\u7684 ",(0,t.jsx)(n.code,{children:"background"})," \u76ee\u5f55\uff0c\u6dfb\u52a0 ",(0,t.jsx)(n.code,{children:"Message"})," \u6587\u4ef6\u76ee\u5f55\uff0c ",(0,t.jsx)(n.code,{children:"Plasmo"})," \u5c06\u4e3a\u4f60\u5b8c\u6210\u5269\u4f59\u7684\u5de5\u4f5c\u3002\n",(0,t.jsx)(n.code,{children:"Plasmo"})," \u63d0\u4f9b\u58f0\u660e\u5f0f\u7684\u3001\u7c7b\u578b\u5b89\u5168\u7684 \u51fd\u6570\u7ed3\u6784\uff0c\u540c\u65f6\u63d0\u4f9b ",(0,t.jsx)(n.code,{children:"Promise"}),"\u7ed3\u6784\u7684\u5f02\u6b65\u51fd\u6570\u6267\u884c\u7ed3\u6784\u3002"]}),"\n",(0,t.jsx)(n.h2,{id:"\u5b89\u88c5\u6a21\u5757",children:"\u5b89\u88c5\u6a21\u5757"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-shell",children:"pnpm install @plasmohq/messaging\n"})}),"\n",(0,t.jsxs)(n.p,{children:["\u5b89\u88c5\u5b8c\u6210\u540e\uff0c\u5728\u4f60\u7684 ",(0,t.jsx)(n.code,{children:"Plasmo"})," \u7684 ",(0,t.jsx)(n.code,{children:"background"})," \u76ee\u5f55 \u521b\u5efa messages \u6a21\u5757\u3002\n\u5982\u679c\u4f60\u4f7f\u7528\u4e86 ",(0,t.jsx)(n.code,{children:"background.ts"}),", \u90a3\u4e48\u4f60\u9700\u8981\u521b\u5efa ",(0,t.jsx)(n.code,{children:"background"})," \u76ee\u5f55\uff0c \u5176\u4e2d\u521b\u5efa ",(0,t.jsx)(n.code,{children:"index.ts"}),"\u3002"]}),"\n",(0,t.jsx)(n.h2,{id:"\u6a21\u5757\u53ca\u901a\u4fe1\u89c4\u5219",children:"\u6a21\u5757\u53ca\u901a\u4fe1\u89c4\u5219"}),"\n",(0,t.jsxs)(n.table,{children:[(0,t.jsx)(n.thead,{children:(0,t.jsxs)(n.tr,{children:[(0,t.jsx)(n.th,{style:{textAlign:"left"},children:"Messaging API"}),(0,t.jsx)(n.th,{style:{textAlign:"left"},children:"From"}),(0,t.jsx)(n.th,{style:{textAlign:"left"},children:"To"}),(0,t.jsx)(n.th,{style:{textAlign:"left"},children:"One-time"}),(0,t.jsx)(n.th,{style:{textAlign:"left"},children:"Long-lived"})]})}),(0,t.jsxs)(n.tbody,{children:[(0,t.jsxs)(n.tr,{children:[(0,t.jsx)(n.td,{style:{textAlign:"left"},children:(0,t.jsx)(n.a,{href:"#message-flow",children:"Message Flow"})}),(0,t.jsx)(n.td,{style:{textAlign:"left"},children:"Ext-Pages/CS"}),(0,t.jsx)(n.td,{style:{textAlign:"left"},children:"BGSW"}),(0,t.jsx)(n.td,{style:{textAlign:"left"},children:"Yes"}),(0,t.jsx)(n.td,{style:{textAlign:"left"},children:"No"})]}),(0,t.jsxs)(n.tr,{children:[(0,t.jsx)(n.td,{style:{textAlign:"left"},children:(0,t.jsx)(n.a,{href:"#relay-flow",children:"Relay Flow"})}),(0,t.jsx)(n.td,{style:{textAlign:"left"},children:"Website"}),(0,t.jsx)(n.td,{style:{textAlign:"left"},children:"CS/BGSW"}),(0,t.jsx)(n.td,{style:{textAlign:"left"},children:"Yes"}),(0,t.jsx)(n.td,{style:{textAlign:"left"},children:"No"})]}),(0,t.jsxs)(n.tr,{children:[(0,t.jsx)(n.td,{style:{textAlign:"left"},children:(0,t.jsx)(n.a,{href:"#ports",children:"Ports"})}),(0,t.jsx)(n.td,{style:{textAlign:"left"},children:"Ext-Pages/CS"}),(0,t.jsx)(n.td,{style:{textAlign:"left"},children:"BGSW"}),(0,t.jsx)(n.td,{style:{textAlign:"left"},children:"No"}),(0,t.jsx)(n.td,{style:{textAlign:"left"},children:"Yes"})]}),(0,t.jsxs)(n.tr,{children:[(0,t.jsx)(n.td,{style:{textAlign:"left"},children:"Ports"}),(0,t.jsx)(n.td,{style:{textAlign:"left"},children:"BGSW"}),(0,t.jsx)(n.td,{style:{textAlign:"left"},children:"Ext-Pages/CS"}),(0,t.jsx)(n.td,{style:{textAlign:"left"},children:"No"}),(0,t.jsx)(n.td,{style:{textAlign:"left"},children:"Yes"})]}),(0,t.jsxs)(n.tr,{children:[(0,t.jsx)(n.td,{style:{textAlign:"left"},children:"Ports + Relay"}),(0,t.jsx)(n.td,{style:{textAlign:"left"},children:"BGSW"}),(0,t.jsx)(n.td,{style:{textAlign:"left"},children:"WebPage"}),(0,t.jsx)(n.td,{style:{textAlign:"left"},children:"Yes"}),(0,t.jsx)(n.td,{style:{textAlign:"left"},children:"Yes"})]})]})]}),"\n",(0,t.jsx)(n.h2,{id:"\u5b98\u65b9\u793a\u4f8b",children:"\u5b98\u65b9\u793a\u4f8b"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:["\u5b98\u65b9\u793a\u4f8b : ",(0,t.jsx)(n.a,{href:"https://github.com/PlasmoHQ/examples/tree/main/with-messaging",children:"with-messaging"})]}),"\n"]}),"\n",(0,t.jsx)(n.h2,{id:"message-flow",children:"Message Flow"}),"\n",(0,t.jsxs)(n.p,{children:["\u4f7f\u7528 ",(0,t.jsx)(n.code,{children:"Message Flow"})," \u53ef\u4ee5\u5b8c\u6210\u6269\u5c55\u7ec4\u4ef6\u95f4\u7684\u4e00\u6b21\u6027\u901a\u4fe1\u3002 \u8fd9\u662f\u4e00\u79cd\u548c\u666e\u901a\u7684 API \u63a5\u53e3\u975e\u5e38\u76f8\u4f3c\u7684\u4e00\u79cd\u4ea4\u4e92\u65b9\u5f0f\u3002"]}),"\n",(0,t.jsxs)(n.p,{children:["\u901a\u4fe1\u53cc\u65b9\u53ef\u4ee5\u662f ",(0,t.jsx)(n.code,{children:"tab page"}),"\u3001",(0,t.jsx)(n.code,{children:"content script"}),"\u76f8\u5f53\u4e8e\u6211\u4eec\u7684\u524d\u7aef\u9875\u9762\uff0c ",(0,t.jsx)(n.code,{children:"background service worker"})," \u76f8\u5f53\u4e8e\u6211\u4eec\u7684\u540e\u7aef API \u63a5\u53e3\u3002\n\u8fd9\u79cd\u901a\u4fe1\u89c4\u5219\uff0c\u53ef\u4ee5\u628a\u5927\u91cf\u7684\u6570\u636e\u8ba1\u7b97\u6216\u8005\u56e0\u4e3a CORS \u89c4\u5219\u65e0\u6cd5\u8c03\u7528\u7684\u51fd\u6570\u653e\u5230",(0,t.jsx)(n.code,{children:"background"}),"\u4e2d\u53bb\u5b8c\u6210\u3002"]}),"\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.code,{children:"background service"})," \u7684\u5de5\u4f5c\u51fd\u6570\u662f\u4e00\u4e2a\u4fe1\u606f\u4e2d\u5fc3\uff0c\u6bcf\u4e2a\u670d\u52a1\u90fd\u5305\u542b\u4e00\u4e2a Rest API \u6837\u5f0f\u7684\u5904\u7406\u5668\u3002\n\u4f60\u53ef\u4ee5\u5f88\u65b9\u4fbf\u7684\u5728 ",(0,t.jsx)(n.code,{children:"background/messages"})," \u521b\u5efa\u4e00\u4e2a ts \u6a21\u5757\uff0c\u6587\u4ef6\u540d\u5c06\u4f1a\u662f message \u7684\u540d\u5b57\uff0c\u9ed8\u8ba4\u5bfc\u51fa\u7684\u51fd\u6570\u5fc5\u987b\u662f\u51fd\u6570\u5904\u7406\u5668\u3002"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-ts",metastring:'title="background/messages/ping.ts"',children:'import type { PlasmoMessaging } from "@plasmohq/messaging";\n\nconst handler: PlasmoMessaging.MessageHandler = async (req, res) => {\n const message = await querySomeApi(req.body.id);\n\n res.send({\n message,\n });\n};\n\nexport default handler;\n'})}),"\n",(0,t.jsxs)(n.p,{children:["\u4ee5\u4e0a\u662f\u7c7b\u4f3c\u7684\u540e\u7aef API \u63a5\u53e3\uff0c\u63a5\u4e0b\u6765\u6211\u4eec\u4ecb\u7ecd \u5982\u4f55\u8c03\u7528\u3002\n\u5728 \u6269\u5c55\u9875\u9762\u3001Content Script \u6216\u8005 tab page \u4e2d\u6211\u4eec\u901a\u8fc7 ",(0,t.jsx)(n.code,{children:"@plasmohq/messaging"})," \u7684 API \u53d1\u8d77\u4ea4\u4e92\u3002"]}),"\n",(0,t.jsxs)(n.p,{children:["\u7531\u4e8e ",(0,t.jsx)(n.code,{children:"Plasmo"})," \u5728\u540e\u53f0\u53ef\u4ee5\u89e3\u6790\u6211\u4eec\u7684 Service \u8c03\u7528\uff0c\u4f60\u4f7f\u7528\u7684 IDE \u89e6\u53d1\u6d88\u606f\u540d\u79f0\u7684\u63d0\u793a\u611f\u77e5\u3002"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-ts",metastring:'title="popup.tsx"',children:'import { sendToBackground } from "@plasmohq/messaging"\n\n...\nconst resp = await sendToBackground({\n name: "ping",\n body: {\n id: 123\n }\n})\n\nconsole.log(resp)\n'})}),"\n",(0,t.jsxs)(n.p,{children:["\u5982\u679c\u4f60\u9700\u8981\u4ece\u524d\u7aef\u7684 ",(0,t.jsx)(n.code,{children:"content script"})," \u5411\u540e\u7aef\u53d1\u8d77\u4ea4\u4e92\uff0c\u90a3\u4e48\u4f60\u9700\u8981\u4f60\u7684 \u6269\u5c55 ID\u3002\n\u4f60\u770b\u7684\u6269\u5c55 ID \u53ef\u4ee5\u901a\u8fc7\uff0c ",(0,t.jsx)(n.code,{children:"chrome://extensions"})," \u6269\u5c55\u7ba1\u7406\u9875\u9762\u83b7\u5f97\u3002"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-ts",metastring:'title="contents/componentInTheMainWorld.tsx"',children:'import { sendToBackground } from "@plasmohq/messaging"\nimport type { PlasmoCSConfig } from "plasmo"\n\nexport const config: PlasmoCSConfig = {\n matches: ["
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
Docusaurus blogging features are powered by the blog plugin.
diff --git a/blog/long-blog-post/index.html b/blog/long-blog-post/index.html index 7e6800d..2ca45d9 100644 --- a/blog/long-blog-post/index.html +++ b/blog/long-blog-post/index.html @@ -5,8 +5,8 @@
This is the summary of a very long blog post,
diff --git a/blog/mdx-blog-post/index.html b/blog/mdx-blog-post/index.html index 70ae001..537f4f0 100644 --- a/blog/mdx-blog-post/index.html +++ b/blog/mdx-blog-post/index.html @@ -5,8 +5,8 @@Blog posts support Docusaurus Markdown features, such as MDX.
diff --git a/blog/tags/docusaurus/index.html b/blog/tags/docusaurus/index.html index c64c3e2..c0bf79b 100644 --- a/blog/tags/docusaurus/index.html +++ b/blog/tags/docusaurus/index.html @@ -5,8 +5,8 @@Docusaurus blogging features are powered by the blog plugin.
diff --git a/blog/tags/facebook/index.html b/blog/tags/facebook/index.html index abc95e9..6614c1d 100644 --- a/blog/tags/facebook/index.html +++ b/blog/tags/facebook/index.html @@ -5,8 +5,8 @@Docusaurus blogging features are powered by the blog plugin.
diff --git a/blog/tags/hello/index.html b/blog/tags/hello/index.html index 2e82f93..d39fd9c 100644 --- a/blog/tags/hello/index.html +++ b/blog/tags/hello/index.html @@ -5,8 +5,8 @@Docusaurus blogging features are powered by the blog plugin.
diff --git a/blog/tags/hola/index.html b/blog/tags/hola/index.html index c7a9dc2..93e10f9 100644 --- a/blog/tags/hola/index.html +++ b/blog/tags/hola/index.html @@ -5,8 +5,8 @@Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
Docusaurus blogging features are powered by the blog plugin.
diff --git a/docs/intro/index.html b/docs/intro/index.html index 3eba436..d5fa0de 100644 --- a/docs/intro/index.html +++ b/docs/intro/index.html @@ -5,8 +5,8 @@plasmo 的参考示例 https://github.com/PlasmoHQ/plasmo/network/dependents
google Chrome 模块开发文档 https://developer.chrome.com/docs/extensions/mv3/Firefox 扩展开发文档 https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions