在Web開發(fā)過程中，有時需要在特定網(wǎng)站的上下文中執(zhí)行腳本，比如收集網(wǎng)頁上顯示的數(shù)據(jù)、自動執(zhí)行諸如點擊按鈕等操作，或者修改網(wǎng)站的某些行為。通常的做法是登錄網(wǎng)站，打開DevTools中的控制臺，然后粘貼并執(zhí)行腳本。這種方法雖然直接，但存在一些不便之處。本文將介紹一種更高效的方法來在瀏覽器控制臺中執(zhí)行JavaScript模塊。

傳統(tǒng)方法的局限性

1. 代碼修改后需要重復(fù)從編輯器復(fù)制并粘貼到控制臺。
2. JavaScript模塊不能直接在瀏覽器控制臺中執(zhí)行。

雖然可以通過打包模塊來解決第二個問題，但反復(fù)的復(fù)制粘貼操作仍然令人煩惱，且容易出錯。

高效的模塊執(zhí)行方法

可以使用動態(tài)import來解決這些問題。具體步驟如下：

1.啟動HTTP服務(wù)器

使用Visual Studio Code的Live Server或node http-server等工具，從工作目錄提供文件服務(wù)。

2.在控制臺中使用動態(tài)導(dǎo)入

執(zhí)行類似import('http://localhost:5501/main.js')的語句。

3.更新代碼后的操作

在IDE中修改代碼后，刷新頁面，然后在控制臺中按上箭頭鍵回到之前執(zhí)行的語句，再按Enter鍵執(zhí)行。

示例代碼：

// main.js
import { innerText } from "./copy.js";

console.log(innerText(document.body));

這個示例腳本從打開的網(wǎng)站中提取文本。它在處理由自定義元素構(gòu)建的現(xiàn)代網(wǎng)站時特別有用。

但這種方法的不便之處在于，每次執(zhí)行前都必須重新加載網(wǎng)頁。一旦加載了模塊，就無法卸載或替換為新版本。要刪除之前加載的模塊，就必須重新加載網(wǎng)頁。

處理內(nèi)容安全策略（CSP）

上面還有一個小問題：** 內(nèi)容安全策略(CSP）**。為了說明 CSP 相關(guān)錯誤的處理方法和解決方案，這里創(chuàng)建了一個由四個專門模塊組成的示例腳本。

圖片

main.js依賴于其他模塊：

import { innerText } from "./copy.js";
 
console.log(innerText(document.body));

該腳本可從打開的網(wǎng)站中提取文本。例如，在一個信息量最大的網(wǎng)站https://chromestatus.com/newfeatures上有很多內(nèi)容，但 document.body.innerText 返回的卻是空字符串：

圖片

不能通過拖動或 Ctrl+A 選擇左欄中的文本。如果不使用基于腳本的特殊方法，則無法復(fù)制。

嘗試執(zhí)行上面 腳本來獲取頁面正文的 innerText，結(jié)果看到一條常見的錯誤信息：

圖片

Refused to load the script 'http://localhost:5501/main.js' because it violates the following Content Security Policy directive:

CSP 可防止外來腳本的執(zhí)行，所有正規(guī)網(wǎng)站都設(shè)置了 CSP。

解決方案是使用瀏覽器擴展來放寬CSP限制。例如，可以使用開源的"Anti-CORS, anti-CSP"擴展。

圖片

與網(wǎng)頁交互的腳本可以方便地在集成開發(fā)環(huán)境中開發(fā)，并在控制臺中執(zhí)行，無需復(fù)制和粘貼。

結(jié)束

通過動態(tài)導(dǎo)入和適當?shù)腃SP處理，可以顯著提高在瀏覽器控制臺中執(zhí)行JavaScript模塊的效率。這種方法不僅簡化了開發(fā)流程，還減少了潛在的錯誤，使得Web開發(fā)和調(diào)試過程更加流暢。對于需要頻繁在特定網(wǎng)站上執(zhí)行自定義腳本的開發(fā)者來說，這種技術(shù)尤其有價值。