如何創建自己的 Chrome 擴展程序

已發表: 2022-06-03

如果您可以充分利用您的瀏覽，該怎麼辦？ 了解如何製作您自己的 Google Chrome 擴展程序。

您是否曾經對您的網絡瀏覽器提供的功能不滿意？ 即使您已經花費數小時瀏覽 Google 在線商店，也並不總是像按“下載”來改善您的網絡瀏覽體驗那麼簡單。

這就是瀏覽器插件發揮作用的地方。 在本教程中，我們將了解如何從頭開始創建自己的 DIY Google Chrome 擴展程序。

什麼是 Google Chrome 擴展程序？

谷歌瀏覽器擴展主頁

現代瀏覽器（例如​​ Google Chrome）包含大量功能，使其易於使用並能夠滿足大多數用戶的需求。 但是，擴展這些基本功能可能具有多種優勢。 這就是瀏覽器製造商通常允許為其創建擴展、附加組件和插件的原因。

此功能在 Google Chrome 中可用，允許任何具有 Web 編程知識的人輕鬆構建自己的 Chrome 擴展程序。 與許多網站一樣，您可以使用 HTML、JavaScript 和 CSS 創建擴展。

與網站不同，擴展程序可能在您瀏覽時在後台運行，有時甚至與您訪問的網站進行交互。

我們的 Google Chrome 擴展程序將提供哪些功能？

我們將創建一個基本的 Chrome 擴展程序，允許您訪問 Make Use Of 網站並根據那裡可用的文章類別進行隨機搜索。 雖然這是一個簡單的項目，但您會學到很多東西。

你會發現如何做

  • 開發 Google Chrome 擴展程序
  • 使用 Chrome 擴展程序，將自定義代碼插入網頁。
  • 通過創建事件偵聽器來模擬點擊。
  • 產生隨機數
  • 使用數組和變量。

製作自己的 DIY Chrome 擴展程序

Google 讓開發您自己的 Chrome 擴展程序變得非常簡單，因此您可以立即啟動並運行。 以下說明僅需 10 到 15 分鐘即可完成，但我們也邀請您嘗試自己的代碼。

第 1 步：製作文件

製作文件

當您不想共享您的擴展程序時，您可以將其保留在本地系統上。 為了構建我們的擴展，我們只需要四個文件：一個 HTML 頁面、一個 CSS 文件、一個 JavaScript 文件和一個 JSON 文件。

Index.html、style.css、script.js 和 manifest.json 是我們為文件命名的名稱。 清單文件必須具有此名稱才能正常運行，但其他文件可以具有您選擇的任何名稱，只要您相應地修改代碼即可。

這些文件應該放在同一個根文件夾中。

第 2 步：創建清單文件

每個 Google Chrome 擴展程序都包含一個清單文件。 它通知 Chrome 擴展程序，同時還實現了一些基本設置。 名稱、版本號、描述和清單版本都必須包含在此文件中。 我們還提供了將 index.html 作為擴展的彈出窗口加載的權限和操作。

 { "name": "MakeUseOf.com Automated Search", "version": "1.0.0", "description": "A search tool to find interesting articles", "manifest_version": 3, "author": "Samuel Garbett", "permissions": ["storage", "declarativeContent", "activeTab", "scripting"], "host_permissions": [""], "action":{ "default_popup": "index.html", "default_title": "MUO Auto Search" } }

第 3 步：創建 HTML 和 CSS

在開始編寫腳本之前，我們必須首先使用 HTML 和 CSS 設計一個簡單的用戶界面 (UI)。 您可以使用像 Bootstrap 這樣的 CSS 庫來避免自己編寫，但我們的插件只需要一些規則。

HTML、head 和 body 標記都存在於我們的 index.html 文件中。 head 標籤包含頁面標題和指向樣式表的鏈接，而 body 包含 h1 標籤、指向 MakeUseOf.com 的鏈接以及另一個用作腳本觸發器的按鈕。 script.js文件包含在文檔末尾的腳本標記中。

 <html> <head> <title>MUO Auto Search</title> <meta charset="utf-8"> <link rel="stylesheet" href="style.css"> </head> <body> <h1>MUO Auto Search</h1> <a href="https://www.makeuseof.com/" target="_blank"><button>Go to MakeUseOf.com</button></a> <button>Start Random Search</button> </body> <script src="script.js"></script> </html>

我們的 CSS 文件比我們的 HTML 文件更簡單，因為它只改變了五個組件的樣式。 我們有 html 和 body 標籤，以及 h1 標籤和兩個按鈕的指南。

 html { width: 400px; } body { font-family: Helvetica, sans-serif; } h1 { text-align: center; } #buttonOne { border-radius: 0px; width: 100%; padding: 10px 0px; } #buttonTwo { border-radius: 0px; width: 100%; padding: 10px 0px; margin-top: 10px; }

第 4 步：創建 JavaScript

此過程的最後一步是創建我們的 script.js 文件。

此文件中的 insertScript()函數用於將另一個函數 ( autoSearch() ) 插入到當前頁面。 這使我們能夠編輯頁面並使用 MakeUseOf.com 網站上當前可用的搜索選項。

隨後是一個事件偵聽器，該偵聽器等到點擊開始隨機搜索按鈕，然後再運行前面討論的函數。

autoSearch()方法有點棘手。 它從一個包含 20 個 MUO 網站類別的數組開始，為我們提供了一個不錯的樣本來進行隨機搜索。 之後，我們使用Math.random()函數產生一個 0 到 19 之間的隨機整數來從我們的數組中選擇一個元素。

我們現在需要模仿一個按鈕點擊來打開 MUO 搜索框，其中包含我們的搜索詞。 我們首先利用 Chrome 開發者控制台獲取搜索按鈕的 ID，然後使用click()方法將其添加到 JavaScript 代碼中。

 // This method incorporates our autoSearch functionality into the page's code function insertScript() { // This chooses the operation's focused tab and invokes the autoSearch function chrome.tabs.query({active: true, currentWindow: true}, tabs => { chrome.scripting.executeScript({target: {tabId: tabs[0].id}, function: autoSearch}) }) // This closes the extension pop-up window that allows you to pick the website search bar window.close(); } // This is an event listener that detects when our "Start Random Search" button is clicked document.getElementById('buttonTwo').addEventListener('click', insertScript) // This code chooses a topic at random from an array and function autoSearch() { // This is an array in which we will store our search keywords const searchTerms = ["PC and Mobile", "Lifestyle", "Hardware", "Windows", "Mac", "Linux", "Android", "Apple", "Internet", "Security", "Programming", "Entertainment", "Productivity", "Career", "Creative", "Gaming", "Social Media", "Smart Home", "DIY", "Review"]; // This creates a number between 0 and 19 at random let selectorNumber = Math.floor(Math.random() * 20); // The random number is used to choose an element from the array let selection = searchTerms[selectorNumber]; // This mimics clicking on the MUO website search button document.getElementById("js-search").click(); // This variables the MUO website search bar var searchBar = document.getElementById("js-search-input"); // This enters our arbitrary search query into the search field searchBar.value = searchBar.value + selection; // The process is completed by activating the online form document.getElementById("searchform2").submit(); }

第 5 步：將文件上傳到 Chrome:/extensions

您剛剛生成的文件現在應該添加到 Chrome 擴展頁面。 之後，該擴展程序將在 Chrome 中可用，並且會在您對文件進行更改時自動更新。

將文件上傳到 Chrome

打開谷歌瀏覽器，導航到 chrome:/extensions，確保打開右上角的開發者模式滑塊。

打開谷歌瀏覽器

單擊左上角的Load Unpacked ，然後選擇包含您的擴展文件的文件夾，然後單擊Select Folder 。

點擊加載解壓

加載擴展程序後，單擊右上角的拼圖圖標將其固定到主任務欄以便更快地訪問。

您現在應該能夠在瀏覽器中看到完成的擴展程序。 需要注意的是，此擴展僅在 MUO 網站或使用相同 ID 作為搜索按鈕和欄的網站上運行。

創建 Google Chrome 擴展程序

這篇文章只是觸及了您可以合併到您自己的 Google Chrome 擴展程序中的功能的表面。 一旦掌握了基礎知識，絕對值得花時間嘗試自己的想法。

Chrome 擴展程序可以幫助您改善衝浪體驗，但要避免一些已知的粗略 Chrome 擴展程序，以獲得安全可靠的在線體驗。