How to prevent remove of functions without references? E.g. w content script in Web browser Extension Development.

[sfranczyk]

Hello!

I create a small extension for Google Chrome. There I use devtools_page, and inside the script, I need to use a function from content-script.ts. However, I can't do it directly, I just write the name of the function in a string. As a result, the content-script function has no direct reference and Parcel treats it as unnecessary and removes it. With the --no-optimize flag, it supposedly leaves it, but closes it in the function, which makes it unavailable anyway. How can I tell Parcel to leave this function, or at least leave the content-script file alone?

The use of handleSelectedElement function in devtools.ts:

function updatePanel() {
  if (isActive) {
    // send the selected element to the content script
    chrome.devtools.inspectedWindow.eval("handleSelectedElement($0)", {
      useContentScriptContext: true
    }, (result, exceptionInfo) => { });
  }
}

The function in content-script.ts:

function handleSelectedElement(selectedElement) {
  console.log('selected element handled');
  try {
    if (selectedElement != null) {
      const node = selectedElement.cloneNode(true);
      removeScriptsFromElement(node);
      console.log(node);
      console.log('selected element outer HTML number of characters ', node.outerHTML.length);
      const message = {
        request: 'send_to_dev_panel',
        element: node.outerHTML,
      };
      chrome.runtime.sendMessage(message);

      const items = divideChildren(node, 10000);
      console.log('items :>> ', items);
    }
  } catch (error) {
    console.error(error);
  }
}

When called normally, Parcel returns me a file without the code, and with the --no-optimize flag and additionally --no-scope-hoist (it's important for not changing names of functions) it returns something like this.

// modules are defined as an array
// [ module function, map of requires ]
//
// map of requires is short require name -> numeric require
//
// anything defined in a previous bundle is accessed via the
// orig method which is the require for previous bundles

(function (modules, entry, mainEntry, parcelRequireName, globalName) {
  /* eslint-disable no-undef */
  var globalObject =
    typeof globalThis !== 'undefined'
      ? globalThis
      : typeof self !== 'undefined'
      ? self
      : typeof window !== 'undefined'
      ? window
      : typeof global !== 'undefined'
      ? global
      : {};
  /* eslint-enable no-undef */

  // Save the require from previous bundle to this closure if any
  var previousRequire =
    typeof globalObject[parcelRequireName] === 'function' &&
    globalObject[parcelRequireName];

  var cache = previousRequire.cache || {};
  // Do not use `require` to prevent Webpack from trying to bundle this call
  var nodeRequire =
    typeof module !== 'undefined' &&
    typeof module.require === 'function' &&
    module.require.bind(module);

  function newRequire(name, jumped) {
    if (!cache[name]) {
      if (!modules[name]) {
        // if we cannot find the module within our internal map or
        // cache jump to the current global require ie. the last bundle
        // that was added to the page.
        var currentRequire =
          typeof globalObject[parcelRequireName] === 'function' &&
          globalObject[parcelRequireName];
        if (!jumped && currentRequire) {
          return currentRequire(name, true);
        }

        // If there are other bundles on this page the require from the
        // previous one is saved to 'previousRequire'. Repeat this as
        // many times as there are bundles until the module is found or
        // we exhaust the require chain.
        if (previousRequire) {
          return previousRequire(name, true);
        }

        // Try the node require function if it exists.
        if (nodeRequire && typeof name === 'string') {
          return nodeRequire(name);
        }

        var err = new Error("Cannot find module '" + name + "'");
        err.code = 'MODULE_NOT_FOUND';
        throw err;
      }

      localRequire.resolve = resolve;
      localRequire.cache = {};

      var module = (cache[name] = new newRequire.Module(name));

      modules[name][0].call(
        module.exports,
        localRequire,
        module,
        module.exports,
        this
      );
    }

    return cache[name].exports;

    function localRequire(x) {
      var res = localRequire.resolve(x);
      return res === false ? {} : newRequire(res);
    }

    function resolve(x) {
      var id = modules[name][1][x];
      return id != null ? id : x;
    }
  }

  function Module(moduleName) {
    this.id = moduleName;
    this.bundle = newRequire;
    this.exports = {};
  }

  newRequire.isParcelRequire = true;
  newRequire.Module = Module;
  newRequire.modules = modules;
  newRequire.cache = cache;
  newRequire.parent = previousRequire;
  newRequire.register = function (id, exports) {
    modules[id] = [
      function (require, module) {
        module.exports = exports;
      },
      {},
    ];
  };

  Object.defineProperty(newRequire, 'root', {
    get: function () {
      return globalObject[parcelRequireName];
    },
  });

  globalObject[parcelRequireName] = newRequire;

  for (var i = 0; i < entry.length; i++) {
    newRequire(entry[i]);
  }

  if (mainEntry) {
    // Expose entry point to Node, AMD or browser globals
    // Based on https://github.com/ForbesLindesay/umd/blob/master/template.js
    var mainExports = newRequire(mainEntry);

    // CommonJS
    if (typeof exports === 'object' && typeof module !== 'undefined') {
      module.exports = mainExports;

      // RequireJS
    } else if (typeof define === 'function' && define.amd) {
      define(function () {
        return mainExports;
      });

      // <script>
    } else if (globalName) {
      this[globalName] = mainExports;
    }
  }
})({"k5Ie5":[function(require,module,exports) {
function handleSelectedElement(selectedElement) {
    console.log("selected element handled");
    try {
        if (selectedElement != null) {
            const node = selectedElement.cloneNode(true);
            removeScriptsFromElement(node);
            console.log(node);
            console.log("selected element outer HTML number of characters ", node.outerHTML.length);
            const message = {
                request: "send_to_dev_panel",
                element: node.outerHTML
            };
            chrome.runtime.sendMessage(message);
            const items = divideChildren(node, 10000);
            console.log("items :>> ", items);
        }
    } catch (error) {
        console.error(error);
    }
}
function removeScriptsFromElement(element) {
    if (element) Array.from(element.getElementsByTagName("script")).forEach((script)=>script.remove());
}

},{}]},["k5Ie5"], "k5Ie5", "parcelRequire94c2")

[mischnic]

Do this

global.handleSelectedElement = function handleSelectedElement() { ...

[sfranczyk]

Omg that works brilliant workaround, thanks!