javascript-无法获取后台服务工作线程侦听器工作-参数“extraInfoSpec”处出错:值必须是extraHeaders、responseHeaders之一
发布时间:2022-05-04 00:34:20 241
相关标签: # 前端
我用这个作为样板模板-https://github.com/lxieyang/chrome-extension-boilerplate-react
manifest.json
{
"manifest_version": 3,
"name": "Template",
"description": "A chrome extension boilerplate built with React 17, Webpack 5, and Webpack Dev Server 4",
"options_page": "options.html",
"permissions": [
"'https://*.reddit.com/*'",
"webRequest",
"webRequestBlocking"
],
"background": {
"service_worker": "background.bundle.js"
},
"action": {
"default_popup": "popup.html",
"default_icon": "icon-34.png"
},
"chrome_url_overrides": {
"newtab": "newtab.html"
},
"icons": {
"128": "icon-128.png"
},
"content_scripts": [
{
"matches": ["http://*/*", "https://*/*", ""],
"js": ["contentScript.bundle.js"],
"css": ["content.styles.css"]
}
],
"devtools_page": "devtools.html",
"web_accessible_resources": [
{
"resources": ["content.styles.css", "icon-128.png", "icon-34.png"],
"matches": []
}
]
}
我的后台目录中的index.js
chrome.webRequest.onCompleted.addListener(
function (details) {
// Process the XHR response.
console.log(details, 'logging details');
},
{ urls: ['https://*.reddit.com/*'] },
['responseHeaders', 'requestHeaders', 'requestBody', 'blocking']
);
webpack.config.js
var webpack = require('webpack'),
path = require('path'),
fileSystem = require('fs-extra'),
env = require('./utils/env'),
CopyWebpackPlugin = require('copy-webpack-plugin'),
HtmlWebpackPlugin = require('html-webpack-plugin'),
TerserPlugin = require('terser-webpack-plugin');
var { CleanWebpackPlugin } = require('clean-webpack-plugin');
const ASSET_PATH = process.env.ASSET_PATH || '/';
var alias = {
'react-dom': '@hot-loader/react-dom',
};
// load the secrets
var secretsPath = path.join(__dirname, 'secrets.' + env.NODE_ENV + '.js');
var fileExtensions = [
'jpg',
'jpeg',
'png',
'gif',
'eot',
'otf',
'svg',
'ttf',
'woff',
'woff2',
];
if (fileSystem.existsSync(secretsPath)) {
alias['secrets'] = secretsPath;
}
var options = {
mode: process.env.NODE_ENV || 'development',
entry: {
newtab: path.join(__dirname, 'src', 'pages', 'Newtab', 'index.jsx'),
options: path.join(__dirname, 'src', 'pages', 'Options', 'index.jsx'),
popup: path.join(__dirname, 'src', 'pages', 'Popup', 'index.jsx'),
background: path.join(__dirname, 'src', 'pages', 'Background', 'index.js'),
contentScript: path.join(__dirname, 'src', 'pages', 'Content', 'index.js'),
devtools: path.join(__dirname, 'src', 'pages', 'Devtools', 'index.js'),
panel: path.join(__dirname, 'src', 'pages', 'Panel', 'index.jsx'),
},
chromeExtensionBoilerplate: {
notHotReload: ['background', 'contentScript', 'devtools'],
},
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'build'),
clean: true,
publicPath: ASSET_PATH,
},
module: {
rules: [
{
// look for .css or .scss files
test: /\.(css|scss)$/,
// in the `src` directory
use: [
{
loader: 'style-loader',
},
{
loader: 'css-loader',
},
{
loader: 'sass-loader',
options: {
sourceMap: true,
},
},
],
},
{
test: new RegExp('.(' + fileExtensions.join('|') + ')$'),
type: 'asset/resource',
exclude: /node_modules/,
// loader: 'file-loader',
// options: {
// name: '[name].[ext]',
// },
},
{
test: /\.html$/,
loader: 'html-loader',
exclude: /node_modules/,
},
{ test: /\.(ts|tsx)$/, loader: 'ts-loader', exclude: /node_modules/ },
{
test: /\.(js|jsx)$/,
use: [
{
loader: 'source-map-loader',
},
{
loader: 'babel-loader',
},
],
exclude: /node_modules/,
},
],
},
resolve: {
alias: alias,
extensions: fileExtensions
.map((extension) => '.' + extension)
.concat(['.js', '.jsx', '.ts', '.tsx', '.css']),
},
plugins: [
new CleanWebpackPlugin({ verbose: false }),
new webpack.ProgressPlugin(),
// expose and write the allowed env vars on the compiled bundle
new webpack.EnvironmentPlugin(['NODE_ENV']),
new CopyWebpackPlugin({
patterns: [
{
from: 'src/manifest.json',
to: path.join(__dirname, 'build'),
force: true,
transform: function (content, path) {
// generates the manifest file using the package.json informations
return Buffer.from(
JSON.stringify({
description: process.env.npm_package_description,
version: process.env.npm_package_version,
...JSON.parse(content.toString()),
})
);
},
},
],
}),
new CopyWebpackPlugin({
patterns: [
{
from: 'src/pages/Content/content.styles.css',
to: path.join(__dirname, 'build'),
force: true,
},
],
}),
new CopyWebpackPlugin({
patterns: [
{
from: 'src/assets/img/icon-128.png',
to: path.join(__dirname, 'build'),
force: true,
},
],
}),
new CopyWebpackPlugin({
patterns: [
{
from: 'src/assets/img/icon-34.png',
to: path.join(__dirname, 'build'),
force: true,
},
],
}),
new HtmlWebpackPlugin({
template: path.join(__dirname, 'src', 'pages', 'Newtab', 'index.html'),
filename: 'newtab.html',
chunks: ['newtab'],
cache: false,
}),
new HtmlWebpackPlugin({
template: path.join(__dirname, 'src', 'pages', 'Options', 'index.html'),
filename: 'options.html',
chunks: ['options'],
cache: false,
}),
new HtmlWebpackPlugin({
template: path.join(__dirname, 'src', 'pages', 'Popup', 'index.html'),
filename: 'popup.html',
chunks: ['popup'],
cache: false,
}),
new HtmlWebpackPlugin({
template: path.join(__dirname, 'src', 'pages', 'Devtools', 'index.html'),
filename: 'devtools.html',
chunks: ['devtools'],
cache: false,
}),
new HtmlWebpackPlugin({
template: path.join(__dirname, 'src', 'pages', 'Panel', 'index.html'),
filename: 'panel.html',
chunks: ['panel'],
cache: false,
}),
],
infrastructureLogging: {
level: 'info',
},
};
if (env.NODE_ENV === 'development') {
options.devtool = 'cheap-module-source-map';
} else {
options.optimization = {
minimize: true,
minimizer: [
new TerserPlugin({
extractComments: false,
}),
],
};
}
module.exports = options;
当我打开一个新选项卡时,它似乎会触发后台服务工作者文件,但该函数没有被调用,当我转到reddit时也没有被触发。
谢谢
特别声明:以上内容(图片及文字)均为互联网收集或者用户上传发布,本站仅提供信息存储服务!如有侵权或有涉及法律问题请联系我们。
举报