Can one overwrite a javascript function from a package (bundled with webpack) from a chrome extension? - Stack Overflow

admin管理员组

文章数量:1122832

I am working on a Manifest V3 browser extension. In order to change the functionality of a page, I would like to override a javascript function.

The function is called parseQuery and it is defined in a javascript package called language-query-parser. I do not have influence on the language-query-parser package. I cannot change its source code or how it is being built.

Looking for some help if I can overwrite the parseQuery function or learn about why I cannot.

When I place a breakpoint inside the parseQuery via the chrome developer tools, I see it is called like the following from a caller.

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

Looking at the bundled javascript file, I see the following section that looks relevant to how the parseQuery is made available.

/* 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
}

/***/ }),

I have a content injection script that is defined like this in the manifest.json

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

Inside the requestProcessing.js I was not able to find a "pointer" to parseQuery function.

Avenues I have investigated:

Override window.parseQuery

window does not have parseQuery. So I cannot simply set window.parseQuery. window.parseQuery does not exist at requestProcessing.js script run time. I think window.parseQuery never exists. Even when I stop at a breakpoint in the original parseQuery, the window.parseQuery is undefined. So waiting for it to exist also did not work.

I was not able to make something like the following work in the requestProcessing.js

(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);
})();

Try to interject import time

Something along the lines did not work to override the __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;
  };
})();

I do not fully understand how webpack works but I am not sure whether I can get the symbol of __webpack_require__ from the requestProcessing.js content script. This has been giving me the error of

Uncaught ReferenceError: __webpack_require__ is not defined

I am not sure if there is a simple way to import __webpack_require__ from the content script.

Finding anything webpack required in window

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

Returns nothing. So I was not able to find something relevant in the window object itself.

本文标签：