@@ -31,12 +31,11 @@ function InputJSONField({
cols={20}
value={value}
onChange={(event) => {
- console.log(event.target.value);
setStatus("editing");
- onChange(event);
+ setValue(event.target.value);
}}
onBlur={(event) => {
- onBlur(event);
+ setObject(JSON.parse(value));
setStatus("saved");
setTimeout(() => {
setStatus("no");
@@ -47,23 +46,14 @@ function InputJSONField({
);
}
-function Options() {
- const [config, setConfig] = useState
("");
- const [userHistory, setUserHistory] = useState("");
-
- useEffect(() => {
- (async () => {
- const { config: storageConfig, userHistory: storageUserHistory } =
- await storage.get(["config", "userHistory"]);
-
- console.log({
- storageUserHistory,
- });
+export default function IndexOptions() {
+ const [initialConfigValue, setConfig] = useStorage("config");
+ const [initialUserHistoryValue, setUserHistory] =
+ useStorage("userHistory");
- setConfig(JSON.stringify(storageConfig, null, 2));
- setUserHistory(JSON.stringify(storageUserHistory, null, 2));
- })();
- }, []);
+ if (initialConfigValue == null || initialUserHistoryValue == null) {
+ return Loading...
;
+ }
return (
<>
@@ -71,31 +61,18 @@ function Options() {
) => {
- setConfig(event.target.value);
- }}
- onBlur={(event: React.FocusEvent) => {
- storage.set({ config: JSON.parse(config) });
+ initialValue={initialConfigValue}
+ setValue={(value: Object) => {
+ setConfig(value as Config);
}}
/>
) => {
- setUserHistory(event.target.value);
- }}
- onBlur={(event: React.FocusEvent) => {
- storage.set({ userHistory: JSON.parse(userHistory) });
+ initialValue={initialUserHistoryValue}
+ setValue={(value: Object) => {
+ setUserHistory(value as UserHistory);
}}
/>
);
}
-
-const root = document.getElementById("root");
-ReactDOM.createRoot(root!).render(
-
-
-
-);
diff --git a/src/popup/index.tsx b/src/popup/index.tsx
index 3436676..4637e38 100644
--- a/src/popup/index.tsx
+++ b/src/popup/index.tsx
@@ -1,7 +1,6 @@
-import { StrictMode } from "react";
-import ReactDOM from "react-dom/client";
+import * as React from "react";
-function Popup() {
+export default function IndexPopup() {
return (
{
- const extensionID = process.env.EXTENSION_ID;
- const url = `extension://${extensionID}/assets/options.html`;
+ const extensionID = process.env.PLASMO_PUBLIC_EXTENSION_ID;
+ const url = `extension://${extensionID}/options.html`;
chrome.tabs.create({ url });
}}
>
@@ -44,10 +43,3 @@ function Popup() {
);
}
-
-const root = document.querySelector("#main");
-ReactDOM.createRoot(root!).render(
-
-
-
-);
diff --git a/tsconfig.json b/tsconfig.json
index e245ae2..52218df 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,20 +1,22 @@
{
- "compilerOptions": {
- "strict": true,
- "module": "ES2015",
- "moduleResolution": "Node",
- "target": "ES2018",
- "esModuleInterop": true,
- "sourceMap": true,
- "rootDir": "src",
- "outDir": "build/js",
- "noEmitOnError": true,
- "typeRoots": [
- "node_modules/@types"
- ],
- "jsx": "react-jsx"
+ "extends": "plasmo/templates/tsconfig.base",
+ "exclude": [
+ "node_modules"
+ ],
+ "include": [
+ ".plasmo/index.d.ts",
+ "jest.config.ts",
+ "./**/*.ts",
+ "./**/*.tsx"
+ ],
+ "compilerOptions": {
+ "jsx": "react-jsx",
+ "paths": {
+ "~*": [
+ "./src/*"
+ ]
},
- "include": [
- "src"
- ]
+ "baseUrl": ".",
+ "verbatimModuleSyntax": false
+ }
}
diff --git a/webpack.config.js b/webpack.config.js
deleted file mode 100644
index d7196ab..0000000
--- a/webpack.config.js
+++ /dev/null
@@ -1,51 +0,0 @@
-const path = require('path')
-const webpack = require('webpack')
-const CopyWebpackPlugin = require('copy-webpack-plugin')
-const dotenv = require('dotenv')
-
-dotenv.config();
-
-module.exports = {
- devtool: "inline-source-map",
-
- entry: {
- "js/background/index": "./src/background/index",
- "js/content_scripts/youtube": "./src/content_scripts/youtube",
- "js/content_scripts/crunchyroll": "./src/content_scripts/crunchyroll",
- "js/options/index": "./src/options/index",
- "js/popup/index": "./src/popup/index",
- },
- output: {
- filename: "[name].js",
- },
- resolve: {
- extensions: [".ts", ".tsx"]
- },
- module: {
- rules: [
- {
- test: /\.tsx?$/,
- use: 'ts-loader',
- exclude: /node_modules/
- }
- ]
- },
- plugins: [
- new CopyWebpackPlugin({
- patterns: [
- { from: "./manifest.json" },
- {
- from: "./assets",
- to: "assets"
- }
- ],
- }),
- // Using dotenv-webpack caused an error for Unreferenced variable process
- // https://stackoverflow.com/a/60015581
- new webpack.DefinePlugin({
- 'process.env': JSON.stringify(process.env)
- })
- // webpack-ext-loader doesn't work because of the same error as next issue
- // https://github.com/SimplifyJobs/webpack-ext-reloader/issues/28#issuecomment-1812405678
- ]
-}