mirror of
https://github.com/movie-web/extension.git
synced 2025-09-13 09:43:24 +00:00
Merge pull request #2 from movie-web/extension-mvp
Extension MVP (draft)
This commit is contained in:
William Oldham
GitHub
@@ -1,7 +1,7 @@
|
||||
root = true
|
||||
|
||||
[*]
|
||||
indent_size = 2
|
||||
indent_style = space
|
||||
indent_size = 2
|
||||
end_of_line = lf
|
||||
insert_final_newline = true
|
||||
@@ -2,7 +2,7 @@ module.exports = {
|
||||
env: {
|
||||
browser: true,
|
||||
},
|
||||
extends: ['airbnb-base', 'plugin:@typescript-eslint/recommended', 'plugin:prettier/recommended'],
|
||||
extends: ['airbnb', 'plugin:@typescript-eslint/recommended', 'plugin:prettier/recommended'],
|
||||
ignorePatterns: ['dist/*', 'plugins/*', 'tests/*', '/*.cjs', '/*.js', '/*.ts', '/**/*.test.ts', 'test/*'],
|
||||
parser: '@typescript-eslint/parser',
|
||||
parserOptions: {
|
||||
@@ -18,6 +18,10 @@ module.exports = {
|
||||
},
|
||||
plugins: ['@typescript-eslint', 'import', 'prettier'],
|
||||
rules: {
|
||||
'react/jsx-uses-react': 'off',
|
||||
'react/react-in-jsx-scope': 'off',
|
||||
'react/require-default-props': 'off',
|
||||
'react/destructuring-assignment': 'off',
|
||||
'no-underscore-dangle': 'off',
|
||||
'@typescript-eslint/no-explicit-any': 'off',
|
||||
'no-console': 'off',
|
||||
@@ -36,6 +40,7 @@ module.exports = {
|
||||
'no-param-reassign': ['error', { props: false }],
|
||||
'prefer-destructuring': 'off',
|
||||
'@typescript-eslint/no-unused-vars': ['warn', { argsIgnorePattern: '^_' }],
|
||||
'react/jsx-filename-extension': ['error', { extensions: ['.js', '.tsx', '.jsx'] }],
|
||||
'import/extensions': [
|
||||
'error',
|
||||
'ignorePackages',
|
||||
34
.github/workflows/submit.yml
vendored
Normal file
34
.github/workflows/submit.yml
vendored
Normal file
@@ -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
|
||||
29
.github/workflows/tests.yml
vendored
29
.github/workflows/tests.yml
vendored
@@ -13,19 +13,24 @@ jobs:
|
||||
runs-on: ubuntu-latest
|
||||
|
||||
steps:
|
||||
- name: Checkout code
|
||||
uses: actions/checkout@v3
|
||||
- name: Checkout code
|
||||
uses: actions/checkout@v4
|
||||
|
||||
- name: Install Node.js
|
||||
uses: actions/setup-node@v3
|
||||
with:
|
||||
node-version: 18
|
||||
- uses: pnpm/action-setup@v2
|
||||
with:
|
||||
version: 8
|
||||
|
||||
- name: Install packages
|
||||
run: npm install
|
||||
- name: Install Node.js
|
||||
uses: actions/setup-node@v4
|
||||
with:
|
||||
node-version: 20
|
||||
cache: "pnpm"
|
||||
|
||||
- name: Run tests
|
||||
run: npm run test
|
||||
- name: Install packages
|
||||
run: pnpm install
|
||||
|
||||
- name: Run linting
|
||||
run: npm run lint
|
||||
# - name: Run tests
|
||||
# run: pnpm run test
|
||||
|
||||
- name: Run linting
|
||||
run: pnpm run lint
|
||||
|
||||
43
.gitignore
vendored
43
.gitignore
vendored
@@ -1,4 +1,39 @@
|
||||
node_modules/
|
||||
coverage
|
||||
.env
|
||||
/dist
|
||||
|
||||
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
|
||||
|
||||
# dependencies
|
||||
/node_modules
|
||||
/.pnp
|
||||
.pnp.js
|
||||
|
||||
# testing
|
||||
/coverage
|
||||
|
||||
#cache
|
||||
.turbo
|
||||
|
||||
# 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
|
||||
|
||||
@@ -1,5 +0,0 @@
|
||||
{
|
||||
"printWidth": 120,
|
||||
"trailingComma": "all",
|
||||
"singleQuote": true
|
||||
}
|
||||
9
.prettierrc.mjs
Normal file
9
.prettierrc.mjs
Normal file
@@ -0,0 +1,9 @@
|
||||
/**
|
||||
* @type {import('prettier').Options}
|
||||
*/
|
||||
export default {
|
||||
printWidth: 120,
|
||||
trailingComma: 'all',
|
||||
singleQuote: true,
|
||||
endOfLine: 'auto',
|
||||
};
|
||||
80
README.md
80
README.md
@@ -2,38 +2,56 @@
|
||||
|
||||
movie-web extension, allows providers to work without proxy
|
||||
|
||||
## How this will likely work on the app
|
||||
## Components
|
||||
|
||||
**On mp4 streaming:**
|
||||
1. movie-web application will send the following to the extension:
|
||||
- full specific URL for streaming URL
|
||||
- preferred headers for the streaming URL
|
||||
2. extension will set rules for the specific URL:
|
||||
- CORS headers, allow cross origin
|
||||
- Set preferred headers sent by app
|
||||
1. Messaging
|
||||
- `makeRequest` message. Make requests that ignore CORS and can set forbidden headers. Replies with request results.
|
||||
- `prepareStream` message. For a list of domains, set required or preferred headers.
|
||||
- `hello` message. Gives details on the extension, like the version. If not allowed, simply respond with an error describing it.
|
||||
|
||||
**On HLS streaming:**
|
||||
1. movie-web application will send the following to the extension:
|
||||
- hostname for the streaming CDN
|
||||
- preferred headers for the streaming CDN
|
||||
2. extension will set rules for the CDN hostname:
|
||||
- CORS headers, allow cross origin
|
||||
- Set preferred headers sent by app
|
||||
2. Popout
|
||||
- The popout should have a simple interface for trusting or untrusting the current site. Only trusted sites should be able to communicate with the extension.
|
||||
|
||||
**On scraping request:**
|
||||
1. movie-web application will send the following to the extension:
|
||||
- url it will attempt to scrape
|
||||
- list of headers it's planning on reading
|
||||
- list of headers it should add
|
||||
2. extension will set rules for the list of URLS:
|
||||
- CORS headers, allow cross origin
|
||||
- set readable headers in CORS
|
||||
- set the headers for sending the request
|
||||
3. extension will reply with the rule ID
|
||||
4. movie-web will execute the request
|
||||
5. movie-web will tell the extension to remove the rule with the rule ID
|
||||
3. Storage
|
||||
- The extension will need to store active rules for setting headers. And which sites (origins) are trusted.
|
||||
|
||||
## How will this work for other domains?
|
||||
- The popup will allow adding/removing the current tab domain to allowed domains list
|
||||
- The extension will not listen to any calls from disallowed domains
|
||||
- movie-web.app is default in the list of allowed domains
|
||||
## How will the client work
|
||||
1. When creating providers, first send a hello message to identify if there is an extension installed at all and if its correct version.
|
||||
2. If no extension (or not suitable) fallback on standard providers.
|
||||
3. Else, make new provider controls, target set to BROWSER_EXTENSION, with custom fetcher that uses the extension to send requests instead.
|
||||
4. If any message to the extension fail. Fallback to standard providers again.
|
||||
5. When a stream will be played, communicate to extension through a `prepareStream`
|
||||
|
||||
# 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 popup by modifying `popup.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!
|
||||
|
||||
BIN
assets/icon.png
Normal file
BIN
assets/icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.1 KiB |
56
package.json
56
package.json
@@ -1,38 +1,60 @@
|
||||
{
|
||||
"name": "extension",
|
||||
"name": "@movie-web/extension",
|
||||
"displayName": "movie-web extension",
|
||||
"version": "1.0.0",
|
||||
"description": "movie-web extension, allows providers to work without proxy",
|
||||
"main": "index.js",
|
||||
"type": "module",
|
||||
"author": "movie-web",
|
||||
"scripts": {
|
||||
"build": "vite build",
|
||||
"build:firefox": "vite build",
|
||||
"build:chrome": "vite build",
|
||||
"test": "vitest run",
|
||||
"dev": "plasmo dev",
|
||||
"build": "plasmo build",
|
||||
"build:firefox": "plasmo build --target=firefox-mv3",
|
||||
"package": "plasmo package",
|
||||
"package:firefox": "plasmo package --target=firefox-mv3",
|
||||
"lint": "eslint --ext .tsx,.ts src",
|
||||
"lint:fix": "eslint --fix --ext .tsx,.ts src",
|
||||
"lint:report": "eslint --ext .tsx,.ts --output-file eslint_report.json --format json src",
|
||||
"preinstall": "npx -y only-allow pnpm"
|
||||
},
|
||||
"keywords": [],
|
||||
"author": "movie-web",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"vite": "^5.0.10"
|
||||
"@plasmohq/messaging": "^0.6.1",
|
||||
"@plasmohq/storage": "^1.9.0",
|
||||
"plasmo": "0.84.0",
|
||||
"react": "18.2.0",
|
||||
"react-dom": "18.2.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/chrome": "^0.0.254",
|
||||
"@types/lodash.merge": "^4.6.9",
|
||||
"@types/node": "^20.10.5",
|
||||
"@types/chrome": "0.0.251",
|
||||
"@types/firefox-webext-browser": "^120.0.0",
|
||||
"@types/node": "20.9.0",
|
||||
"@types/react": "18.2.37",
|
||||
"@types/react-dom": "18.2.15",
|
||||
"@typescript-eslint/eslint-plugin": "^6.15.0",
|
||||
"@typescript-eslint/parser": "^6.15.0",
|
||||
"eslint": "^8.56.0",
|
||||
"eslint-config-airbnb-base": "^15.0.0",
|
||||
"eslint-config-airbnb": "^19.0.4",
|
||||
"eslint-config-prettier": "^9.1.0",
|
||||
"eslint-import-resolver-typescript": "^3.6.1",
|
||||
"eslint-plugin-import": "^2.29.1",
|
||||
"eslint-plugin-prettier": "^5.1.1",
|
||||
"lodash.merge": "^4.6.2",
|
||||
"vite-plugin-static-copy": "^1.0.0"
|
||||
"eslint-plugin-react": "^7.33.2",
|
||||
"eslint-plugin-react-hooks": "^4.6.0",
|
||||
"prettier": "3.0.3",
|
||||
"typescript": "5.2.2"
|
||||
},
|
||||
"manifest": {
|
||||
"permissions": [
|
||||
"declarativeNetRequest",
|
||||
"tabs"
|
||||
],
|
||||
"host_permissions": [
|
||||
"<all_urls>",
|
||||
"https://dev.movie-web.app/*",
|
||||
"https://movie-web.app/*"
|
||||
],
|
||||
"browser_specific_settings": {
|
||||
"gecko": {
|
||||
"id": "{3fd86354-c73f-4395-9e26-2c5c984579bf}"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,46 +0,0 @@
|
||||
import { PluginOption, ResolvedConfig } from "vite";
|
||||
import path from "path";
|
||||
import fs from "fs";
|
||||
import merge from "lodash.merge";
|
||||
|
||||
export type ManifestMergerOptions = {
|
||||
output: string;
|
||||
files: string[];
|
||||
}
|
||||
|
||||
function mergeManifests(inputs: string[]): string {
|
||||
const parsed = inputs.map(v => JSON.parse(v));
|
||||
const output = {};
|
||||
const merged = merge(output, ...parsed);
|
||||
return JSON.stringify(merged, null, 2);
|
||||
}
|
||||
|
||||
export const manifestMerge = (options: ManifestMergerOptions): PluginOption[] => {
|
||||
const inputFiles = options.files.map(v=>fs.readFileSync(v, 'utf8'));
|
||||
let config: ResolvedConfig | null = null;
|
||||
let distPath: string | null = null;
|
||||
|
||||
return [
|
||||
{
|
||||
name: 'manifest-merger',
|
||||
configResolved(resolvedConfig) {
|
||||
config = resolvedConfig
|
||||
distPath = path.resolve(config.build.outDir)
|
||||
},
|
||||
closeBundle() {
|
||||
if (!config || !distPath) return
|
||||
if (config.command === 'serve') {
|
||||
return
|
||||
}
|
||||
|
||||
fs.writeFileSync(
|
||||
path.join(distPath ?? "", options.output),
|
||||
mergeManifests(inputFiles),
|
||||
{
|
||||
encoding: 'utf8',
|
||||
}
|
||||
)
|
||||
}
|
||||
},
|
||||
]
|
||||
}
|
||||
5705
pnpm-lock.yaml
generated
5705
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
14
src/Popup.css
Normal file
14
src/Popup.css
Normal file
@@ -0,0 +1,14 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@500;800&display=swap');
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: 'Inter', sans-serif;
|
||||
}
|
||||
|
||||
.popup {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 637 B |
@@ -1,5 +0,0 @@
|
||||
{
|
||||
"background": {
|
||||
"service_worker": "worker.js"
|
||||
}
|
||||
}
|
||||
@@ -1,21 +0,0 @@
|
||||
{
|
||||
"manifest_version": 3,
|
||||
"name": "movie-web extension",
|
||||
"version": "0.1",
|
||||
"description": "Allows for sources to work without a proxy",
|
||||
"icons": {
|
||||
"16": "assets/icons/16.png"
|
||||
},
|
||||
"action": {
|
||||
"default_title": "movie-web extension",
|
||||
"default_popup": "popup.html"
|
||||
},
|
||||
"permissions": ["declarativeNetRequest"],
|
||||
"host_permissions": ["<all_urls>"],
|
||||
"web_accessible_resources": [
|
||||
{
|
||||
"resources": ["*.js.map"],
|
||||
"matches": ["<all_urls>"]
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -1,10 +0,0 @@
|
||||
{
|
||||
"background": {
|
||||
"scripts": ["worker.js"]
|
||||
},
|
||||
"browser_specific_settings": {
|
||||
"gecko": {
|
||||
"id": "extension-firefox@movie-web.app"
|
||||
}
|
||||
}
|
||||
}
|
||||
32
src/background/messages/hello.ts
Normal file
32
src/background/messages/hello.ts
Normal file
@@ -0,0 +1,32 @@
|
||||
import type { PlasmoMessaging } from '@plasmohq/messaging';
|
||||
|
||||
import { hasPermission } from '~hooks/usePermission';
|
||||
import { getVersion } from '~hooks/useVersion';
|
||||
import type { BaseRequest } from '~types/request';
|
||||
import type { BaseResponse } from '~types/response';
|
||||
import { isDomainWhitelisted } from '~utils/storage';
|
||||
|
||||
type Response = BaseResponse<{
|
||||
version: string;
|
||||
allowed: boolean;
|
||||
hasPermission: boolean;
|
||||
}>;
|
||||
|
||||
const handler: PlasmoMessaging.MessageHandler<BaseRequest, Response> = async (req, res) => {
|
||||
try {
|
||||
const version = getVersion();
|
||||
res.send({
|
||||
success: true,
|
||||
version,
|
||||
allowed: await isDomainWhitelisted(req.sender.tab.url),
|
||||
hasPermission: await hasPermission(),
|
||||
});
|
||||
} catch (err) {
|
||||
res.send({
|
||||
success: false,
|
||||
error: err.message,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
export default handler;
|
||||
56
src/background/messages/makeRequest.ts
Normal file
56
src/background/messages/makeRequest.ts
Normal file
@@ -0,0 +1,56 @@
|
||||
import type { PlasmoMessaging } from '@plasmohq/messaging';
|
||||
|
||||
import type { BaseRequest } from '~types/request';
|
||||
import type { BaseResponse } from '~types/response';
|
||||
import { makeFullUrl } from '~utils/fetcher';
|
||||
import { assertDomainWhitelist } from '~utils/storage';
|
||||
|
||||
export interface Request extends BaseRequest {
|
||||
baseUrl?: string;
|
||||
headers?: Record<string, string>;
|
||||
method?: string;
|
||||
query?: Record<string, string>;
|
||||
readHeaders?: Record<string, string>;
|
||||
url: string;
|
||||
body?: string | FormData | URLSearchParams;
|
||||
}
|
||||
|
||||
type Response<T> = BaseResponse<{
|
||||
response: {
|
||||
statusCode: number;
|
||||
headers: Record<string, string>;
|
||||
finalUrl: string;
|
||||
body: T;
|
||||
};
|
||||
}>;
|
||||
|
||||
const handler: PlasmoMessaging.MessageHandler<Request, Response<any>> = async (req, res) => {
|
||||
try {
|
||||
await assertDomainWhitelist(req.sender.tab.url);
|
||||
|
||||
const response = await fetch(makeFullUrl(req.body.url, req.body), {
|
||||
method: req.body.method,
|
||||
headers: req.body.headers,
|
||||
body: req.body.body,
|
||||
});
|
||||
const contentType = response.headers.get('content-type');
|
||||
const body = contentType?.includes('application/json') ? await response.json() : await response.text();
|
||||
|
||||
res.send({
|
||||
success: true,
|
||||
response: {
|
||||
statusCode: response.status,
|
||||
headers: Object.fromEntries(response.headers.entries()), // Headers object isn't serializable
|
||||
body,
|
||||
finalUrl: response.url,
|
||||
},
|
||||
});
|
||||
} catch (err) {
|
||||
res.send({
|
||||
success: false,
|
||||
error: err.message,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
export default handler;
|
||||
37
src/background/messages/openPage.ts
Normal file
37
src/background/messages/openPage.ts
Normal file
@@ -0,0 +1,37 @@
|
||||
import type { PlasmoMessaging } from '@plasmohq/messaging';
|
||||
|
||||
import type { BaseRequest } from '~types/request';
|
||||
import type { BaseResponse } from '~types/response';
|
||||
import { isChrome } from '~utils/extension';
|
||||
|
||||
type Request = BaseRequest & {
|
||||
page: string;
|
||||
redirectUrl: string;
|
||||
};
|
||||
|
||||
const handler: PlasmoMessaging.MessageHandler<Request, BaseResponse> = async (req, res) => {
|
||||
try {
|
||||
const searchParams = new URLSearchParams();
|
||||
searchParams.set('redirectUrl', req.body.redirectUrl);
|
||||
const url = (chrome || browser).runtime.getURL(`/tabs/${req.body.page}.html?${searchParams.toString()}`);
|
||||
|
||||
if (isChrome()) {
|
||||
await chrome.tabs.update(req.sender.tab.id, {
|
||||
url,
|
||||
});
|
||||
} else {
|
||||
await browser.tabs.update(req.sender.tab.id, { url });
|
||||
}
|
||||
|
||||
res.send({
|
||||
success: true,
|
||||
});
|
||||
} catch (err) {
|
||||
res.send({
|
||||
success: false,
|
||||
error: err.message,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
export default handler;
|
||||
126
src/background/messages/prepareStream.ts
Normal file
126
src/background/messages/prepareStream.ts
Normal file
@@ -0,0 +1,126 @@
|
||||
import type { PlasmoMessaging } from '@plasmohq/messaging';
|
||||
|
||||
import type { BaseRequest } from '~types/request';
|
||||
import type { BaseResponse } from '~types/response';
|
||||
import { isChrome } from '~utils/extension';
|
||||
import { assertDomainWhitelist } from '~utils/storage';
|
||||
|
||||
interface Request extends BaseRequest {
|
||||
ruleId: number;
|
||||
targetDomains: [string, ...string[]];
|
||||
requestHeaders?: Record<string, string>;
|
||||
responseHeaders?: Record<string, string>;
|
||||
}
|
||||
|
||||
const mapHeadersToDeclarativeNetRequestHeaders = (
|
||||
headers: Record<string, string>,
|
||||
op: string,
|
||||
): { header: string; operation: any; value: string }[] => {
|
||||
return Object.entries(headers).map(([name, value]) => ({
|
||||
header: name,
|
||||
operation: op,
|
||||
value,
|
||||
}));
|
||||
};
|
||||
|
||||
const handler: PlasmoMessaging.MessageHandler<Request, BaseResponse> = async (req, res) => {
|
||||
try {
|
||||
await assertDomainWhitelist(req.sender.tab.url);
|
||||
if (isChrome()) {
|
||||
await chrome.declarativeNetRequest.updateDynamicRules({
|
||||
removeRuleIds: [req.body.ruleId],
|
||||
addRules: [
|
||||
{
|
||||
id: req.body.ruleId,
|
||||
condition: {
|
||||
requestDomains: req.body.targetDomains,
|
||||
},
|
||||
action: {
|
||||
type: chrome.declarativeNetRequest.RuleActionType.MODIFY_HEADERS,
|
||||
...(req.body.requestHeaders && Object.keys(req.body.requestHeaders).length > 0
|
||||
? {
|
||||
requestHeaders: mapHeadersToDeclarativeNetRequestHeaders(
|
||||
req.body.requestHeaders,
|
||||
chrome.declarativeNetRequest.HeaderOperation.SET,
|
||||
),
|
||||
}
|
||||
: {}),
|
||||
responseHeaders: [
|
||||
{
|
||||
header: 'Access-Control-Allow-Origin',
|
||||
operation: chrome.declarativeNetRequest.HeaderOperation.SET,
|
||||
value: '*',
|
||||
},
|
||||
{
|
||||
header: 'Access-Control-Allow-Methods',
|
||||
operation: chrome.declarativeNetRequest.HeaderOperation.SET,
|
||||
value: 'GET, POST, PUT, DELETE, PATCH, OPTIONS',
|
||||
},
|
||||
{
|
||||
header: 'Access-Control-Allow-Headers',
|
||||
operation: chrome.declarativeNetRequest.HeaderOperation.SET,
|
||||
value: '*',
|
||||
},
|
||||
...mapHeadersToDeclarativeNetRequestHeaders(
|
||||
req.body.responseHeaders ?? {},
|
||||
chrome.declarativeNetRequest.HeaderOperation.SET,
|
||||
),
|
||||
],
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
if (chrome.runtime.lastError?.message) throw new Error(chrome.runtime.lastError.message);
|
||||
} else {
|
||||
await browser.declarativeNetRequest.updateDynamicRules({
|
||||
removeRuleIds: [req.body.ruleId],
|
||||
addRules: [
|
||||
{
|
||||
id: req.body.ruleId,
|
||||
condition: {
|
||||
requestDomains: req.body.targetDomains,
|
||||
},
|
||||
action: {
|
||||
type: 'modifyHeaders',
|
||||
...(req.body.requestHeaders && Object.keys(req.body.requestHeaders).length > 0
|
||||
? {
|
||||
requestHeaders: mapHeadersToDeclarativeNetRequestHeaders(req.body.requestHeaders, 'set'),
|
||||
}
|
||||
: {}),
|
||||
responseHeaders: [
|
||||
{
|
||||
header: 'Access-Control-Allow-Origin',
|
||||
operation: 'set',
|
||||
value: '*',
|
||||
},
|
||||
{
|
||||
header: 'Access-Control-Allow-Methods',
|
||||
operation: 'set',
|
||||
value: 'GET, POST, PUT, DELETE, PATCH, OPTIONS',
|
||||
},
|
||||
{
|
||||
header: 'Access-Control-Allow-Headers',
|
||||
operation: 'set',
|
||||
value: '*',
|
||||
},
|
||||
...mapHeadersToDeclarativeNetRequestHeaders(req.body.responseHeaders ?? {}, 'set'),
|
||||
],
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
if (browser.runtime.lastError?.message) throw new Error(browser.runtime.lastError.message);
|
||||
}
|
||||
|
||||
res.send({
|
||||
success: true,
|
||||
});
|
||||
} catch (err) {
|
||||
res.send({
|
||||
success: false,
|
||||
error: err.message,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
export default handler;
|
||||
17
src/components/BottomLabel.css
Normal file
17
src/components/BottomLabel.css
Normal file
@@ -0,0 +1,17 @@
|
||||
.bottom-label {
|
||||
position: absolute;
|
||||
bottom: .25rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: .5rem;
|
||||
font-weight: normal;
|
||||
color: #4A4863;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.dot {
|
||||
width: 2px;
|
||||
height: 2px;
|
||||
background: currentColor;
|
||||
border-radius: 100px;
|
||||
}
|
||||
14
src/components/BottomLabel.tsx
Normal file
14
src/components/BottomLabel.tsx
Normal file
@@ -0,0 +1,14 @@
|
||||
import { useVersion } from '~hooks/useVersion';
|
||||
import './BottomLabel.css';
|
||||
|
||||
export function BottomLabel() {
|
||||
const version = useVersion({ prefixed: true });
|
||||
|
||||
return (
|
||||
<h3 className="bottom-label">
|
||||
{version}
|
||||
<div className="dot" />
|
||||
movie-web
|
||||
</h3>
|
||||
);
|
||||
}
|
||||
22
src/components/DisabledScreen.css
Normal file
22
src/components/DisabledScreen.css
Normal file
@@ -0,0 +1,22 @@
|
||||
.disabled {
|
||||
color: white;
|
||||
text-align: center;
|
||||
max-width: 230px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.disabled svg {
|
||||
display: block;
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
margin: 0 auto;
|
||||
color: #B44868;
|
||||
}
|
||||
|
||||
.disabled p {
|
||||
color: #4A4864;
|
||||
}
|
||||
|
||||
.disabled strong {
|
||||
color: white;
|
||||
}
|
||||
13
src/components/DisabledScreen.tsx
Normal file
13
src/components/DisabledScreen.tsx
Normal file
@@ -0,0 +1,13 @@
|
||||
import './DisabledScreen.css';
|
||||
import { Icon } from './Icon';
|
||||
|
||||
export function DisabledScreen() {
|
||||
return (
|
||||
<div className="disabled">
|
||||
<Icon name="warningCircle" />
|
||||
<p>
|
||||
The <strong>movie-web extension</strong> can not be used on this page
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
4
src/components/Frame.css
Normal file
4
src/components/Frame.css
Normal file
@@ -0,0 +1,4 @@
|
||||
.frame {
|
||||
background-color: #0a080e;
|
||||
background-image: radial-gradient(271.48% 132.05% at 136.13% 65.62%, #271945b3 0%, #1c1c2c00 100%), radial-gradient(671.15% 123.02% at 76.68% -34.38%, #272753 0%, #17172000 100%);
|
||||
}
|
||||
15
src/components/Frame.tsx
Normal file
15
src/components/Frame.tsx
Normal file
@@ -0,0 +1,15 @@
|
||||
import type { ReactNode } from 'react';
|
||||
|
||||
import './Frame.css';
|
||||
|
||||
export interface FrameProps {
|
||||
children?: ReactNode;
|
||||
}
|
||||
|
||||
export function Frame(props: FrameProps) {
|
||||
return (
|
||||
<div className="frame" style={{ width: 300, height: 300 }}>
|
||||
{props.children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
10
src/components/Icon.tsx
Normal file
10
src/components/Icon.tsx
Normal file
@@ -0,0 +1,10 @@
|
||||
const icons = {
|
||||
power: `<svg width="29" height="29" viewBox="0 0 29 29" fill="none" xmlns="http://www.w3.org/2000/svg"><g filter="url(#filter0_i_1153_291)"><path fill-rule="evenodd" clip-rule="evenodd" d="M16.4375 2.875C16.4375 2.36114 16.2334 1.86833 15.87 1.50498C15.5067 1.14163 15.0139 0.9375 14.5 0.9375C13.9861 0.9375 13.4933 1.14163 13.13 1.50498C12.7666 1.86833 12.5625 2.36114 12.5625 2.875V15.7917C12.5625 16.3055 12.7666 16.7983 13.13 17.1617C13.4933 17.525 13.9861 17.7292 14.5 17.7292C15.0139 17.7292 15.5067 17.525 15.87 17.1617C16.2334 16.7983 16.4375 16.3055 16.4375 15.7917V2.875ZM9.14475 6.42708C9.35678 6.28621 9.53899 6.10495 9.68097 5.89366C9.82295 5.68237 9.92192 5.44519 9.97224 5.19565C10.0226 4.94611 10.0232 4.6891 9.97422 4.4393C9.92521 4.1895 9.82748 3.9518 9.68661 3.73977C9.54574 3.52774 9.36448 3.34553 9.15319 3.20355C8.9419 3.06157 8.70471 2.9626 8.45517 2.91228C8.20563 2.86197 7.94863 2.86129 7.69883 2.9103C7.44903 2.95931 7.21132 3.05704 6.99929 3.19792C5.13427 4.43483 3.60458 6.11435 2.54683 8.08651C1.48907 10.0587 0.936176 12.2621 0.937502 14.5C0.937502 21.9904 7.00963 28.0625 14.5 28.0625C21.9904 28.0625 28.0625 21.9904 28.0625 14.5C28.0625 9.78025 25.651 5.62625 22.0007 3.19792C21.5725 2.91358 21.0489 2.811 20.545 2.91274C20.0412 3.01448 19.5984 3.3122 19.314 3.74042C19.0297 4.16863 18.9271 4.69226 19.0289 5.19611C19.1306 5.69995 19.4283 6.14275 19.8565 6.42708C21.5907 7.5775 22.9083 9.25578 23.6143 11.2134C24.3203 13.1711 24.3771 15.3041 23.7763 17.2965C23.1755 19.289 21.9491 21.035 20.2786 22.2761C18.6081 23.5172 16.5824 24.1873 14.5013 24.1873C12.4202 24.1873 10.3945 23.5172 8.72399 22.2761C7.05349 21.035 5.82705 19.289 5.22627 17.2965C4.62548 15.3041 4.68228 13.1711 5.38826 11.2134C6.09424 9.25578 7.41057 7.5775 9.14475 6.42708Z" fill="currentColor" /></g><defs><filter id="filter0_i_1153_291" x="0.9375" y="0.9375" width="27.125" height="27.125"filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix" /><feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" /><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" /><feOffset /><feGaussianBlur stdDeviation="2" /><feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" /><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.3 0" /><feBlend mode="normal" in2="shape" result="effect1_innerShadow_1153_291" /></filter></defs></svg>`,
|
||||
warningCircle: `<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-alert-circle"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12.01" y2="16"></line></svg>`,
|
||||
};
|
||||
export type Icons = keyof typeof icons;
|
||||
|
||||
export function Icon(props: { name: Icons }) {
|
||||
// eslint-disable-next-line react/no-danger
|
||||
return <div dangerouslySetInnerHTML={{ __html: icons[props.name] }} />;
|
||||
}
|
||||
19
src/components/PermissionMissingScreen.tsx
Normal file
19
src/components/PermissionMissingScreen.tsx
Normal file
@@ -0,0 +1,19 @@
|
||||
import { Icon } from '~components/Icon';
|
||||
|
||||
import '~tabs/PermissionGrant.css';
|
||||
|
||||
export interface PermissionMissingProps {
|
||||
onGrant?: () => void;
|
||||
}
|
||||
|
||||
export function PermissionMissingScreen(props: PermissionMissingProps) {
|
||||
return (
|
||||
<div className="disabled">
|
||||
<Icon name="warningCircle" />
|
||||
<p style={{ paddingBottom: 25, paddingTop: 10 }}>The extension is missing permissions it needs to function</p>
|
||||
<button type="button" className="grant-permission-btn" onClick={props.onGrant}>
|
||||
Grant Permission
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
119
src/components/ToggleButton.css
Normal file
119
src/components/ToggleButton.css
Normal file
@@ -0,0 +1,119 @@
|
||||
.button-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
.button-wrapper {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.button-wrapper::after {
|
||||
position: absolute;
|
||||
z-index: 0;
|
||||
content: '';
|
||||
width: 120%;
|
||||
height: 120%;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
background-color: rgba(119, 66, 233, 0.25);
|
||||
filter: blur(35px);
|
||||
opacity: 0;
|
||||
transition: opacity 300ms;
|
||||
}
|
||||
|
||||
.button-wrapper.active::after {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.toggle-button {
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 1000px;
|
||||
overflow: hidden;
|
||||
border: 0;
|
||||
background-color: transparent;
|
||||
transition: transform 50ms;
|
||||
}
|
||||
|
||||
.inside-glow {
|
||||
transition: transform 300ms;
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
.toggle-button:hover .inside-glow {
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
.toggle-button:active {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
.actual-button-style {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 1000px;
|
||||
box-sizing: border-box;
|
||||
border-color: rgba(96, 66, 166, 0.50);
|
||||
transition: opacity 300ms ease;
|
||||
border: 1px solid #322E48;
|
||||
background-image: linear-gradient(180deg, #232236 0%, #0E0D15 100%);
|
||||
}
|
||||
|
||||
.actual-button-style.active {
|
||||
border-color: #48307F;
|
||||
background-image: linear-gradient(180deg, #463177 0%, #2D1C54 100%);
|
||||
}
|
||||
|
||||
.toggle-button .inside-glow, .toggle-button svg {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
transition: color 300ms, transform 300ms;
|
||||
}
|
||||
|
||||
.toggle-button .inside-glow {
|
||||
position: absolute;
|
||||
width: 90%;
|
||||
height: 90%;
|
||||
border-radius: 1000px;
|
||||
filter: blur(10px);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.toggle-button svg {
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
display: block;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.toggle-button svg * {
|
||||
box-shadow: 0px 0px 0 4px rgba(0, 0, 0, 1) inset;
|
||||
}
|
||||
|
||||
.button-container p {
|
||||
color: #4A4863;
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.button-container strong {
|
||||
color: white;
|
||||
}
|
||||
43
src/components/ToggleButton.tsx
Normal file
43
src/components/ToggleButton.tsx
Normal file
@@ -0,0 +1,43 @@
|
||||
import { Icon } from './Icon';
|
||||
import './ToggleButton.css';
|
||||
|
||||
export interface ToggleButtonProps {
|
||||
onClick?: () => void;
|
||||
active?: boolean;
|
||||
domain: string;
|
||||
}
|
||||
|
||||
export function ToggleButton(props: ToggleButtonProps) {
|
||||
const opacityStyle = {
|
||||
opacity: props.active ? 1 : 0,
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="button-container">
|
||||
<div className={['button-wrapper', props.active ? 'active' : ''].join(' ')}>
|
||||
<button
|
||||
type="button"
|
||||
onClick={props.onClick}
|
||||
aria-label="Toggle extension on/off"
|
||||
className="toggle-button"
|
||||
style={{
|
||||
color: props.active ? '#9B93CC' : '#4B4765',
|
||||
}}
|
||||
>
|
||||
<div className="actual-button-style" />
|
||||
<div className="actual-button-style active" style={opacityStyle} />
|
||||
<Icon name="power" />
|
||||
<div
|
||||
className="inside-glow"
|
||||
style={{
|
||||
backgroundColor: props.active ? '#452D7C' : '#181724',
|
||||
}}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
<p>
|
||||
Extension {props.active ? 'enabled' : 'disabled'} <br /> on <strong>{props.domain}</strong>
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
23
src/contents/movie-web.ts
Normal file
23
src/contents/movie-web.ts
Normal file
@@ -0,0 +1,23 @@
|
||||
import { relayMessage } from '@plasmohq/messaging';
|
||||
import type { PlasmoCSConfig } from 'plasmo';
|
||||
|
||||
export const config: PlasmoCSConfig = {
|
||||
// <all_urls> works for chrome, but not for firefox, so we add explicit domains for firefox
|
||||
matches: ['<all_urls>', 'https://dev.movie-web.app/*', 'https://movie-web.app/*'],
|
||||
};
|
||||
|
||||
relayMessage({
|
||||
name: 'hello',
|
||||
});
|
||||
|
||||
relayMessage({
|
||||
name: 'makeRequest',
|
||||
});
|
||||
|
||||
relayMessage({
|
||||
name: 'prepareStream',
|
||||
});
|
||||
|
||||
relayMessage({
|
||||
name: 'openPage',
|
||||
});
|
||||
19
src/hooks/useDomain.ts
Normal file
19
src/hooks/useDomain.ts
Normal file
@@ -0,0 +1,19 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
|
||||
import { makeUrlIntoDomain } from '~utils/domains';
|
||||
import { listenToTabChanges, queryCurrentDomain, stopListenToTabChanges } from '~utils/tabs';
|
||||
|
||||
export function useDomain(): null | string {
|
||||
const [domain, setDomain] = useState<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const listen = () => queryCurrentDomain(setDomain);
|
||||
listen();
|
||||
listenToTabChanges(listen);
|
||||
return () => {
|
||||
stopListenToTabChanges(listen);
|
||||
};
|
||||
}, []);
|
||||
|
||||
return makeUrlIntoDomain(domain);
|
||||
}
|
||||
44
src/hooks/useDomainWhitelist.ts
Normal file
44
src/hooks/useDomainWhitelist.ts
Normal file
@@ -0,0 +1,44 @@
|
||||
import { useCallback } from 'react';
|
||||
|
||||
import { usePermission } from '~hooks/usePermission';
|
||||
import { useDomainStorage } from '~utils/storage';
|
||||
|
||||
export function useDomainWhitelist() {
|
||||
const [domainWhitelist, setDomainWhitelist] = useDomainStorage();
|
||||
|
||||
const removeDomain = useCallback((domain: string | null) => {
|
||||
if (!domain) return;
|
||||
setDomainWhitelist((s) => [...s.filter((v) => v !== domain)]);
|
||||
}, []);
|
||||
|
||||
const addDomain = useCallback((domain: string | null) => {
|
||||
if (!domain) return;
|
||||
setDomainWhitelist((s) => [...s.filter((v) => v !== domain), domain]);
|
||||
}, []);
|
||||
|
||||
return {
|
||||
removeDomain,
|
||||
addDomain,
|
||||
domainWhitelist,
|
||||
};
|
||||
}
|
||||
|
||||
export function useToggleWhitelistDomain(domain: string) {
|
||||
const { domainWhitelist, addDomain, removeDomain } = useDomainWhitelist();
|
||||
const isWhitelisted = domainWhitelist.includes(domain);
|
||||
const { grantPermission } = usePermission();
|
||||
|
||||
const toggle = useCallback(() => {
|
||||
if (!isWhitelisted) {
|
||||
addDomain(domain);
|
||||
return;
|
||||
}
|
||||
|
||||
removeDomain(domain);
|
||||
}, [isWhitelisted, domain, addDomain, removeDomain, grantPermission]);
|
||||
|
||||
return {
|
||||
toggle,
|
||||
isWhitelisted,
|
||||
};
|
||||
}
|
||||
32
src/hooks/usePermission.ts
Normal file
32
src/hooks/usePermission.ts
Normal file
@@ -0,0 +1,32 @@
|
||||
import { useCallback, useEffect, useState } from 'react';
|
||||
|
||||
import { useDomainWhitelist } from './useDomainWhitelist';
|
||||
|
||||
export async function hasPermission() {
|
||||
return chrome.permissions.contains({
|
||||
origins: ['<all_urls>'],
|
||||
});
|
||||
}
|
||||
|
||||
export function usePermission() {
|
||||
const { addDomain } = useDomainWhitelist();
|
||||
const [permission, setPermission] = useState(false);
|
||||
|
||||
const grantPermission = useCallback(async (domain?: string) => {
|
||||
const granted = await chrome.permissions.request({
|
||||
origins: ['<all_urls>'],
|
||||
});
|
||||
setPermission(granted);
|
||||
if (granted && domain) addDomain(domain);
|
||||
return granted;
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
hasPermission().then((has) => setPermission(has));
|
||||
}, []);
|
||||
|
||||
return {
|
||||
hasPermission: permission,
|
||||
grantPermission,
|
||||
};
|
||||
}
|
||||
9
src/hooks/useVersion.ts
Normal file
9
src/hooks/useVersion.ts
Normal file
@@ -0,0 +1,9 @@
|
||||
export function getVersion(ops?: { prefixed?: boolean }) {
|
||||
const prefix = ops?.prefixed ? 'v' : '';
|
||||
const manifest = (chrome || browser).runtime.getManifest();
|
||||
return `${prefix}${manifest.version}`;
|
||||
}
|
||||
|
||||
export function useVersion(ops?: { prefixed?: boolean }) {
|
||||
return getVersion(ops);
|
||||
}
|
||||
36
src/index.ts
36
src/index.ts
@@ -1,36 +0,0 @@
|
||||
chrome.declarativeNetRequest.updateDynamicRules({
|
||||
removeRuleIds: [666],
|
||||
addRules: [
|
||||
{
|
||||
id: 666,
|
||||
priority: 1,
|
||||
condition: {
|
||||
initiatorDomains: ['movie-web.app'],
|
||||
},
|
||||
action: {
|
||||
type: chrome.declarativeNetRequest.RuleActionType.MODIFY_HEADERS,
|
||||
requestHeaders: [
|
||||
{
|
||||
header: 'X-Test',
|
||||
operation: chrome.declarativeNetRequest.HeaderOperation.SET,
|
||||
value: 'Hello world',
|
||||
},
|
||||
],
|
||||
responseHeaders: [
|
||||
{
|
||||
header: 'Access-Control-Allow-Origin',
|
||||
operation: chrome.declarativeNetRequest.HeaderOperation.SET,
|
||||
value: '*',
|
||||
},
|
||||
{
|
||||
header: 'Access-Control-Allow-Methods',
|
||||
operation: chrome.declarativeNetRequest.HeaderOperation.SET,
|
||||
value: 'POST,GET,OPTIONS,PUT',
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
console.log('loaded extension');
|
||||
@@ -1,10 +0,0 @@
|
||||
<html>
|
||||
<head>
|
||||
<title>movie-web extension</title>
|
||||
<link rel="stylesheet" href="./popup/styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<script type="module" src="./popup/index.ts"></script>
|
||||
<h1>This is the popup</h1>
|
||||
</body>
|
||||
</html>
|
||||
32
src/popup.tsx
Normal file
32
src/popup.tsx
Normal file
@@ -0,0 +1,32 @@
|
||||
import { BottomLabel } from '~components/BottomLabel';
|
||||
import { DisabledScreen } from '~components/DisabledScreen';
|
||||
import { Frame } from '~components/Frame';
|
||||
import { PermissionMissingScreen } from '~components/PermissionMissingScreen';
|
||||
import { ToggleButton } from '~components/ToggleButton';
|
||||
import { useDomain } from '~hooks/useDomain';
|
||||
import { useToggleWhitelistDomain } from '~hooks/useDomainWhitelist';
|
||||
import './Popup.css';
|
||||
import { usePermission } from '~hooks/usePermission';
|
||||
|
||||
function IndexPopup() {
|
||||
const domain = useDomain();
|
||||
const { isWhitelisted, toggle } = useToggleWhitelistDomain(domain);
|
||||
const { grantPermission, hasPermission } = usePermission();
|
||||
|
||||
let page = 'toggle';
|
||||
if (!hasPermission) page = 'perm';
|
||||
else if (!domain) page = 'disabled';
|
||||
|
||||
return (
|
||||
<Frame>
|
||||
<div className="popup">
|
||||
{page === 'toggle' ? <ToggleButton active={isWhitelisted} onClick={toggle} domain={domain} /> : null}
|
||||
{page === 'disabled' ? <DisabledScreen /> : null}
|
||||
{page === 'perm' ? <PermissionMissingScreen onGrant={grantPermission} /> : null}
|
||||
<BottomLabel />
|
||||
</div>
|
||||
</Frame>
|
||||
);
|
||||
}
|
||||
|
||||
export default IndexPopup;
|
||||
@@ -1 +0,0 @@
|
||||
console.log('popup js');
|
||||
@@ -1,3 +0,0 @@
|
||||
.test {
|
||||
color: blue
|
||||
}
|
||||
103
src/tabs/PermissionGrant.css
Normal file
103
src/tabs/PermissionGrant.css
Normal file
@@ -0,0 +1,103 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@500;800&display=swap');
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
html {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100%;
|
||||
max-height: 100%;
|
||||
font-family: 'Inter', sans-serif;
|
||||
}
|
||||
|
||||
#__plasmo {
|
||||
height: 100%;
|
||||
background-color: #0a0a10;
|
||||
}
|
||||
|
||||
.container {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.inner-container {
|
||||
width: 400px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.permission-card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: #0f0f1b;
|
||||
border-radius: 10px;
|
||||
height: 125px;
|
||||
padding-right: 40px;
|
||||
padding-left: 40px;
|
||||
font-size: 14px;
|
||||
border: 1px solid #20202d;
|
||||
}
|
||||
|
||||
.footer {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.color-white {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.text-color {
|
||||
color: #73739d;
|
||||
}
|
||||
|
||||
.go-back-btn,
|
||||
.grant-permission-btn {
|
||||
color: #ffffff;
|
||||
padding: 10px 20px;
|
||||
border-radius: 10px;
|
||||
border: 1px solid #0000;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.go-back-btn {
|
||||
background:
|
||||
linear-gradient(to right, #151522, #181b2a) padding-box,
|
||||
linear-gradient(50deg, #151522, #181b2a, #456b95) border-box;
|
||||
}
|
||||
|
||||
.grant-permission-btn {
|
||||
background:
|
||||
linear-gradient(to right, #482179, #8a39e6) padding-box,
|
||||
linear-gradient(50deg, #482179, #4f3585, #b79ae0) border-box;
|
||||
}
|
||||
|
||||
.go-back-btn:hover {
|
||||
background:
|
||||
linear-gradient(to right, #2a334e, #2f3552) padding-box,
|
||||
linear-gradient(50deg, #2a334e, #2f3552, #6086b7) border-box;
|
||||
}
|
||||
|
||||
.grant-permission-btn:hover {
|
||||
background:
|
||||
linear-gradient(to right, #603a9a, #a25ff5) padding-box,
|
||||
linear-gradient(50deg, #603a9a, #653c9f, #d9aef1) border-box;
|
||||
}
|
||||
|
||||
.grant-permission-btn:disabled {
|
||||
background:
|
||||
linear-gradient(to right, #311e4b, #6b4b99) padding-box,
|
||||
linear-gradient(50deg, #311e4b, #3b265b, #704fa5) border-box;
|
||||
cursor: not-allowed;
|
||||
opacity: 0.5;
|
||||
}
|
||||
58
src/tabs/PermissionGrant.tsx
Normal file
58
src/tabs/PermissionGrant.tsx
Normal file
@@ -0,0 +1,58 @@
|
||||
import { useDomainWhitelist } from '~hooks/useDomainWhitelist';
|
||||
import { usePermission } from '~hooks/usePermission';
|
||||
import { makeUrlIntoDomain } from '~utils/domains';
|
||||
|
||||
import './PermissionGrant.css';
|
||||
|
||||
export default function PermissionGrant() {
|
||||
const { domainWhitelist } = useDomainWhitelist();
|
||||
const { hasPermission, grantPermission } = usePermission();
|
||||
|
||||
const queryParams = new URLSearchParams(window.location.search);
|
||||
const redirectUrl = queryParams.get('redirectUrl') ?? 'https://movie-web.app';
|
||||
const domain = makeUrlIntoDomain(redirectUrl);
|
||||
|
||||
const permissionsGranted = domainWhitelist.includes(domain) && hasPermission;
|
||||
|
||||
const redirectBack = () => {
|
||||
chrome.tabs.getCurrent((tab) => {
|
||||
chrome.tabs.update(tab.id, { url: redirectUrl });
|
||||
});
|
||||
};
|
||||
|
||||
const handleGrantPermission = () => {
|
||||
grantPermission(domain).then(() => {
|
||||
redirectBack();
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="container">
|
||||
<div className="inner-container">
|
||||
<h1 className="color-white">Permission</h1>
|
||||
<p className="text-color" style={{ fontSize: 13 }}>
|
||||
Websites need to ask for permission <br /> before they can use this extension
|
||||
</p>
|
||||
<div className="permission-card">
|
||||
<p className="text-color" style={{ textAlign: 'center' }}>
|
||||
The website <span className="color-white">{domain}</span> wants to <br /> use the extension on their page.
|
||||
</p>
|
||||
</div>
|
||||
<div className="footer">
|
||||
<button type="button" className="go-back-btn" onClick={redirectBack}>
|
||||
Go back
|
||||
</button>
|
||||
<div style={{ flex: 1 }} />
|
||||
<button
|
||||
type="button"
|
||||
className="grant-permission-btn"
|
||||
onClick={handleGrantPermission}
|
||||
disabled={permissionsGranted}
|
||||
>
|
||||
Grant Permission
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
1
src/types/request.ts
Normal file
1
src/types/request.ts
Normal file
@@ -0,0 +1 @@
|
||||
export interface BaseRequest {}
|
||||
8
src/types/response.ts
Normal file
8
src/types/response.ts
Normal file
@@ -0,0 +1,8 @@
|
||||
export type BaseResponse<T = object> =
|
||||
| ({
|
||||
success: true;
|
||||
} & T)
|
||||
| {
|
||||
success: false;
|
||||
error: string;
|
||||
};
|
||||
9
src/utils/domains.ts
Normal file
9
src/utils/domains.ts
Normal file
@@ -0,0 +1,9 @@
|
||||
export function makeUrlIntoDomain(url: string): string | null {
|
||||
try {
|
||||
const u = new URL(url);
|
||||
if (!['http:', 'https:'].includes(u.protocol)) return null;
|
||||
return u.host.toLowerCase();
|
||||
} catch {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
3
src/utils/extension.ts
Normal file
3
src/utils/extension.ts
Normal file
@@ -0,0 +1,3 @@
|
||||
export const isChrome = () => {
|
||||
return chrome.runtime.getURL('').startsWith('chrome-extension://');
|
||||
};
|
||||
24
src/utils/fetcher.ts
Normal file
24
src/utils/fetcher.ts
Normal file
@@ -0,0 +1,24 @@
|
||||
import { type Request as MakeRequest } from '~background/messages/makeRequest';
|
||||
|
||||
export function makeFullUrl(url: string, ops?: MakeRequest): string {
|
||||
// glue baseUrl and rest of url together
|
||||
let leftSide = ops?.baseUrl ?? '';
|
||||
let rightSide = url;
|
||||
|
||||
// left side should always end with slash, if its set
|
||||
if (leftSide.length > 0 && !leftSide.endsWith('/')) leftSide += '/';
|
||||
|
||||
// right side should never start with slash
|
||||
if (rightSide.startsWith('/')) rightSide = rightSide.slice(1);
|
||||
|
||||
const fullUrl = leftSide + rightSide;
|
||||
if (!fullUrl.startsWith('http://') && !fullUrl.startsWith('https://'))
|
||||
throw new Error(`Invald URL -- URL doesn't start with a http scheme: '${fullUrl}'`);
|
||||
|
||||
const parsedUrl = new URL(fullUrl);
|
||||
Object.entries(ops?.query ?? {}).forEach(([k, v]) => {
|
||||
parsedUrl.searchParams.set(k, v);
|
||||
});
|
||||
|
||||
return parsedUrl.toString();
|
||||
}
|
||||
35
src/utils/storage.ts
Normal file
35
src/utils/storage.ts
Normal file
@@ -0,0 +1,35 @@
|
||||
import { Storage } from '@plasmohq/storage';
|
||||
import { useStorage } from '@plasmohq/storage/hook';
|
||||
|
||||
import { makeUrlIntoDomain } from '~utils/domains';
|
||||
|
||||
export const DEFAULT_DOMAIN_WHITELIST = ['movie-web.app', 'dev.movie-web.app'];
|
||||
|
||||
export const storage = new Storage();
|
||||
|
||||
const getDomainWhiteList = async () => {
|
||||
const whitelist = await storage.get<string[]>('domainWhitelist');
|
||||
if (!whitelist) await storage.set('domainWhitelist', DEFAULT_DOMAIN_WHITELIST);
|
||||
return whitelist ?? DEFAULT_DOMAIN_WHITELIST;
|
||||
};
|
||||
|
||||
const domainIsInWhitelist = async (domain: string) => {
|
||||
const whitelist = await getDomainWhiteList();
|
||||
return whitelist?.some((d) => d.includes(domain)) ?? false;
|
||||
};
|
||||
|
||||
export function useDomainStorage() {
|
||||
return useStorage<string[]>('domainWhitelist', (v) => v ?? DEFAULT_DOMAIN_WHITELIST);
|
||||
}
|
||||
|
||||
export const isDomainWhitelisted = async (url: string | undefined) => {
|
||||
if (!url) return false;
|
||||
const domain = makeUrlIntoDomain(url);
|
||||
if (!domain) return false;
|
||||
return domainIsInWhitelist(domain);
|
||||
};
|
||||
|
||||
export const assertDomainWhitelist = async (url: string) => {
|
||||
const isWhiteListed = await isDomainWhitelisted(url);
|
||||
if (!isWhiteListed) throw new Error('Domain is not whitelisted');
|
||||
};
|
||||
32
src/utils/tabs.ts
Normal file
32
src/utils/tabs.ts
Normal file
@@ -0,0 +1,32 @@
|
||||
import { isChrome } from './extension';
|
||||
|
||||
export function queryCurrentDomain(cb: (domain: string | null) => void) {
|
||||
const handle = (tabUrl: string | null) => {
|
||||
if (!tabUrl) cb(null);
|
||||
else cb(tabUrl);
|
||||
};
|
||||
const ops = { active: true, currentWindow: true } as const;
|
||||
|
||||
if (isChrome()) chrome.tabs.query(ops).then((tabs) => handle(tabs[0]?.url));
|
||||
else browser.tabs.query(ops).then((tabs) => handle(tabs[0]?.url));
|
||||
}
|
||||
|
||||
export function listenToTabChanges(cb: () => void) {
|
||||
if (isChrome()) {
|
||||
chrome.tabs.onActivated.addListener(cb);
|
||||
chrome.tabs.onUpdated.addListener(cb);
|
||||
} else if (browser) {
|
||||
browser.tabs.onActivated.addListener(cb);
|
||||
browser.tabs.onUpdated.addListener(cb);
|
||||
}
|
||||
}
|
||||
|
||||
export function stopListenToTabChanges(cb: () => void) {
|
||||
if (isChrome()) {
|
||||
chrome.tabs.onActivated.removeListener(cb);
|
||||
chrome.tabs.onUpdated.removeListener(cb);
|
||||
} else if (browser) {
|
||||
browser.tabs.onActivated.removeListener(cb);
|
||||
browser.tabs.onUpdated.removeListener(cb);
|
||||
}
|
||||
}
|
||||
@@ -1,23 +1,19 @@
|
||||
{
|
||||
"extends": "plasmo/templates/tsconfig.base",
|
||||
"exclude": [
|
||||
"node_modules"
|
||||
],
|
||||
"include": [
|
||||
".plasmo/index.d.ts",
|
||||
"./**/*.ts",
|
||||
"./**/*.tsx"
|
||||
],
|
||||
"compilerOptions": {
|
||||
"target": "es2021",
|
||||
"lib": ["es2021", "DOM"],
|
||||
"module": "CommonJS",
|
||||
"esModuleInterop": true,
|
||||
"declaration": true,
|
||||
"outDir": "./lib",
|
||||
"strict": true,
|
||||
"baseUrl": "src",
|
||||
"experimentalDecorators": true,
|
||||
"isolatedModules": false,
|
||||
"skipLibCheck": true,
|
||||
"paths": {
|
||||
"@/*": ["./*"]
|
||||
}
|
||||
},
|
||||
"include": ["src"],
|
||||
"exclude": ["node_modules", "**/__tests__/*"],
|
||||
"ts-node": {
|
||||
"require": ["tsconfig-paths/register"]
|
||||
"~*": [
|
||||
"./src/*"
|
||||
]
|
||||
},
|
||||
"baseUrl": "."
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,49 +0,0 @@
|
||||
import { resolve, dirname } from 'path'
|
||||
import { defineConfig } from 'vite'
|
||||
import { manifestMerge } from './plugins/manifest';
|
||||
import { viteStaticCopy } from 'vite-plugin-static-copy'
|
||||
|
||||
const staticAssets = [
|
||||
'src/assets/icons/16.png',
|
||||
]
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [
|
||||
manifestMerge({
|
||||
output: "manifest.json",
|
||||
files: [
|
||||
resolve(__dirname, 'src/assets/manifest.common.json'),
|
||||
resolve(__dirname, 'src/assets/manifest.chrome.json')
|
||||
]
|
||||
}),
|
||||
viteStaticCopy({
|
||||
targets: staticAssets.map(file => ({
|
||||
src: resolve(__dirname, file),
|
||||
dest: dirname(resolve(__dirname, file.replace(/^src/, 'dist'))),
|
||||
}))
|
||||
})
|
||||
],
|
||||
root: "src",
|
||||
build: {
|
||||
emptyOutDir: true,
|
||||
minify: false,
|
||||
rollupOptions: {
|
||||
output: [{
|
||||
dir: "dist",
|
||||
format: "es",
|
||||
exports: "named",
|
||||
}],
|
||||
input: {
|
||||
popup: resolve(__dirname, 'src/popup.html'),
|
||||
worker: resolve(__dirname, 'src/index.ts'),
|
||||
},
|
||||
},
|
||||
outDir: 'dist',
|
||||
lib: {
|
||||
entry: resolve(__dirname, 'src/index.ts'), // needed for it to work at all
|
||||
fileName(format, entryName) {
|
||||
return entryName + ".js";
|
||||
},
|
||||
},
|
||||
},
|
||||
})
|
||||
Reference in New Issue
Block a user