Unable to get background service worker listener working - Error at parameter 'extraInfoSpec': Value must be one of extraHeaders, responseHeaders

Question

I am working on a chrome extension and my goal is to listen to a network request and then do functionality in my extension once the network request as completed. I am unable to get the background listener to work properly.

I am using this as my boilerplate template - 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://*/*", "<all_urls>"],
      "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 in my background directory

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;

When I open a new tab, it seems to trigger the background service worker file but the function isn't being called upon and it's not being triggered when I go to reddit.

Thanks

Answer 1

You want your extension to hook in after the page has loaded. You react to the onComplete event of the chrome.webRequest API. It is fired/emitted at the end of the request life cycle.

So lets look at what you have and compare it to the docs:

chrome.webRequest.onCompleted.addListener(...) // API call with 3 parameters

function (details) { // 1st parameter: a callback with a details object
  // P?r?o?c?e?s?s? ?t?h?e? ?X?H?R? ?r?e?s?p?o?n?s?e?. -> Misleading, response body isn't available!
  console.log(details, 'logging details'); // {frameId, fromCache, method, ...
},

It seems you got inspired by this answer, but it got it wrong: The webRequest API does not provide the actual response data (anymore?). You can use the metadata to track the loading progress. Usually several js, css, img, etc. dependencies are loaded. If what you need is there, interact directly with the page via the document API.

  { urls: ['https://*.reddit.com/*'] }, // 2nd parameter: RequestFilter object

Limit the scope of the event handler. Seems fine. Note you can add a types property to exclude stylesheets, images and more from triggering the callback by including the only the other types.

['responseHeaders', 'requestHeaders', 'requestBody', 'blocking'] // 3rd parameter: optional (shown by ?) extraInfoSpec

This optional parameter causes more info to be contained in the details argument of the callback. Array values are limited to "responseHeaders" or "extraHeaders". This is not the case and causes the error.

• "blocking" is only allowed in onAuthRequired, onBeforeRequest, onBeforeSendHeaders, onHeadersReceived.
• "requestBody" is only allowed in onBeforeRequest, so you can change what to send to the server. It's not allowed in onCompleted. You cannot change the server response via the webRequest API.

So how could it work then? A basic outline:

var reqCount = {}
chrome.webRequest.onCompleted.addListener(
  function (details) {
    reqCount[details.tabId] = (reqCount[details.tabId] || 0)++
    var siteHasLoaded = reqCount[details.tabId] > 5 // must be more sophisticated
    if(siteHasLoaded){
      alert('Reddit has loaded! (At least 5 pictures...)');
    }
  },
  { urls: ['https://*.reddit.com/*'], types:['main_frame', 'image'] }
);

For some ideas how to handle different tabs look over here. MDN has also good documentation on the webRequest API.