diff --git a/404.html b/404.html index b189b59..1fa176e 100644 --- a/404.html +++ b/404.html @@ -5,7 +5,7 @@ Page Not Found | Plasmo-Co-Learn - + diff --git a/assets/js/03e6874b.12928fef.js b/assets/js/03e6874b.1fa4d7db.js similarity index 99% rename from assets/js/03e6874b.12928fef.js rename to assets/js/03e6874b.1fa4d7db.js index 1c11dd6..b176082 100644 --- a/assets/js/03e6874b.12928fef.js +++ b/assets/js/03e6874b.1fa4d7db.js @@ -1 +1 @@ -"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:1702633031,formattedLastUpdatedAt:"Dec 15, 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 +"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:1702633459,formattedLastUpdatedAt:"Dec 15, 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.2b5aaedc.js b/assets/js/16e31973.4c86bc06.js similarity index 98% rename from assets/js/16e31973.2b5aaedc.js rename to assets/js/16e31973.4c86bc06.js index b7944b6..84e7db6 100644 --- a/assets/js/16e31973.2b5aaedc.js +++ b/assets/js/16e31973.4c86bc06.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:1702633031,formattedLastUpdatedAt:"Dec 15, 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/.ts"}),"\u3002"]}),"\n",(0,o.jsx)(n.li,{children:"\u5bfc\u51fa\u5982\u4e0b\u7684\u4ee3\u7801:"}),"\n"]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-ts",metastring:'title="sandbox.ts"',children:'export const life = 42;\n\nwindow.addEventListener("message", async function (event) {\n const source = event.source as {\n window: WindowProxy;\n };\n\n source.window.postMessage(eval(event.data), event.origin);\n});\n'})}),"\n",(0,o.jsxs)(n.p,{children:["\u4ee5\u4e0a\u4ee3\u7801\uff0c\u5728\u9875\u9762\u4e2d\uff0c\u76d1\u542c ",(0,o.jsx)(n.code,{children:"message"})," \u4e8b\u4ef6\u3002\u5f53\u89e6\u53d1\u7684\u65f6\u5019,\u4f7f\u7528 eval \u6267\u884c event.data \u4e2d\u7684\u4ee3\u7801\u3002\n\u7136\u540e \uff0c\u53d1\u56de\u7ed9\u8c03\u7528\u7684\u9875\u9762"]}),"\n",(0,o.jsx)(n.h3,{id:"\u8c03\u7528\u65b9\u9875\u9762",children:"\u8c03\u7528\u65b9\u9875\u9762"}),"\n",(0,o.jsxs)(n.p,{children:["\u8fd9\u91cc\u4f7f\u7528\u4e00\u4e2a ",(0,o.jsx)(n.code,{children:"popup"})," \u4f5c\u4e3a\u8c03\u7528"]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-ts",metastring:'title="popup.tsx"',children:'import { useEffect, useRef, useState } from "react";\n\nfunction IndexPopup() {\n const iframeRef = useRef(null);\n\n useEffect(() => {\n window.addEventListener("message", (event) => {\n console.log("EVAL output: " + event.data);\n });\n }, []);\n\n return (\n \n {\n iframeRef.current.contentWindow.postMessage("10 + 20", "*");\n }}\n >\n Trigger iframe eval\n \n