在Chrome控制臺(tái)注入npm模塊

CoorChice 發(fā)布于2019-08-23 14:39 / 3388人閱讀

摘要：工具和資料群高級(jí)爬蟲作者自建群，歡迎加入作者收集的爬蟲相關(guān)工具和資料正文上次研究了如何在內(nèi)置解釋器中加載模塊，這兩天手頭又有一個(gè)需求，要在瀏覽器的開發(fā)者控制臺(tái)中加載同樣的模塊，以便在控制臺(tái)中驗(yàn)證一些想法。

工具和資料

QQ群 - Javascript高級(jí)爬蟲 - 作者自建群，歡迎加入！

awesome-java-crawler - 作者收集的爬蟲相關(guān)工具和資料

正文

上次研究了如何在java內(nèi)置javascript解釋器nashorn中加載npm模塊，這兩天手頭又有一個(gè)需求，要在Chrome瀏覽器的開發(fā)者控制臺(tái)中加載同樣的npm模塊，以便在控制臺(tái)中驗(yàn)證一些想法。
因?yàn)閷η岸碎_發(fā)不算熟悉，不知道有沒有其它的好方案，這個(gè)是我自己摸索的，但確實(shí)可用。

流程

npm下載browserify
npm i browserify -g

寫一個(gè)簡單js文件，使用require加載npm模塊，并注入到window對象
window.acorn = require("./acorn")

使用browserify打包這個(gè)js，該工具會(huì)自動(dòng)把所有依賴的npm模塊和簡單js打包成單個(gè)js文件
browserify entry.js > require_acorn.js

把require_acorn.js文件的內(nèi)容粘貼到開發(fā)者控制臺(tái)并執(zhí)行，然后就可以使用了

代碼壓縮

到這里其實(shí)桌面Chrome瀏覽器就沒有問題了，我又用inspector連上安卓版Chrome試了一下，結(jié)果控制臺(tái)崩了……
估計(jì)是acorn太大了，畢竟有5000多行，于是又試了試壓縮：

npm下載uglify.js
npm i uglify-js -g

壓縮前面生成的單個(gè)js包
uglifyjs require_acorn.js > require_acorn.min.js

這次果然沒有問題了，在控制臺(tái)執(zhí)行typeof acorn可看到模塊已經(jīng)正確加載。

云服務(wù)器 GPU云服務(wù)器在npm 包 coa 和 rc 中發(fā)現(xiàn)惡 webrtc在chrome是否支持語音 cdn在內(nèi)容注入時(shí) 服務(wù)器遠(yuǎn)程控制模塊

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/100921.html

相關(guān)文章

在Chrome控制臺(tái)注入npm模塊

摘要：工具和資料群高級(jí)爬蟲作者自建群，歡迎加入作者收集的爬蟲相關(guān)工具和資料正文上次研究了如何在內(nèi)置解釋器中加載模塊，這兩天手頭又有一個(gè)需求，要在瀏覽器的開發(fā)者控制臺(tái)中加載同樣的模塊，以便在控制臺(tái)中驗(yàn)證一些想法。工具和資料 QQ群 - Javascript高級(jí)爬蟲 - 作者自建群，歡迎加入！ awesome-java-crawler - 作者收集的爬蟲相關(guān)工具和資料正文上次研究了...

aaron 2019-07-30 18:44 評論0 收藏0
webpack實(shí)戰(zhàn)

摘要：和類似的預(yù)處理器還有等。的用處非常多，包括給自動(dòng)加前綴使用下一代語法等，目前越來越多的人開始用它，它很可能會(huì)成為預(yù)處理器的最終贏家。 webpack實(shí)戰(zhàn) 查看所有文檔頁面：全棧開發(fā)，獲取更多信息?？祚R加鞭，加班加點(diǎn)，終于把這個(gè)文檔整理出來了，順便深入地學(xué)習(xí)一番，鞏固知識(shí)，就是太累人，影響睡眠時(shí)間和質(zhì)量。極客就是想要把事情做到極致，開始了就必須到達(dá)終點(diǎn)。原文鏈接：webpack實(shí)戰(zhàn)，原...

cyrils 2019-08-22 17:32 評論0 收藏0
寫一個(gè) Chrome 擴(kuò)展之 Flat Weibo —— 簡潔你的微博世界

摘要：一般而言，擴(kuò)展會(huì)對用戶瀏覽的頁面進(jìn)行相應(yīng)的操作和一些數(shù)據(jù)傳遞，本案例的本質(zhì)是，當(dāng)用戶瀏覽網(wǎng)頁版微博時(shí)，擴(kuò)展會(huì)向當(dāng)前頁面注入預(yù)先寫好的，這樣便對微博網(wǎng)頁版進(jìn)行了樣式重構(gòu)。采用這樣的方法依次處理所有你不想看到的元素，你的微博便會(huì)簡潔很多。 0x00. 前言微博現(xiàn)在也是變得越來越臃腫，廣告越來越多，早已不再是微博了，這讓微博深度用戶的我感到十分焦灼。由于之前就嘗試寫過 Chrome 插件，...

fredshare 2019-08-19 17:59 評論0 收藏0
Javascript模塊全攬

摘要：要求模塊編寫必須在真正的代碼之外套上一層規(guī)定的代碼包裝，樣子看起來是這樣的模塊代碼通過傳遞一個(gè)簽名為的回調(diào)函數(shù)給函數(shù)，就可以把需要注入的變量和函數(shù)注入到模塊代碼內(nèi)。之前寫的文章急速Js全棧教程得到了不錯(cuò)的閱讀量，霸屏掘金頭條3天，點(diǎn)贊過千，閱讀近萬，甚至還有人在評論區(qū)打廣告，可見也是一個(gè)小小的生態(tài)了；）?？磥砗蚃S全棧有關(guān)的內(nèi)容，還是有人頗有興趣的。 showImg(https://...

lily_wang 2019-08-23 11:41 評論0 收藏0
某網(wǎng)站高度加密混淆的javascript的分析

摘要：前言對某網(wǎng)站加密混淆后的代碼也算分析了一段時(shí)間了，雖然還沒搞出來，但多少有些心得，這里記錄一下。因此，應(yīng)該將局部變量也替換成唯一且更有意義的名字，比如函數(shù)名變量索引因此，正確的方法是基于編譯原理進(jìn)行語法級(jí)別的替換。 showImg(https://segmentfault.com/img/remote/1460000018765904); 前言對某網(wǎng)站加密混淆后的javascript...

newsning 2019-08-23 14:20 評論0 收藏0