建立內容腳本的初學者指南-js教程-PHP中文網

建立內容腳本的初學者指南

王林

發布： 2024-07-27 15:27:42

原創

788 人瀏覽過

瀏覽器擴充功能是瀏覽器的附加元件，用於為網站增添美感並提供最佳的使用者體驗。
擴充功能開發中的內容腳本概念是開發人員必須掌握的非常有用的知識，因為它顯著擴展了瀏覽器擴充功能的用例。

本文旨在介紹什麼是內容腳本以及它們如何運作。還有一個演示項目，其中將討論 chrome 擴充功能的基礎知識，並在我們的擴充中使用一個簡單的內容腳本。就這樣，我們開始吧。

了解內容腳本

首先，什麼是內容腳本？內容腳本是 JavaScript 程式碼，透過瀏覽器擴充功能與網頁互動時，執行這些程式碼來修改網頁。

它透過與網頁文件物件模型互動輕鬆實現這一點。網頁文檔物件模型是給定網頁的原始結構。 Chrome 內容腳本修改相關網頁的方式通常稱為注入。

對內容腳本進行了簡要介紹後，我們將繼續在我們的網頁上實現它。但在此之前，我們需要設定瀏覽器擴充功能來為腳本提供支援。

設定您的 Chrome 擴充功能

設定 Chrome 擴充功能非常簡單。如需進一步參考建置擴充功能，以下附有 Chrome 擴充功能文件頁面的連結。
理想的 Chrome 擴充功能必須包含詳細的 manifest.json 文件，該文件提供有關 Chrome 擴充功能的預設背景資訊。
此外，還包括要執行的相應 JS 檔案。其他附加檔案（HTML 和 CSS）有助於為擴充功能提供美感。
有了這個，讓我們繼續建立我們的擴展，合併我們的內容腳本注入。我們將透過建立一個 Chrome 擴充功能來說明內容腳本的強大功能，該擴充功能會在我們導航到的任何活動網頁上顯示一個按鈕。

編寫清單文件

在本節中，將突出顯示並討論清單檔案的各個部分。這是該項目清單文件的程式碼。

{
    "manifest_version": 3,
    "name": "Add Button",
    "version": "1.0",
    "description": "An extension that alerts a response when clicked",
    "permissions": ["activeTab"],
    "content_scripts": [
{
        "matches": ["<all_urls>"],
        "js": ["ContentScript.js"],
        "CSS": ["Button.css"]
}
]
}

登入後複製

清單版本： 通常會要求清單版本。預設情況下，它設定為 3。因為它比版本 2 有明顯更好的升級。
名稱： 副檔名也會在清單檔案中輸入。就我而言，該項目名為“添加按鈕”。可以對其進行調整以滿足使用者的偏好。
也輸入 Chrome 擴充功能的版本。在我們的例子中，這是該擴充功能的第一個版本，因此它被命名為 1.0，對該擴充功能的後續改進可以提示修改檔案以分別增加版本。
描述：對擴充功能的描述還可以讓擴充功能的非技術用戶相信 Chrome 擴充功能。

後續提出的觀點在建構內容腳本方面非常有說服力。

權限物件反白顯示內容腳本的執行路徑。這還可以防止內容腳本在意外的選項卡和網頁中運行。它允許我們列出 Chrome 擴充功能可能需要的所有權限。某些 Chrome 擴充功能可能需要存取瀏覽器儲存空間、其他 Chrome API 和某些相關網站。在我們的這個專案中，我們將 Chrome 擴充功能限制為僅使用正在使用的活動瀏覽器標籤。為了降低 Chrome 擴充功能損害 Chrome 瀏覽器其他未使用部分的風險，這一點非常重要。

然後我們將在清單檔案中配置內容腳本欄位。
內容腳本欄位指定我們打算注入網頁中的各種程式碼檔案。
它包含匹配子字段，該字段指定我們希望其執行操作的網頁 URL。為了方便使用，我們只包含了所有 URL，允許它在我們訪問的所有網頁上運行。不過，您可以指定要在子欄位值中註入的 URL。例如 www.google.com，

"matches": ["https://*.google.com/*"]
run_at": "document_idle

登入後複製

也指定了包含注入程式碼的JS檔。在我們的例子中，
我們的 JS 檔案名稱為 Content script.js。我們也指定了用於設計該項目樣式的 CSS 檔案。

這樣，我們就為我們的專案實作了清單檔案的微型實作。然後我們將在後續部分繼續編寫注入程式碼

建立內容腳本

本著保持簡單的精神，我們將創建一個簡單的按鈕，單擊該按鈕時會顯示一條警報訊息。該按鈕預計會覆蓋現有網頁。
下面是程式碼

// Create a button element
const button = document.createElement("button");

// Set the button's text content
button.textContent = "Click me";

// Set the button's ID
button.id = "clickMe";

// Append the button to the document body
document.body.appendChild(button);

// Add a click event listener to the button
button.addEventListener("click", () => {
  // Show an alert when the button is clicked
  alert("Click event listener was added");

  // Log a message to the console
  console.log("Hello world");
});

登入後複製

The styling can be changed to suit your preference however a styling template has been included in the code repository.

here is a picture of its implementation.

chrome extension
Here is the link to the source code containing the code styling.

Advanced Techniques and Use Cases

So far we have completed the project. However to advance one's knowledge, here are some of the advanced techniques and best practices you can also implement while building content scripts.