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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 1347 天前的主题，其中的信息可能已经有所发展或是发生改变。

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

第 1 条附言 · 2021-04-05 12:41:05 +08:00

新思路，可以直接劫持 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);
            }
        });
    }
});

第 2 条附言 · 2021-04-05 17:15:40 +08:00

根据 @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 条回复 • 2021-04-05 17:14:03 +08:00