<p dir="auto">I am trying to call <code class="notranslate">setState({ flash: false })</code> followed by <code class="notranslate">setState({ flash: 'up' })</code> which should remove the flash class from the DOM element and add it again, therefore triggering the css animation defined on that class (it only works the first time).</p>
<p dir="auto">This is not working as expected, unless I introduce some timeouts. The first time the class is added, the animation is triggered. But subsequent calls to <code class="notranslate">componentWillReceiveProps</code> fail to trigger the animation. I'm not sure if this is an issue with the way React updates the DOM or an inherent limitation of CSS animations. I know React has some specialised utilities for animations but I'd rather keep the code below if there's any way to fix it.</p>
<p dir="auto">Stat.js</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import React, { Component } from 'react'
import { Link } from 'react-router'
import styles from './Stat.scss'

export default class Stat extends Component {
  constructor(props) {
    super(props)
    this.state = {
      flash: false,
    }
  }
  componentWillReceiveProps(nextProps) {
    if (nextProps.count !== this.props.count) {
      const flash = nextProps.count &gt; this.props.count
        ? 'Up'
        : 'Down'
      this.setState({ flash: false }, () =&gt; {
        this.setState({ flash })
      })
    }
  }
  render() {
    const { count, name, href } = this.props
    const { flash } = this.state
    const flashClass = flash ? styles[`flash${flash}`] : ''
    return (
      &lt;Link to={href} className=&quot;stat-link&quot;&gt;
        &lt;div className={`stat-number ${flashClass}`}&gt;
          {count}
        &lt;/div&gt;
        &lt;div className=&quot;stat-label&quot;&gt;{name}&lt;/div&gt;
      &lt;/Link&gt;
    )
  }
}
"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-v">React</span><span class="pl-kos">,</span> <span class="pl-kos">{</span> <span class="pl-v">Component</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'react'</span>
<span class="pl-k">import</span> <span class="pl-kos">{</span> <span class="pl-v">Link</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'react-router'</span>
<span class="pl-k">import</span> <span class="pl-s1">styles</span> <span class="pl-k">from</span> <span class="pl-s">'./Stat.scss'</span>

<span class="pl-k">export</span> <span class="pl-k">default</span> <span class="pl-k">class</span> <span class="pl-v">Stat</span> <span class="pl-k">extends</span> <span class="pl-v">Component</span> <span class="pl-kos">{</span>
  <span class="pl-en">constructor</span><span class="pl-kos">(</span><span class="pl-s1">props</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-smi">super</span><span class="pl-kos">(</span><span class="pl-s1">props</span><span class="pl-kos">)</span>
    <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">state</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span>
      <span class="pl-c1">flash</span>: <span class="pl-c1">false</span><span class="pl-kos">,</span>
    <span class="pl-kos">}</span>
  <span class="pl-kos">}</span>
  <span class="pl-en">componentWillReceiveProps</span><span class="pl-kos">(</span><span class="pl-s1">nextProps</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-s1">nextProps</span><span class="pl-kos">.</span><span class="pl-c1">count</span> <span class="pl-c1">!==</span> <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">props</span><span class="pl-kos">.</span><span class="pl-c1">count</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
      <span class="pl-k">const</span> <span class="pl-s1">flash</span> <span class="pl-c1">=</span> <span class="pl-s1">nextProps</span><span class="pl-kos">.</span><span class="pl-c1">count</span> <span class="pl-c1">&gt;</span> <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">props</span><span class="pl-kos">.</span><span class="pl-c1">count</span>
        ? <span class="pl-s">'Up'</span>
        : <span class="pl-s">'Down'</span>
      <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-en">setState</span><span class="pl-kos">(</span><span class="pl-kos">{</span> <span class="pl-c1">flash</span>: <span class="pl-c1">false</span> <span class="pl-kos">}</span><span class="pl-kos">,</span> <span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
        <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-en">setState</span><span class="pl-kos">(</span><span class="pl-kos">{</span> flash <span class="pl-kos">}</span><span class="pl-kos">)</span>
      <span class="pl-kos">}</span><span class="pl-kos">)</span>
    <span class="pl-kos">}</span>
  <span class="pl-kos">}</span>
  <span class="pl-en">render</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-k">const</span> <span class="pl-kos">{</span> count<span class="pl-kos">,</span> name<span class="pl-kos">,</span> href <span class="pl-kos">}</span> <span class="pl-c1">=</span> <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">props</span>
    <span class="pl-k">const</span> <span class="pl-kos">{</span> flash <span class="pl-kos">}</span> <span class="pl-c1">=</span> <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">state</span>
    <span class="pl-k">const</span> <span class="pl-s1">flashClass</span> <span class="pl-c1">=</span> <span class="pl-s1">flash</span> ? <span class="pl-s1">styles</span><span class="pl-kos">[</span><span class="pl-s">`flash<span class="pl-s1"><span class="pl-kos">${</span><span class="pl-s1">flash</span><span class="pl-kos">}</span></span>`</span><span class="pl-kos">]</span> : <span class="pl-s">''</span>
    <span class="pl-k">return</span> <span class="pl-kos">(</span>
      <span class="pl-c1">&lt;</span><span class="pl-ent">Link</span> <span class="pl-c1">to</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-s1">href</span><span class="pl-kos">}</span> <span class="pl-c1">className</span><span class="pl-c1">=</span><span class="pl-s">"stat-link"</span><span class="pl-c1">&gt;</span>
        <span class="pl-c1">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">className</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-s">`stat-number <span class="pl-s1"><span class="pl-kos">${</span><span class="pl-s1">flashClass</span><span class="pl-kos">}</span></span>`</span><span class="pl-kos">}</span><span class="pl-c1">&gt;</span>
          <span class="pl-kos">{</span><span class="pl-s1">count</span><span class="pl-kos">}</span>
        <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span>
        <span class="pl-c1">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">className</span><span class="pl-c1">=</span><span class="pl-s">"stat-label"</span><span class="pl-c1">&gt;</span><span class="pl-kos">{</span><span class="pl-s1">name</span><span class="pl-kos">}</span><span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span>
      <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">Link</span><span class="pl-c1">&gt;</span>
    <span class="pl-kos">)</span>
  <span class="pl-kos">}</span>
<span class="pl-kos">}</span></pre></div>
<p dir="auto">Stat.scss</p>
<div class="highlight highlight-source-css-scss notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="$highlight-up-color: green;
$highlight-down-color: red;

@keyframes highlight-up {
  0% {
    color: $highlight-up-color;
  }
  100% {
    color: default;
  }
}

@keyframes highlight-down {
  0% {
    color: $highlight-down-color;
  }
  100% {
    color: default;
  }
}

.flashUp {
  animation: highlight-up 2s;
}
.flashDown {
  animation: highlight-down 2s;
}
"><pre class="notranslate"><span class="pl-v">$highlight-up-color</span>: <span class="pl-c1">green</span>;
<span class="pl-v">$highlight-down-color</span>: <span class="pl-c1">red</span>;

<span class="pl-k">@keyframes</span> <span class="pl-en">highlight-up</span> {
  <span class="pl-e">0%</span> {
    <span class="pl-c1"><span class="pl-c1">color</span></span>: <span class="pl-v">$highlight-up-color</span>;
  }
  <span class="pl-e">100%</span> {
    <span class="pl-c1"><span class="pl-c1">color</span></span>: <span class="pl-c1">default</span>;
  }
}

<span class="pl-k">@keyframes</span> <span class="pl-en">highlight-down</span> {
  <span class="pl-e">0%</span> {
    <span class="pl-c1"><span class="pl-c1">color</span></span>: <span class="pl-v">$highlight-down-color</span>;
  }
  <span class="pl-e">100%</span> {
    <span class="pl-c1"><span class="pl-c1">color</span></span>: <span class="pl-c1">default</span>;
  }
}

<span class="pl-e">.flashUp</span> {
  <span class="pl-c1"><span class="pl-c1">animation</span></span>: highlight<span class="pl-c1">-</span>up <span class="pl-c1">2<span class="pl-k">s</span></span>;
}
<span class="pl-e">.flashDown</span> {
  <span class="pl-c1"><span class="pl-c1">animation</span></span>: highlight<span class="pl-c1">-</span>down <span class="pl-c1">2<span class="pl-k">s</span></span>;
}
</pre></div>
<h3 dir="auto">Website or app</h3>
<p dir="auto"><a href="https://codesandbox.io/s/blissful-raman-2on7k2" rel="nofollow">https://codesandbox.io/s/blissful-raman-2on7k2</a></p>
<h3 dir="auto">Repro steps</h3>
<ol dir="auto">
<li>Create a react app</li>
</ol>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="yarn create react-app test-react
cd test-react
yarn start"><pre class="notranslate"><code class="notranslate">yarn create react-app test-react
cd test-react
yarn start
</code></pre></div>
<ol start="2" dir="auto">
<li>Create <code class="notranslate">.env.development</code> file in root.</li>
</ol>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="HTTPS=true
PORT=4100
BROWSER=none"><pre class="notranslate"><code class="notranslate">HTTPS=true
PORT=4100
BROWSER=none
</code></pre></div>
<ol start="3" dir="auto">
<li>Visit <a href="https://localhost:4100/" rel="nofollow">https://localhost:4100/</a> in Chrome v100.0.4896.127</li>
<li>Open React Devtools by inspecting page, some times it shows <code class="notranslate">Components</code> tab but in large application it does not show the <code class="notranslate">Components</code> tab. If it shows the tab the error message is sent to dev tools every second.</li>
<li>See error message in chrome://extensions/</li>
<li>This is not reproducible in Firefox v99.0.1.</li>
</ol>
<h3 dir="auto">How often does this bug happen?</h3>
<p dir="auto">Every time</p>
<h3 dir="auto">DevTools package (automated)</h3>
<p dir="auto"><em>No response</em></p>
<h3 dir="auto">DevTools version (automated)</h3>
<p dir="auto"><code class="notranslate">4.24.3 (3/30/2022)</code></p>
<h3 dir="auto">Error message (automated)</h3>
<p dir="auto"><code class="notranslate">Error in event handler: Error: Attempting to use a disconnected port object</code></p>
<h3 dir="auto">Error call stack (automated)</h3>
<p dir="auto"><code class="notranslate">build/background.js:139 (lOne)</code></p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="/******/ (function(modules) { // webpackBootstrap
/******/ 	// The module cache
/******/ 	var installedModules = {};
/******/
/******/ 	// The require function
/******/ 	function __webpack_require__(moduleId) {
/******/
/******/ 		// Check if module is in cache
/******/ 		if(installedModules[moduleId]) {
/******/ 			return installedModules[moduleId].exports;
/******/ 		}
/******/ 		// Create a new module (and put it into the cache)
/******/ 		var module = installedModules[moduleId] = {
/******/ 			i: moduleId,
/******/ 			l: false,
/******/ 			exports: {}
/******/ 		};
/******/
/******/ 		// Execute the module function
/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ 		// Flag the module as loaded
/******/ 		module.l = true;
/******/
/******/ 		// Return the exports of the module
/******/ 		return module.exports;
/******/ 	}
/******/
/******/
/******/ 	// expose the modules object (__webpack_modules__)
/******/ 	__webpack_require__.m = modules;
/******/
/******/ 	// expose the module cache
/******/ 	__webpack_require__.c = installedModules;
/******/
/******/ 	// define getter function for harmony exports
/******/ 	__webpack_require__.d = function(exports, name, getter) {
/******/ 		if(!__webpack_require__.o(exports, name)) {
/******/ 			Object.defineProperty(exports, name, { enumerable: true, get: getter });
/******/ 		}
/******/ 	};
/******/
/******/ 	// define __esModule on exports
/******/ 	__webpack_require__.r = function(exports) {
/******/ 		if(typeof Symbol !== 'undefined' &amp;&amp; Symbol.toStringTag) {
/******/ 			Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
/******/ 		}
/******/ 		Object.defineProperty(exports, '__esModule', { value: true });
/******/ 	};
/******/
/******/ 	// create a fake namespace object
/******/ 	// mode &amp; 1: value is a module id, require it
/******/ 	// mode &amp; 2: merge all properties of value into the ns
/******/ 	// mode &amp; 4: return value when already ns object
/******/ 	// mode &amp; 8|1: behave like require
/******/ 	__webpack_require__.t = function(value, mode) {
/******/ 		if(mode &amp; 1) value = __webpack_require__(value);
/******/ 		if(mode &amp; 8) return value;
/******/ 		if((mode &amp; 4) &amp;&amp; typeof value === 'object' &amp;&amp; value &amp;&amp; value.__esModule) return value;
/******/ 		var ns = Object.create(null);
/******/ 		__webpack_require__.r(ns);
/******/ 		Object.defineProperty(ns, 'default', { enumerable: true, value: value });
/******/ 		if(mode &amp; 2 &amp;&amp; typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
/******/ 		return ns;
/******/ 	};
/******/
/******/ 	// getDefaultExport function for compatibility with non-harmony modules
/******/ 	__webpack_require__.n = function(module) {
/******/ 		var getter = module &amp;&amp; module.__esModule ?
/******/ 			function getDefault() { return module['default']; } :
/******/ 			function getModuleExports() { return module; };
/******/ 		__webpack_require__.d(getter, 'a', getter);
/******/ 		return getter;
/******/ 	};
/******/
/******/ 	// Object.prototype.hasOwnProperty.call
/******/ 	__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/ 	// __webpack_public_path__
/******/ 	__webpack_require__.p = &quot;/build/&quot;;
/******/
/******/
/******/ 	// Load entry module and return exports
/******/ 	return __webpack_require__(__webpack_require__.s = 115);
/******/ })
/************************************************************************/
/******/ ({

/***/ 115:
/***/ (function(module, exports, __webpack_require__) {

&quot;use strict&quot;;
/* global chrome */


const ports = {};
const IS_FIREFOX = navigator.userAgent.indexOf('Firefox') &gt;= 0;
chrome.runtime.onConnect.addListener(function (port) {
  let tab = null;
  let name = null;

  if (isNumeric(port.name)) {
    tab = port.name;
    name = 'devtools';
    installContentScript(+port.name);
  } else {
    tab = port.sender.tab.id;
    name = 'content-script';
  }

  if (!ports[tab]) {
    ports[tab] = {
      devtools: null,
      'content-script': null
    };
  }

  ports[tab][name] = port;

  if (ports[tab].devtools &amp;&amp; ports[tab]['content-script']) {
    doublePipe(ports[tab].devtools, ports[tab]['content-script']);
  }
});

function isNumeric(str) {
  return +str + '' === str;
}

function installContentScript(tabId) {
  chrome.tabs.executeScript(tabId, {
    file: '/build/contentScript.js'
  }, function () {});
}

function doublePipe(one, two) {
  one.onMessage.addListener(lOne);

  function lOne(message) {
    two.postMessage(message);
  }

  two.onMessage.addListener(lTwo);

  function lTwo(message) {
    one.postMessage(message);
  }

  function shutdown() {
    one.onMessage.removeListener(lOne);
    two.onMessage.removeListener(lTwo);
    one.disconnect();
    two.disconnect();
  }

  one.onDisconnect.addListener(shutdown);
  two.onDisconnect.addListener(shutdown);
}

function setIconAndPopup(reactBuildType, tabId) {
  chrome.browserAction.setIcon({
    tabId: tabId,
    path: {
      '16': 'icons/16-' + reactBuildType + '.png',
      '32': 'icons/32-' + reactBuildType + '.png',
      '48': 'icons/48-' + reactBuildType + '.png',
      '128': 'icons/128-' + reactBuildType + '.png'
    }
  });
  chrome.browserAction.setPopup({
    tabId: tabId,
    popup: 'popups/' + reactBuildType + '.html'
  });
}

function isRestrictedBrowserPage(url) {
  return !url || new URL(url).protocol === 'chrome:';
}

function checkAndHandleRestrictedPageIfSo(tab) {
  if (tab &amp;&amp; isRestrictedBrowserPage(tab.url)) {
    setIconAndPopup('restricted', tab.id);
  }
} // update popup page of any existing open tabs, if they are restricted browser pages.
// we can't update for any other types (prod,dev,outdated etc)
// as the content script needs to be injected at document_start itself for those kinds of detection
// TODO: Show a different popup page(to reload current page probably) for old tabs, opened before the extension is installed


if (!IS_FIREFOX) {
  chrome.tabs.query({}, tabs =&gt; tabs.forEach(checkAndHandleRestrictedPageIfSo));
  chrome.tabs.onCreated.addListener((tabId, changeInfo, tab) =&gt; checkAndHandleRestrictedPageIfSo(tab));
} // Listen to URL changes on the active tab and update the DevTools icon.


chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) =&gt; {
  if (IS_FIREFOX) {
    // We don't properly detect protected URLs in Firefox at the moment.
    // However we can reset the DevTools icon to its loading state when the URL changes.
    // It will be updated to the correct icon by the onMessage callback below.
    if (tab.active &amp;&amp; changeInfo.status === 'loading') {
      setIconAndPopup('disabled', tabId);
    }
  } else {
    // Don't reset the icon to the loading state for Chrome or Edge.
    // The onUpdated callback fires more frequently for these browsers,
    // often after onMessage has been called.
    checkAndHandleRestrictedPageIfSo(tab);
  }
});
chrome.runtime.onMessage.addListener((request, sender) =&gt; {
  var _request$payload, _ports$id;

  const tab = sender.tab;

  if (tab) {
    const id = tab.id; // This is sent from the hook content script.
    // It tells us a renderer has attached.

    if (request.hasDetectedReact) {
      // We use browserAction instead of pageAction because this lets us
      // display a custom default popup when React is *not* detected.
      // It is specified in the manifest.
      setIconAndPopup(request.reactBuildType, id);
    } else {
      switch ((_request$payload = request.payload) === null || _request$payload === void 0 ? void 0 : _request$payload.type) {
        case 'fetch-file-with-cache-complete':
        case 'fetch-file-with-cache-error':
          // Forward the result of fetch-in-page requests back to the extension.
          const devtools = (_ports$id = ports[id]) === null || _ports$id === void 0 ? void 0 : _ports$id.devtools;

          if (devtools) {
            devtools.postMessage(request);
          }

          break;
      }
    }
  }
});

/***/ })

/******/ });"><pre class="notranslate"><code class="notranslate">/******/ (function(modules) { // webpackBootstrap
/******/ 	// The module cache
/******/ 	var installedModules = {};
/******/
/******/ 	// The require function
/******/ 	function __webpack_require__(moduleId) {
/******/
/******/ 		// Check if module is in cache
/******/ 		if(installedModules[moduleId]) {
/******/ 			return installedModules[moduleId].exports;
/******/ 		}
/******/ 		// Create a new module (and put it into the cache)
/******/ 		var module = installedModules[moduleId] = {
/******/ 			i: moduleId,
/******/ 			l: false,
/******/ 			exports: {}
/******/ 		};
/******/
/******/ 		// Execute the module function
/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ 		// Flag the module as loaded
/******/ 		module.l = true;
/******/
/******/ 		// Return the exports of the module
/******/ 		return module.exports;
/******/ 	}
/******/
/******/
/******/ 	// expose the modules object (__webpack_modules__)
/******/ 	__webpack_require__.m = modules;
/******/
/******/ 	// expose the module cache
/******/ 	__webpack_require__.c = installedModules;
/******/
/******/ 	// define getter function for harmony exports
/******/ 	__webpack_require__.d = function(exports, name, getter) {
/******/ 		if(!__webpack_require__.o(exports, name)) {
/******/ 			Object.defineProperty(exports, name, { enumerable: true, get: getter });
/******/ 		}
/******/ 	};
/******/
/******/ 	// define __esModule on exports
/******/ 	__webpack_require__.r = function(exports) {
/******/ 		if(typeof Symbol !== 'undefined' &amp;&amp; Symbol.toStringTag) {
/******/ 			Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
/******/ 		}
/******/ 		Object.defineProperty(exports, '__esModule', { value: true });
/******/ 	};
/******/
/******/ 	// create a fake namespace object
/******/ 	// mode &amp; 1: value is a module id, require it
/******/ 	// mode &amp; 2: merge all properties of value into the ns
/******/ 	// mode &amp; 4: return value when already ns object
/******/ 	// mode &amp; 8|1: behave like require
/******/ 	__webpack_require__.t = function(value, mode) {
/******/ 		if(mode &amp; 1) value = __webpack_require__(value);
/******/ 		if(mode &amp; 8) return value;
/******/ 		if((mode &amp; 4) &amp;&amp; typeof value === 'object' &amp;&amp; value &amp;&amp; value.__esModule) return value;
/******/ 		var ns = Object.create(null);
/******/ 		__webpack_require__.r(ns);
/******/ 		Object.defineProperty(ns, 'default', { enumerable: true, value: value });
/******/ 		if(mode &amp; 2 &amp;&amp; typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
/******/ 		return ns;
/******/ 	};
/******/
/******/ 	// getDefaultExport function for compatibility with non-harmony modules
/******/ 	__webpack_require__.n = function(module) {
/******/ 		var getter = module &amp;&amp; module.__esModule ?
/******/ 			function getDefault() { return module['default']; } :
/******/ 			function getModuleExports() { return module; };
/******/ 		__webpack_require__.d(getter, 'a', getter);
/******/ 		return getter;
/******/ 	};
/******/
/******/ 	// Object.prototype.hasOwnProperty.call
/******/ 	__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/ 	// __webpack_public_path__
/******/ 	__webpack_require__.p = "/build/";
/******/
/******/
/******/ 	// Load entry module and return exports
/******/ 	return __webpack_require__(__webpack_require__.s = 115);
/******/ })
/************************************************************************/
/******/ ({

/***/ 115:
/***/ (function(module, exports, __webpack_require__) {

"use strict";
/* global chrome */


const ports = {};
const IS_FIREFOX = navigator.userAgent.indexOf('Firefox') &gt;= 0;
chrome.runtime.onConnect.addListener(function (port) {
  let tab = null;
  let name = null;

  if (isNumeric(port.name)) {
    tab = port.name;
    name = 'devtools';
    installContentScript(+port.name);
  } else {
    tab = port.sender.tab.id;
    name = 'content-script';
  }

  if (!ports[tab]) {
    ports[tab] = {
      devtools: null,
      'content-script': null
    };
  }

  ports[tab][name] = port;

  if (ports[tab].devtools &amp;&amp; ports[tab]['content-script']) {
    doublePipe(ports[tab].devtools, ports[tab]['content-script']);
  }
});

function isNumeric(str) {
  return +str + '' === str;
}

function installContentScript(tabId) {
  chrome.tabs.executeScript(tabId, {
    file: '/build/contentScript.js'
  }, function () {});
}

function doublePipe(one, two) {
  one.onMessage.addListener(lOne);

  function lOne(message) {
    two.postMessage(message);
  }

  two.onMessage.addListener(lTwo);

  function lTwo(message) {
    one.postMessage(message);
  }

  function shutdown() {
    one.onMessage.removeListener(lOne);
    two.onMessage.removeListener(lTwo);
    one.disconnect();
    two.disconnect();
  }

  one.onDisconnect.addListener(shutdown);
  two.onDisconnect.addListener(shutdown);
}

function setIconAndPopup(reactBuildType, tabId) {
  chrome.browserAction.setIcon({
    tabId: tabId,
    path: {
      '16': 'icons/16-' + reactBuildType + '.png',
      '32': 'icons/32-' + reactBuildType + '.png',
      '48': 'icons/48-' + reactBuildType + '.png',
      '128': 'icons/128-' + reactBuildType + '.png'
    }
  });
  chrome.browserAction.setPopup({
    tabId: tabId,
    popup: 'popups/' + reactBuildType + '.html'
  });
}

function isRestrictedBrowserPage(url) {
  return !url || new URL(url).protocol === 'chrome:';
}

function checkAndHandleRestrictedPageIfSo(tab) {
  if (tab &amp;&amp; isRestrictedBrowserPage(tab.url)) {
    setIconAndPopup('restricted', tab.id);
  }
} // update popup page of any existing open tabs, if they are restricted browser pages.
// we can't update for any other types (prod,dev,outdated etc)
// as the content script needs to be injected at document_start itself for those kinds of detection
// TODO: Show a different popup page(to reload current page probably) for old tabs, opened before the extension is installed


if (!IS_FIREFOX) {
  chrome.tabs.query({}, tabs =&gt; tabs.forEach(checkAndHandleRestrictedPageIfSo));
  chrome.tabs.onCreated.addListener((tabId, changeInfo, tab) =&gt; checkAndHandleRestrictedPageIfSo(tab));
} // Listen to URL changes on the active tab and update the DevTools icon.


chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) =&gt; {
  if (IS_FIREFOX) {
    // We don't properly detect protected URLs in Firefox at the moment.
    // However we can reset the DevTools icon to its loading state when the URL changes.
    // It will be updated to the correct icon by the onMessage callback below.
    if (tab.active &amp;&amp; changeInfo.status === 'loading') {
      setIconAndPopup('disabled', tabId);
    }
  } else {
    // Don't reset the icon to the loading state for Chrome or Edge.
    // The onUpdated callback fires more frequently for these browsers,
    // often after onMessage has been called.
    checkAndHandleRestrictedPageIfSo(tab);
  }
});
chrome.runtime.onMessage.addListener((request, sender) =&gt; {
  var _request$payload, _ports$id;

  const tab = sender.tab;

  if (tab) {
    const id = tab.id; // This is sent from the hook content script.
    // It tells us a renderer has attached.

    if (request.hasDetectedReact) {
      // We use browserAction instead of pageAction because this lets us
      // display a custom default popup when React is *not* detected.
      // It is specified in the manifest.
      setIconAndPopup(request.reactBuildType, id);
    } else {
      switch ((_request$payload = request.payload) === null || _request$payload === void 0 ? void 0 : _request$payload.type) {
        case 'fetch-file-with-cache-complete':
        case 'fetch-file-with-cache-error':
          // Forward the result of fetch-in-page requests back to the extension.
          const devtools = (_ports$id = ports[id]) === null || _ports$id === void 0 ? void 0 : _ports$id.devtools;

          if (devtools) {
            devtools.postMessage(request);
          }

          break;
      }
    }
  }
});

/***/ })

/******/ });
</code></pre></div>
<h3 dir="auto">Error component stack (automated)</h3>
<p dir="auto"><em>No response</em></p>
<h3 dir="auto">GitHub query string (automated)</h3>
<p dir="auto"><em>No response</em></p>