能否通过Chrome扩展重写Webpack打包包中的JavaScript函数？

问题描述 #

我正在开发Manifest V3版本的浏览器扩展，需要修改页面功能，目标是重写名为parseQuery的JavaScript函数。该函数定义在language-query-parser包中，我无法修改这个包的源码或构建方式，想咨询是否可以实现重写，或者无法重写的原因。

通过Chrome开发者工具在parseQuery内打断点后，看到调用方的调用方式：

var stack = Object(__WEBPACK_IMPORTED_MODULE_1__company_internal_insight_language_query_parser__["y" /* parseQuery */])(queryToCursor, true);

查看打包后的JS文件，找到与parseQuery暴露相关的代码段：

/* 134 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
………
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "d", function() { return parseQuery; });
………….
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__query__ = __webpack_require__(135);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__composer__ = __webpack_require__(136);
/* eslint-disable no-use-before-define */

// Bunch of other functions…. 


function parseQuery(query, incomplete) {
     // parseQuery function body
}

/***/ }),

我的manifest.json中内容脚本配置如下：

"content_scripts": [
  {
    "world": "MAIN",
    "js": [
      "scripts/requestProcessing.js"
    ],
    "matches": [
      "SOME_RELEVANT_REGEX*"
    ],
    "run_at": "document_start"
  }
]

在requestProcessing.js中，无法找到指向parseQuery函数的引用。

已尝试的方法 #

重写window.parseQuery #

window对象中不存在parseQuery，直接设置window.parseQuery无效。即使在原parseQuery的断点处，window.parseQuery仍为undefined，等待其出现的方式也不生效。尝试的代码：

(function() {

    const interval = setInterval(() => {
        console.log('Checking for parseQuery');

        const originalParseQuery = window.parseQuery;
        if (originalParseQuery) {
            clearInterval(interval);
            console.log('parseQuery is available');

            window.parseQuery = function(query, incomplete) {
                console.log('Calling the overrideden parseQuery function');
                return originalParseQuery(query, incomplete);
            }
        }
    }, 100);
})();

尝试在导入时拦截 #

尝试重写__webpack_require__但无效，代码报错Uncaught ReferenceError: __webpack_require__ is not defined，因为无法从内容脚本中获取__webpack_require__的引用。尝试的代码：

(function() {
  const originalRequire = __webpack_require__;

  __webpack_require__ = function(moduleId) {
    const module = originalRequire(moduleId);

    if (module && module.exports && module.exports.parseQuery) {
      const originalParseQuery = module.exports.parseQuery;

      module.exports.parseQuery = function(query, incomplete) {
        console.log('parseQuery function has been overridden!');
        // Modify the query or log it
        console.log('Query:', query);
        // Call the original function if needed
        return originalParseQuery.apply(this, arguments);
      };

      console.log('parseQuery function is now overridden.');
    }

    return module;
  };
})();

在window中查找Webpack相关内容 #

执行以下代码：

Object.keys(window).filter(key => key.toLowerCase().includes('webpack'))

返回结果为空，无法在window对象中找到相关内容。

内容的提问来源于stack exchange，提问作者Hakan Baba