前言

作為一個前端開發,

在調試生產環境的代碼時,是否苦於生產環境代碼被壓縮,沒有sourcemap?

有沒有想過將生產環境的js直接重定向為本地開發環境的js?

玩微前端時,有沒有想過用本地的子應用js去替換線上的子應用js?

或者有沒有想過修改別人網站的文件,直接完成某些非常規操作?

最近因為項目開發中有這麼一個小需要,我寫了個chrome擴展插件解决這個問題,當然Edge瀏覽器也能用。

這個擴展插件安裝後,可以直接將一個js重定向為另一個js。

先給上這個擴展插件的倉庫地址:Demo

周六在家半天寫完的代碼,糙了些,但還算能看。

原理

chrome擴展插件是什麼或者解壓縮的擴展插件怎麼玩,想要了解直接百度,這裏不會講這些。

這裏直接默認大家對擴展插件有一些基礎了解。

現在讓我們進入正題,本擴展插件使用的是Manifest V2的一個API:chrome.webRequest,Manifest V3中的declarativeNetRequest是不支持js重定向的。

直接貼簡化後的關鍵代碼:

// 識別的所有js
let origins = {
common: 'nodeModules_eeb5887.js',
}; // 重定向的js
let redirects = {
common: 'https://s1.hdslb.com/bfs/static/blive/live-region/libs/area-tags/vue_2.6.14.js',
}; chrome.runtime.onInstalled.addListener(() => {
// 請求時回調
chrome.webRequest.onBeforeRequest.addListener(
function (details) {
// 如果請求的js,以origins.common結尾
if(details.url.endsWith(origins.common)){
// 直接將這個js替換為redirects.common
return { redirectUrl: redirects.common };
}
},
{
types:["script"],
urls: ["*://*/*.js"] // 進一步過濾js,這裏沒做進一步篩選
},
["blocking"]
);
});

我們在代碼中直接監聽請求,在請求前看請求js的url是否以nodeModules_eeb5887.js結尾,如果是的話直接替換為vue_2.6.14.js

有的朋友可能要問了,這個nodeModules_eeb5887.js和那個那麼長的一串vue_2.6.14.js是啥啊?

我是直接用百度翻譯那個頁面調試的擴展插件,所以nodeModules_eeb5887.js是百度翻譯的一個js文件,而很長的那個vue_2.6.14.js是B站隨便找的的一個js文件。

使用之後可以直接將百度翻譯頁面這個js文件,重定向為B站的這個js文件。

使用

其實這個擴展插件只是個demo,所以大家使用的時候可能要替換一點東西才能用,總共兩個地方:

  • 第一點找到manifest.json這個文件,可以看到有這麼兩行代碼:

     "permissions": [
    // ...
    "*://fanyi.baidu.com/",
    "*://fanyi-cdn.cdn.bcebos.com/"
    ],

    這是因為我調試時用的百度翻譯頁面,所以要申請訪問權限,這裏要把你想要修改的頁面的域名和想要重定向的js的域名都替換上去。

  • 第二點找到background.js這個文件,可以看到下面這個配置:

     // 識別的所有js
    let origins = {
    common: 'nodeModules_eeb5887.js',
    framework: 'public_10b9d27.js'
    }; // 重定向的js
    let redirects = {
    common: 'https://s1.hdslb.com/bfs/static/blive/live-region/libs/area-tags/vue_2.6.14.js',
    framework: 'https://s1.hdslb.com/bfs/static/blive/live-region/libs/area-tags/vue_2.6.14.js'
    };

    上面的origins寫上被重定向的js,redirects寫上重定向的目標js。至於common和framework這兩個屬性,你看不懂代碼就別動,只替換值即可。

大概修改完這兩個地方就可以使用了

演示

修改完之後我們用百度翻譯這個網站看下具體的效果,加載完擴展插件後,左鍵點擊我們的擴展插件圖標(就是那個寫輪眼的圖標),可以呼出彈窗:

此時我們可以看到common那一行選擇的是線上,此時它不會重定向百度翻譯這個頁面裏js的請求。

我們可以看到這個頁面的nodeModules_eeb5887.js這個js仍然是請求的原地址。

當我們操作彈窗,選擇本地這個選項後:



再去刷新百度翻譯這個頁面:

我們可以看到頁面在請求nodeModules_eeb5887.js這個js文件時直接重定向,去請求vue_2.6.14.js這個js文件了。

總結

寫這個東西自己查查開發文檔看看資料就寫完了,就是最開始的方案是使用Manifest V3中的declarativeNetRequest,這玩意看文檔看到最後才發現特別標注js不能重定向,浪費了不少時間。

另外一個特別有感觸的點就是,寫這個擴展插件要用原生js。

我一直在寫react,已經很久沒寫原生js了,當我想著單選框radio應該用哪個元素時,一時竟然完全想不起來了,最後靠百度才知道要用input元素。

我又想起了一個月前面試的時候,別人問我js繼承有哪些,我知道他想問的是寄生式組合式這些鬼東西,但是我卻完全回憶不起來了,只能跟他說原型和class,只能說當時非常尷尬。

我曾經還專門寫了篇博客講這個東西:【JS複習筆記】03 繼承(從ES5到ES6),最終的結果還是記憶模糊。

很多東西長期不用,真的就忘了。

說到博客,最有趣的是,我自己寫的博客,自己做的東西很多都忘記了。

比如那個看react的useEffect源碼的博客,完全沒什麼印象了。

只能安慰自己是個CPU而不是硬盤了。

好了,不瞎扯了,本篇博客到此結束。如有疏漏之處,還請不吝賜教。

自制Chrome擴展插件:用於重定向js的更多相關文章

  1. BlazeMeter發布chrome擴展插件,支持JMeter脚本創建

    BlazeMeter發布chrome擴展插件,支持JMeter脚本創建http://www.automationqa.com/forum.php?mod=viewthread&tid=3898 ...

  2. 那些離不開的 Chrome 擴展插件

    雖然Chrome瀏覽器是個吃內存的怪獸,但是,它卻因為啟動速度.調試功能等成為了程序猿的必備瀏覽器!今天有時間,整理一下自己最常用的一些Chrome擴展吧: 常用網頁瀏覽非開發類擴展: Tamperm ...

  3. Chrome擴展插件流程

    一.瀏覽器插件基礎步驟: 1.文件最基礎的配置 : 一個manifest文件.一個或多個html文件.可選的一個或多個javascript文件.可選的任何需要的其他文件,例如圖片:在開發應用(擴展)時 ...

  4. Do Chrome extensions access iframes? chrome擴展插件訪問所有iframes

    32down voteaccepted Yes, a Chrome Extension "content script" can run in all iframes (that ...

  5. chrome 擴展插件提示

    --force-fieldtrials=ExtensionDeveloperModeWarning/None/ ogfahjpoemnbbnlignjbfinfnahmfdlk ahjaciijnoi ...

  6. 有哪些可以節省chrome內存的擴展插件?

    不知道從什麼時候開始,chrome瀏覽器就這樣不知不覺的超過IE瀏覽器成為全球第一大瀏覽器.我們在贊賞chrome瀏覽器流暢的速度時,更多的是對其chrome插件功能的贊賞.但是我們也發現了一個致命的 ...

  7. Google Chrome 擴展程序開發

    根據公司的規定,每月八小時,彈性工作制.所以大家平時來的不太准時,如果有事,下班也就早些回去了.所以一個月下來工作時間可能不够,但是公司的考勤日曆是這樣的: 除了請假和法定節假日外,其他樣式顯示都是一 ...

  8. Chrome擴展開發之二——Chrome擴展中脚本的運行機制和通信方式

    目錄: 0.Chrome擴展開發(Gmail附件管理助手)系列之〇——概述 1.Chrome擴展開發之一——Chrome擴展的文件結構 2.Chrome擴展開發之二——Chrome擴展中脚本的運行機制 ...

  9. Postman 是一個非常棒的Chrome擴展,提供功能强大的API & HTTP 請求調試

    Postman 是一個非常棒的Chrome擴展,提供功能强大的API & HTTP 請求調試   需要FQ才能安裝,使用時應該不用FQ了,除非使用postman的曆史記錄功能:   非常棒的C ...

  10. Chrome擴展應用

    現在越來越多的用戶將chrome瀏覽器設置為自己默認的瀏覽器,不僅是因為他的界面美,最重要的是他對html5和CSS3完美的支持,且調試工具非常好用,還有豐富的擴展庫.如何安裝自己的擴展呢? 點擊自定 ...

隨機推薦

  1. 1.2 基礎知識——關於猪皮(GP,Generic Practice)

    摘要: 這是<CMMI快樂之旅>系列文章之一.說起猪皮(GP,Generic Practice),真的讓人又愛又恨,中文翻譯叫通用實踐.CMMI標准中每個級別包含幾個PA,每個PA又包含幾 ...

  2. 【bzoj3674】 可持久化並查集加强版

    http://www.lydsy.com/JudgeOnline/problem.php?id=3674 (題目鏈接) 題意 維護並查集3個操作:合並:回到完成第k個操作後的狀態:查詢. Soluti ...

  3. require.js的簡單使用

    <script src="js/require.js"></script> <script src="js/require.js" ...

  4. BZOJ2226: [Spoj 5971] LCMSum

    題解: 考慮枚舉gcd,然後問題轉化為求<=n且與n互質的數的和. 這是有公式的f[i]=phi[i]*i/2 然後卡一卡時就可以過了. 代碼: #include<cstdio> # ...

  5. *【編寫可維護的JavaScript #BOOK#】第9章 將配置數據從代碼中分離出來

    <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8& ...

  6. java數據結構之有序錶查找

    這篇文章是關於有序錶的查找,主要包括了順序查找的優化用法.折半查找.插值查找.斐波那契查找: 順序優化查找:效率極為底下,但是算法簡單,適用於小型數據查找: 折半查找:又稱為二分查找,它是從查找錶的中 ...

  7. Yii config 配置

    Yii2 配置文件 常用配置總結 <?php // 主配置文件 $config = array( 'modules' => array( 'gii' => array( 'class ...

  8. threejs立方體貼圖產生邊緣鋸齒問題

    threejs立方體貼圖產生邊緣鋸齒問題 立方體貼圖邊緣鋸齒 解决後 經過試驗測試發現, textureGrass.wrapS和 textureGrass.wrapT屬性導致的. 解决方法1: 删掉t ...

  9. 使用MongoDB數據庫(2)(三十六)

    快速開始使用Spring-data-mongodb 若MongoDB的安裝配置采用默認端口,那麼在自動配置的情况下,我們不需要做任何參數配置,就能馬上連接上本地的MongoDB.下面直接使用sprin ...

  10. highly variable gene | 高變异基因的選擇 | feature selection | 特征選擇

    在做單細胞的時候,有很多基因屬於noise,就是變化沒有規律,或者無顯著變化的基因.在後續分析之前,我們需要把它們去掉. 以下是一種找出highly variable gene的方法: The fea ...