將 Javascript 代碼注入 web 頁面

Question

我想將 web 頁面下載為 html 文件。 在將 web 頁面源代碼保存到 html 文件之前，我想先編輯一些頁面內容。 我假設我可以使用 Javascript 編輯內容。不幸的是我對 Javascript 沒有什么經驗。我想我必須將我的腳本注入 web 頁面以便瀏覽器可以一起執行它們。 我應該如何編寫腳本？ 我應該編寫一個獨立的腳本並將頁面 url 傳遞給我的腳本以便它們可以同時執行嗎？ 或者還有其他方法可以注入我的腳本？

編輯：為了弄清楚我的問題，請參閱這篇文章和這篇文章

Answer 1

由於您只是這樣做一次，從瀏覽器JavaScript控制台啟動腳本就足夠了。 打開開發人員工具，導航到控制台選項卡，粘貼腳本內容，然后按Enter鍵。

要獲取已編輯的HTML，請在控制台中評估表達式document.documentElement.outerHTML 。 將輸出復制到您選擇的文本編輯器，前面加上doctype，並將其另存為html。

Answer 2

如果你想將修改后的源碼保存為html，你可以使用不同的aproaches，取決於你想要主要的。 遺憾的是，使用javascript保存文件很棘手並且取決於很多東西，因此您可以使用選項手動復制粘貼文件源或編寫瀏覽器和設置特定的文件保護程序。 我更喜歡javascript + php組合解決方案。 或者，如果沒有必要用javascript操縱某些東西，我會完全在php中完成它。

第1步 - 使用控制台打開瀏覽器，使用chrome和firefox CTRL + SHIFT + J並允許彈出窗口。 第2步 - 打開您想要的網頁第3步 - 將下一個代碼復制到控制台

//Script loading function
function load_script( source ) {
    var new_script  = document.createElement('script');
    new_script.type = 'text/javascript';
    new_script.src = source;
    new_script.className = 'MyInjectedScript';
    document.getElementsByTagName('head')[0].appendChild(new_script);
}
function escapeHtml(unsafe) {
  return unsafe
      .replace(/&/g, "&amp;")
      .replace(/</g, "&lt;")
      .replace(/>/g, "&gt;")
      .replace(/"/g, "&quot;")
      .replace(/'/g, "&#039;");
}
//Load jQuery, if page do not have it by default
if (typeof(jQuery) != 'function') load_script('http://code.jquery.com/jquery-latest.js');

第4步 - 在控制台中進行操作

第5步 - 將下一個代碼復制到控制台

//In the end remove your injected scripts
$('.MyInjectedScript').remove(); //Or jquery script will be in source
//get Document source
var doc_source = $('html',document).html();
doc_source = '<html>'+doc_source+'</html>';


var new_window = window.open('', '', 'scrollbars=yes,resizable=yes,location=yes,status=yes');
$(new_window.document.body).html('<textarea id="MySource">'+escapeHtml(doc_source)+'</textarea>');

第6步 - 從打開的窗口textarea復制粘貼代碼

如果你想用PHP做，你可以輕松下載curl頁面並操縱內容並根據需要保存文件。

Answer 3

您可以使用像Requestly這樣的瀏覽器擴展在 web 頁面上注入自定義 Javascript/CSS 。

這就是您可以做到的。

請求下載並打開規則頁面
創建新規則並 Select 插入自定義腳本/CSS 規則類型
輸入您的域（或頁面 URL 模式）並定義您的腳本

屏幕截圖 - 插入腳本規則

如果您正在尋找跨瀏覽器解決方案，那么您可以使用Requestly Desktop App並類似地配置您的規則。

在您的特定情況下，您可以選擇一個選項，例如在頁面加載后運行腳本，以便所有 DOM 元素在您修改/注釋它們之前都出現在頁面上。

免責聲明 - 我按要求建造

將 Javascript 代碼注入 web 頁面

問題描述

3 個解決方案

解決方案1
2 已采納 2013-01-11 06:57:55

解決方案2
1 2013-01-11 08:01:07

解決方案3
-1 2022-02-12 04:47:07

屏幕截圖 - 插入腳本規則

將 Javascript 代碼注入 web 頁面

問題描述

3 個解決方案

解決方案1 2 已采納 2013-01-11 06:57:55

解決方案2 1 2013-01-11 08:01:07

解決方案3 -1 2022-02-12 04:47:07

屏幕截圖 - 插入腳本規則

解決方案1
2 已采納 2013-01-11 06:57:55

解決方案2
1 2013-01-11 08:01:07

解決方案3
-1 2022-02-12 04:47:07