在 Chrome console 如何引用页面中 webpack 打包出来的 module

This topic created in 2046 days ago, the information mentioned may be changed or developed.

我想用油猴脚本实现过期自动重新登录功能。但是这个网站是 vue 写的，webpack 打包的。现在需要，需要修改 axios 的设置。目前查到 webpack 会在 window 对象设置 webpackJsonp 属性，然后通过他加载和引用 module 。请问各位大神，如果需要在外部引用 webpack 打包的 module 的引入示例，需要怎么做呢？

Supplement 1 · Apr 5, 2021

新思路，可以直接劫持 js 修改源码

// ==UserScript==
// @name        Test
// @namespace   Test
// @description TEST
// @include     http://the.website.com/*
// @version     1
// @grant       GM_xmlhttpRequest
// @run-at      document-start
// ==/UserScript==

function addScript(text) {
    text = text.replace(/replaceThis();/g, "");
    var newScript = document.createElement('script');
    newScript.type = "text/javascript";
    newScript.textContent = text;
    var head = document.getElementsByTagName('head')[0];
    head.appendChild(newScript);
}

window.addEventListener('beforescriptexecute', function(e) {
    src = e.target.src;
    if (src.search(/script_to_modify\.js/) != -1) {
        e.preventDefault();
        e.stopPropagation();        
        GM_xmlhttpRequest({
            method: "GET",
            url: e.target.src,
            onload: function(response) {
                addScript(response.responseText);
            }
        });
    }
});

Supplement 2 · Apr 5, 2021

根据 @RedBuck 的思路，直接劫持了 XHR

下面的代码作用是，强制 ajax 请求使用某个 Bearer token

let originSetRequestHeader = XMLHttpRequest.prototype.setRequestHeader;

XMLHttpRequest.prototype.setRequestHeader = function (key, value) {
    // console.log('setRequestHeader', key, value, this);

    if(key == 'Authorization') {
        if (value != sessionStorage.jwt) {
            value = sessionStorage.jwt;
        }
    }

    return originSetRequestHeader.apply(this, [key, value]);
};

webpack

module

打包

引用

18 replies • 2021-04-05 17:14:03 +08:00