diff --git a/sunday-ext/.github/workflows/submit.yml b/sunday-ext/.github/workflows/submit.yml new file mode 100644 index 00000000..f4de3924 --- /dev/null +++ b/sunday-ext/.github/workflows/submit.yml @@ -0,0 +1,34 @@ +name: "Submit to Web Store" +on: + workflow_dispatch: + +jobs: + build: + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v3 + - name: Cache pnpm modules + uses: actions/cache@v3 + with: + path: ~/.pnpm-store + key: ${{ runner.os }}-${{ hashFiles('**/pnpm-lock.yaml') }} + restore-keys: | + ${{ runner.os }}- + - uses: pnpm/action-setup@v2.2.4 + with: + version: latest + run_install: true + - name: Use Node.js 16.x + uses: actions/setup-node@v3.4.1 + with: + node-version: 16.x + cache: "pnpm" + - name: Build the extension + run: pnpm build + - name: Package the extension into a zip artifact + run: pnpm package + - name: Browser Platform Publish + uses: PlasmoHQ/bpp@v3 + with: + keys: ${{ secrets.SUBMIT_KEYS }} + artifact: build/chrome-mv3-prod.zip diff --git a/sunday-ext/.gitignore b/sunday-ext/.gitignore new file mode 100644 index 00000000..a08786b4 --- /dev/null +++ b/sunday-ext/.gitignore @@ -0,0 +1,42 @@ + +# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. + +# dependencies +/node_modules +/.pnp +.pnp.js + +# testing +/coverage + +#cache +.turbo +.next +.vercel + +# misc +.DS_Store +*.pem + +# debug +npm-debug.log* +yarn-debug.log* +yarn-error.log* +.pnpm-debug.log* + + +# local env files +.env* + +out/ +build/ +dist/ + +# plasmo - https://www.plasmo.com +.plasmo + +# bpp - http://bpp.browser.market/ +keys.json + +# typescript +.tsbuildinfo diff --git a/sunday-ext/.prettierrc.mjs b/sunday-ext/.prettierrc.mjs new file mode 100644 index 00000000..77f84c21 --- /dev/null +++ b/sunday-ext/.prettierrc.mjs @@ -0,0 +1,26 @@ +/** + * @type {import('prettier').Options} + */ +export default { + printWidth: 80, + tabWidth: 2, + useTabs: false, + semi: false, + singleQuote: false, + trailingComma: "none", + bracketSpacing: true, + bracketSameLine: true, + plugins: ["@ianvs/prettier-plugin-sort-imports"], + importOrder: [ + "", // Node.js built-in modules + "", // Imports not matched by other special words or groups. + "", // Empty line + "^@plasmo/(.*)$", + "", + "^@plasmohq/(.*)$", + "", + "^~(.*)$", + "", + "^[./]" + ] +} diff --git a/sunday-ext/README.md b/sunday-ext/README.md new file mode 100644 index 00000000..dfd54919 --- /dev/null +++ b/sunday-ext/README.md @@ -0,0 +1,33 @@ +This is a [Plasmo extension](https://docs.plasmo.com/) project bootstrapped with [`plasmo init`](https://www.npmjs.com/package/plasmo). + +## Getting Started + +First, run the development server: + +```bash +pnpm dev +# or +npm run dev +``` + +Open your browser and load the appropriate development build. For example, if you are developing for the chrome browser, using manifest v3, use: `build/chrome-mv3-dev`. + +You can start editing the sidepanel by modifying `sidepanel.tsx`. It should auto-update as you make changes. To add an options page, simply add a `options.tsx` file to the root of the project, with a react component default exported. Likewise to add a content page, add a `content.ts` file to the root of the project, importing some module and do some logic, then reload the extension on your browser. + +For further guidance, [visit our Documentation](https://docs.plasmo.com/) + +## Making production build + +Run the following: + +```bash +pnpm build +# or +npm run build +``` + +This should create a production bundle for your extension, ready to be zipped and published to the stores. + +## Submit to the webstores + +The easiest way to deploy your Plasmo extension is to use the built-in [bpp](https://bpp.browser.market) GitHub action. Prior to using this action however, make sure to build your extension and upload the first version to the store to establish the basic credentials. Then, simply follow [this setup instruction](https://docs.plasmo.com/framework/workflows/submit) and you should be on your way for automated submission! diff --git a/sunday-ext/assets/icon.png b/sunday-ext/assets/icon.png new file mode 100644 index 00000000..cfd931be Binary files /dev/null and b/sunday-ext/assets/icon.png differ diff --git a/sunday-ext/package.json b/sunday-ext/package.json new file mode 100644 index 00000000..b7495c81 --- /dev/null +++ b/sunday-ext/package.json @@ -0,0 +1,34 @@ +{ + "name": "sunday-ext", + "displayName": "Sunday Extension", + "version": "0.0.1", + "description": "Using side-panel API in an extension", + "author": "Plasmo Corp. ", + "scripts": { + "dev": "plasmo dev", + "build": "plasmo build", + "package": "plasmo package" + }, + "dependencies": { + "plasmo": "^0.90.5", + "react": "18.2.0", + "react-dom": "18.2.0" + }, + "devDependencies": { + "@ianvs/prettier-plugin-sort-imports": "4.1.1", + "@types/chrome": "0.0.258", + "@types/node": "20.11.5", + "@types/react": "18.2.48", + "@types/react-dom": "18.2.18", + "prettier": "3.2.4", + "typescript": "5.3.3" + }, + "manifest": { + "host_permissions": [ + "https://*/*" + ] + }, + "contributors": [ + "louisgv" + ] +} diff --git a/sunday-ext/sidepanel.tsx b/sunday-ext/sidepanel.tsx new file mode 100644 index 00000000..30af155a --- /dev/null +++ b/sunday-ext/sidepanel.tsx @@ -0,0 +1,29 @@ +import { useState } from "react" + +function IndexSidePanel() { + const [data, setData] = useState("") + + return ( +
+

+ Welcome to your + + {" "} + Plasmo + {" "} + Extension! +

+ setData(e.target.value)} value={data} /> + + View Docs + +
+ ) +} + +export default IndexSidePanel diff --git a/sunday-ext/tsconfig.json b/sunday-ext/tsconfig.json new file mode 100644 index 00000000..d3ad826f --- /dev/null +++ b/sunday-ext/tsconfig.json @@ -0,0 +1,11 @@ +{ + "extends": "plasmo/templates/tsconfig.base", + "exclude": ["node_modules"], + "include": [".plasmo/index.d.ts", "./**/*.ts", "./**/*.tsx"], + "compilerOptions": { + "paths": { + "~*": ["./*"] + }, + "baseUrl": "." + } +}