Início / user-2303073

Samuel's questions

Martin Hope
Samuel
Asked: 2025-04-20 04:07:35 +0800 CST
  • 4

Eu esperava o seguinte

  • Para handleLogs()armazenar { site: 'https://google.com' }no estado dos sites e armazenar no armazenamento local do Chrome
  • Para useEffecto gancho pegar o array de sites e salvar no estado do site sempre que o pop-up for aberto

O problema atual é que sempre que abro o pop-up, o site[] está sempre vazio. Consigo ver, através das ferramentas de desenvolvimento, que o site é adicionado ao estado e ao armazenamento no armazenamento local na interação inicial com a entrada. Mas, em aberturas subsequentes, sem interação com a entrada, aparece um array de sites vazio no estado e no armazenamento local. Por quê?

Abaixo está uma versão simplificada real do código que tenho em app.jsxarquivo

const App = () => {
    const [sites, setSites] = useState([]);

    useEffect(() => {
        chrome.storage.local.get(['sites'], (res) => {
            setSites(res.sites);
            console.log(res);
        });
    }, []);

    function handleLogs(event) {
        setSites((prevSites) => [...prevSites, { site: 'https://google.com' }]);
        chrome.storage.local.set({ sites });
    }

    return <input type="checkbox" onClick={() => handleLogs(event)} />;
};
javascript
Martin Hope
Samuel
Asked: 2025-04-19 23:16:02 +0800 CST
  • 6

Quero inserir a tag de script abaixo no meu popup.htmle options.htmlquando compilado na pasta dist:

<script src="http://localhost:8097"></script>

Preciso que este seja o primeiro script antes de qualquer outro. Veja como espero que o script fique no meu HTML:

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
 <script src="http://localhost:8097"></script>
 <script src="example.js"></script>
 <script src="react.js"></script>
</head>
<body>
  
</body>
</html>

Como posso injetar esse script apenas para desenvolvimento local ao trabalhar com o Webpack?

Aqui está minha configuração até agora:

webpack.dev.js:

const { merge } = require('webpack-merge');
const common = require('./webpack.common.js');

module.exports = merge(common, {
    mode: 'development',
    devtool: 'cheap-module-source-map'
});

webpack.common.js:

const path = require('path');
const CopyPlugin = require('copy-webpack-plugin');
const HtmlPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
    entry: {
        popup: path.resolve('src/popup/popup.tsx'),
        options: path.resolve('src/options/options.tsx'),
        background: path.resolve('src/background/background.ts'),
        contentScript: path.resolve('src/contentScript/contentScript.js')
    },
    module: {
        rules: [
            {
                use: 'ts-loader',
                test: /\.tsx?$/,
                exclude: /node_modules/
            },
            {
                use: ['style-loader', 'css-loader'],
                test: /\.css$/i
            },
            {
                type: 'asset/resource',
                test: /\.(jpg|jpeg|png|woff|woff2|eot|ttf|svg)$/
            }
        ]
    },
    plugins: [
        new CleanWebpackPlugin({
            cleanStaleWebpackAssets: false
        }),
        new CopyPlugin({
            patterns: [
                {
                    from: path.resolve('src/static'),
                    to: path.resolve('dist/')
                }
            ]
        }),
        ...getHtmlPlugin(['popup', 'options'])
    ],
    resolve: {
        extensions: ['.tsx', '.ts', '.js']
    },
    output: {
        filename: '[name].js',
        path: path.resolve('dist')
    },
    optimization: {
        splitChunks: {
            chunks: 'all'
        }
    }
};

function getHtmlPlugin(chunks) {
    return chunks.map(
        (chunk) =>
            new HtmlPlugin({
                title: 'Test',
                filename: `${chunk}.html`,
                chunks: [chunk]
            })
    );
}

Pacote.json

{
 ...
 "devDependencies": {
  "webpack": "^5.94.0",
  "webpack-cli": "^5.1.4",
  "webpack-merge": "^6.0.1"
  }
 ...
}
javascript