如何構建 Chrome 擴展程序

已發表: 2022-02-24

雖然現在似乎所有東西都有一個擴展，但對於一個人來說，為特定目的或需要尋找一個瀏覽器擴展並不是不可能的。建造一個有多複雜？您將在下面找到有關如何創建 Chrome 擴展程序的分步指南：

第 1 步：要求

開始前的兩個注意事項：

雖然這對大多數人來說似乎很明顯，但在 Google Chrome 本身中構建您的擴展程序很重要。
在此過程中測試您的工作。邊走邊修正編碼錯誤比完成後回頭更容易。

在開始之前，您需要確定擴展的功能。它將服務於什麼目的？關注受眾的興趣和問題，這樣您就可以清楚地定義您可以提供什麼樣的解決方案。

一旦你覆蓋了這個，檢查設計。每個上傳到 Google Chrome 商店的擴展程序都需要一個圖標。您可以自己創建或外包設計。一旦你有了你的圖標，你就可以開始構建你的擴展了。

第 2 步：構建模塊

與每個軟件一樣，擴展名將包含多個文件。因此，您需要做的第一件事是創建一個目錄來存放您的所有擴展文件。

目錄是在您的計算機上存儲文件的位置。 任何具有分層文件結構的操作系統，例如 MS-DOS、OS/2 或 Linux，都有一個文件目錄。

為什麼需要目錄？因此，當 Chrome 加載您的擴展程序時，您可以從正確的文件夾中提取文件。

manifest.json 文件

接下來，您需要創建擴展的清單文件。

清單是通知操作系統如何啟動程序的文件。 清單文件中的設置始終使用 XML 語言指定。清單通常用於包括權限等設置，通知操作系統程序將使用哪個版本的 DLL。

對於您的擴展程序，清單文件將為 Chrome 提供加載擴展程序的說明。

創建清單文件

在 Chrome 中，創建一個名為manifest.json的文件並將其添加到您的目錄中。 將您需要的代碼添加到清單文件中。然後添加以下代碼：

{
“名稱”：“入門示例”，
“描述”：“構建一個擴展！”，
“版本”：“1.0”，
“清單版本”：3
}

擴展的權限取決於擴展功能。您可以在 Chrome 擴展文檔中找到所有權限及其含義的列表。

彈出頁面

如果您的網站需要彈出窗口，您應該將其添加到您的代碼中。

在清單文件中使用browser_action指定文件的名稱。
使用 HTML 或 CSS 構建彈出頁面。您可以使用 SVG 添加圖像。
使用 JavaScript 向彈出窗口添加功能。指定 JavaScript 文件並將其鏈接到您的彈出文件中。例如：
您可以創建功能並訪問彈出 DOM。這是一個如何做到這一點的例子。

document.addEventListener(“DOMContentLoaded”, () => {

var button = document.getElementById(“提交”)
button.addEventListener(“點擊”, (e) => {
控制台.log(e)
})
})

內容腳本

content_script 部分定義了擴展應該在哪里工作。如果您希望擴展程序在所有站點上工作，您應該編寫：

“內容腳本”：[
{
“匹配”：[“<all_urls>”]，
“css”：[“background.css”]，
“js”：[“background.js”]
}
],

如果您希望擴展程序在單個站點上工作，例如 Facebook，您應該添加 [“https://facebook.com/*”]

活動頁面

事件是一個對象，它使您能夠在有趣的事情發生時得到通知。例如，您可以使用 chrome.alarms.onAlarm 事件在警報到期時收到通知。

chrome.alarms.onAlarm.addListener（函數（警報）{
appendToLog('alarms.onAlarm -'
+ ' 名稱：' + 警報名稱
+ ' scheduleTime: ' + alarm.scheduledTime);
});

您可以在 Chrome 文檔中了解有關活動頁面的更多信息

內容.js

內容腳本是作為瀏覽器擴展一部分的 JavaScript 文件。內容腳本比普通的 javascript 擁有更多的權限。

第 3 步：從 Chrome 擴展彈出窗口中打開一個彈出 HTML 文件

如果您在本機 chrome 擴展程序中放置一個按鈕，那麼當您單擊此按鈕時，您可以在不同的內容中製作另一個 HTML 彈出窗口。這是 StackOverflow 上的一個示例：

manifest.json：

{
“名稱”：“備忘單”，
“描述”：“備忘單擴展”，
“版本”：“1.0”，
“manifest_version”：3，
“背景”： {
“service_worker”：“background.js”
},
“權限”：[“存儲”、“活動標籤”、“腳本”、“標籤”]、
“行動”： {
“default_popup”：“popup.html”，

“默認圖標”：{
“16”: “/images/get_started16.png”,
“32”：“/images/get_started32.png”，
“48”：“/images/get_started48.png”，
“128”：“/images/get_started128.png”
}
},
“圖標”：{
“16”: “/images/get_started16.png”,
“32”：“/images/get_started32.png”，
“48”：“/images/get_started48.png”，
“128”：“/images/get_started128.png”
}
}

popup.html：
<!DOCTYPE html>
<html>
<頭部>
<link rel=”stylesheet” href=”style.css”>
</head>
<正文>
<button id=”git_Sheet”>git 表格</button>
<script src=”popup.js”></script>
</正文>
</html>

和 popup.js 文件：

讓 gitSheet = document.getElementById(“git_Sheet”); gitSheet.addEventListener(“點擊”, async () => { 讓
= 等待 chrome.tabs.query({ active: true, currentWindow: true }); chrome.scripting.executeScript({ target: { tabId: tab.id }, function: ShowGitSheet, }); }); 函數 ShowGitSheet() { chrome.browserAction.openPopup({ popup: “git_popup.html” }); }

提示：如果您希望 Firefox 以外的其他瀏覽器運行您的擴展程序，請使用 chrome.windows.create({url: '...', type: 'popup'}) 而不是 chrome.browserAction.openPopup。

第 4 步：在 Chrome 中安裝擴展程序後檢查錯誤

完成構建階段後，就該測試擴展程序以確保 Chrome 能夠運行它了。要加載您的擴展程序並開始調試，請執行以下步驟：

在 Google Chrome 瀏覽器中打開 chrome://extensions。
通過選中右上角的開發人員框來設置開發人員模式。
單擊“加載解壓縮的擴展程序”，您將看到您的文件，其中包含選擇它的選項。
如果您的擴展程序有效，它應該在您選擇它時立即加載。
如果它無效，您將看到一條錯誤消息。

編寫代碼時，最常見的錯誤是語法錯誤。因此，第一件事是再次檢查所有逗號和括號是否位於正確的位置和正確的格式。

然後，確保選中“啟用”框，以便您可以看到它正在運行。

第 5 步：將邏輯添加到行動中。

一個好的經驗法則是將 API 調用放在後台腳本中，將 DOM 操作放在內容腳本中。讓我們看一個添加後台腳本的示例：

在擴展目錄中創建名為background.js的文件
在清單中註冊後台腳本

{
“名稱”：“入門示例”，
“描述”：“構建一個擴展！”，
“版本”：“1.0”，
“manifest_version”：3，
“背景”： {
“service_worker”：“background.js”

}
}

當您重新加載擴展程序（例如事件）時，Chrome 可以掃描文件以獲取額外說明。

添加腳本。根據您擴展的目的，它會有所不同。

為了幫助您的擴展在安裝時獲取信息，您應該在後台腳本中包含 runtime.onInstalled 的偵聽事件。然後，onInstalled 偵聽器使用存儲 API 獲取值，因此擴展組件可以訪問該值並對其進行更新。

// 背景.js
讓顏色 = '#3aa757';
chrome.runtime.onInstalled.addListener(() => {
chrome.storage.sync.set({ 顏色 });
console.log('默認背景顏色設置為 %cgreen', `color: ${color}`);
});

在 Google Chrome 開發者網站上詳細了解後續步驟。這包括如何創建用戶界面和圖標以及建立一些層邏輯以增強用戶交互。

像往常一樣，要開始設計界面，您需要在清單文件中註冊一個瀏覽器操作。例如，如果您使用彈出窗口，代碼可能如下所示：

<!DOCTYPE html>
<html>
<頭部>
<link rel=”stylesheet” href=”button.css”>
</head>
<正文>
<button id=”changeColor”></button>
</正文>
</html>

圖標的要求是什麼？ 對於圖像，16×16 和 32×32 像素。所有圖標都應該是方形的。

不要忘記添加您的邏輯腳本，以便您的擴展程序知道該做什麼。 例如，您可以將其添加到 popup.js 腳本的末尾。

// 單擊按鈕時，將 setPageBackgroundColor 注入當前頁面
changeColor.addEventListener(“點擊”, async () => {
讓
= 等待 chrome.tabs.query({ active: true, currentWindow: true });
chrome.scripting.executeScript({
目標：{ tabId：tab.id }，
功能：設置頁面背景顏色，
});
});
// 這個函數的主體將作為內容腳本在裡面執行
// 當前頁面
函數 setPageBackgroundColor() {
chrome.storage.sync.get(“color”, ({ color }) => {
document.body.style.backgroundColor = 顏色；
});
}
函數 setPageBackgroundColor() {
chrome.storage.sync.get(“color”, ({ color }) => {
document.body.style.backgroundColor = 顏色；
});

第 6 步：試用您的擴展程序

下一步是合乎邏輯地持續測試擴展，這樣您就可以確保一切正常運行。如果您將測試外包，請藉此機會檢查界面的直觀程度。根據測試結果，調整你的腳本，然後再次測試。

第 7 步：向 Chrome 網上應用店提交您的擴展程序

對擴展程序感到滿意後，您可以前往 Chrome 網上商店並提交它。

在 Chrome 開發者商店中，點擊New item ，然後將項目文件拖放到上傳器中。

Chrome 會詢問一些問題，以請求有關其權限以及為什麼需要這些權限的信息。

谷歌瀏覽器擴展示例

似乎一切都有擴展。以下是一些最有用的：

保存到雲端硬盤
此擴展程序在瀏覽器頂部安裝了一個小圖標。它會將您正在瀏覽的任何內容髮送到您的驅動器帳戶，以便您稍後查看。它通過截屏、保存圖像、音頻或視頻來工作。
排序
該插件為用戶提供了一種組織收件箱並確定對他們最重要的內容的優先級的方法。它與 Gmail 集成，使您能夠將郵件拖放到自定義列中。
HTTPS 無處不在
此擴展通過將任何網站從 http 更改為安全 HTTPS 來增強您瀏覽的安全性，因此它是加密和安全的。
我不在乎餅乾
每個網站都要求您同意 cookie，此擴展程序是救命稻草。它可能看起來不多，但會在 cookie 彈出窗口上點擊同意按鈕。它將節省您的時間並提高您的工作效率。
速度測試

這個有用的擴展可以讓你在旅途中檢查你的連接速度。使用桌面和移動版本，您可以在下載大型附件或流式傳輸視頻之前確保您的連接處於最佳狀態。
只需單擊一下，Speedtest 就會對您正在使用的網絡進行快速連接測試。

您的 Chrome 擴展程序可以做什麼？

定制擴展是執行單個任務的軟件程序。話雖如此，您可以包含多個功能，但請記住，一切都需要運行才能實現相同的目的。

Chrome 擴展通過使用頁面操作或瀏覽器操作來工作：

頁面操作：這是特定於某些頁面的操作。

瀏覽器操作：無論您在哪個頁面上都是相關的。

確保用戶界面用戶友好且易於理解。最終交付物將是用戶可以下載和安裝的軟件包。

5 種久經考驗的從擴展中賺錢的方法

擴展的主要目標是產生收入。一旦定義了目標受眾以及他們將如何使用擴展程序，您就可以製定如何從中賺錢的策略。我們編寫了關於擴展貨幣化的詳盡指南。以下是一些亮點：

1. 應用內廣告

應用內廣告是通過擴展獲利的最常見方式之一。這些是在用戶使用您的擴展程序時向他們展示的廣告。當您通過程序化解決方案通過應用內廣告獲利時，它會輪換廣告。與靜態廣告不同，此技術可幫助您最大限度地發揮潛力。通過使用展示廣告，您可以混合不同類型的廣告。

CodeFuel 用戶可以最大化他們的收益並簡化他們的貨幣化，因為該服務會顯示與用戶意圖相關的廣告。

立即使用 CodeFuel 開始通過您的擴展獲利。

2. 搜索廣告

這是一種將廣告放置在搜索引擎結果頁面上的策略。因為廣告會在人們尋找某物時出現，所以不會影響用戶體驗。您可以根據用戶意圖自定義搜索廣告，從而增強用戶體驗。

3. 應用內支付和購買

在此模型中，擴展是免費的，但您需要為內部功能付費。應用內購買在遊戲應用程序和擴展程序中很常見。用戶選擇是否要添加額外的付費功能。

4. 付費升級

同樣，在此模型中，基本擴展是免費提供的，但如果用戶想要高級版本，則需要為升級版本付費。這是一個非常常見的模型，被像 Grammarly 這樣的流行擴展使用。

5. 免費增值

這可能是擴展和應用程序最流行的貨幣化模式。通過免費增值，您可以免費提供擴展。你如何從中賺錢？你有幾個選擇：

您可以在有限的時間內提供免費試用。
您可以提供功能有限的免費基本版本。

如果您選擇此模型，請考慮其限制，因為 Google 已停止付費擴展。

谷歌瀏覽器最好的安全擴展：

大多數人使用 Chrome 進行從購物、搜索到管理財務賬戶的所有事情。所有這些敏感數據都需要保護。有幾個擴展可以使這些信息保持安全。

1. Avast 在線安全

此擴展將通過多種功能涵蓋您的網絡瀏覽的安全性。它的網絡釣魚攻擊保護掃描任何網頁的元素，並檢測該頁面是假的還是可疑的。 其他有價值的功能包括使用社區評級系統來檢測危險站點。

2. 模糊

有許多可用的密碼管理器，這是確保所有憑據安全的必要條件。 Blur 是最安全的一種，因為它具有額外的安全功能。

Blur加密、保存和管理您的密碼。它還會從購物網站隱藏您的信用卡信息，並阻止所有類型的跟踪器，包括非 cookie 的跟踪器。

3.點擊並清理

它是一種清理工具，只需單擊一下即可清除您在線活動的所有痕跡。 擴展按鈕將清除所有在線歷史記錄、cookie、緩存、保存的 URL、Web SQL 數據庫，甚至是臨時文件。 Click and Clean 具有內置的反惡意軟件，甚至可以自定義刪除某些類型的數據。

4.緊急按鈕

此擴展程序可幫助您通過單擊關閉所有已打開的內容。如果您正在處理敏感的事情並且未經授權的人靠近，這將很有幫助。單擊緊急按鈕時，所有選項卡將立即關閉並存儲在書籤文件夾中。

5.幽靈

如果您想保護您的在線隱私或控制跟踪器，此擴展程序可以成為解決方案。 Ghostery 可讓您控制跟踪器，以便您決定阻止或取消阻止哪些跟踪器。它還使您能夠阻止對特定類型的跟踪。

CodeFuel 如何幫助您最大限度地提高擴展的產量

使用 CodeFuel 將您的擴展貨幣化提升到一個新的水平。我們完整的貨幣化平台為您的數字資產（包括瀏覽器擴展）提供基於意圖的貨幣化。

該解決方案利用機器學習為用戶提供高度相關的購物和文字廣告，並根據意圖進行定制。與其他解決方案不同，CodeFuel 使您能夠靈活地使用多個廣告網絡，例如 Bing 和 GoogleAdSense。立即開始使用 CodeFuel 最大限度地提高您的擴展產量。

如果 Chrome 擴展程序凍結，如何修復它？

您正在使用 Chrome 擴展程序，突然瀏覽器凍結。多麼令人沮喪。這並不常見，但它會發生。如果 Chrome 崩潰或死機，您將收到一條說明錯誤類型的錯誤消息，例如代理錯誤或網頁不可用。

Chrome 幫助列出了許多故障排除提示：

關閉其他選項卡和應用程序
重啟瀏覽器
檢查惡意軟件
測試網絡是否存在問題
如果您的擴展程序導致與 Chrome 發生衝突，請按照以下說明操作：

點擊右上角的更多 設置。
在底部，單擊高級。
單擊重置並清理 更新或刪除不兼容的應用程序。
如果您沒有看到此選項，則說明應用程序沒有問題。
決定是否要更新或刪除列表中的每個應用程序。
打開計算機的應用商店並檢查更新。

常問問題

您可以向用戶收取 Chrome 擴展程序的費用嗎？
2020 年，谷歌關閉了 Chrome Web Store 上的付費 Chrome 擴展程序。這意味著您不再可以在 Chrome 商店中為您的擴展程序收費。您可以使用其他平台。
Chrome 擴展程序是否收費？
2020 年，谷歌關閉了 Chrome Web Store 上的付費 Chrome 擴展程序。這意味著您不再可以在網上商店中為您的擴展程序收費。您可以使用其他平台。
如何發布 Chrome 擴展程序？
準備好擴展程序後，請按照以下說明將其發佈到 Chrome 商店：
1. 創建您的 zip 文件
2. 創建並設置開發者帳戶
3. 上傳擴展
4. 為您的列表添加資產
5. 提交您的項目以進行發布
如何改善用戶體驗並獲得更多轉化？
這是一個遠離此問題範圍的廣泛主題，但這裡有一些基本原則：
1. 保持擴展的導航簡單
2. 提供良好的客戶支持
3. 讓您的擴展易於使用
4. 確保它不會增加瀏覽器內存消耗
5. 簡化 Google 用戶的登錄
哪些技術用於為 Chrome 編寫擴展程序？
擴展由不同的組件組成，使用多種 Web 開發技術創建。最流行的是 HTML、CSS 和 JavaScript。
擴展程序可以在呈現的網頁之外創建 UI 嗎？
根據 Chrome 開發者的頁面，是的，擴展程序可能會在瀏覽器界面中添加按鈕。擴展程序還可以創建彈出通知。
擴展可以修改 chrome:// 網址嗎？
根據定義，擴展通過使用 API 來修改瀏覽器行為來擴展瀏覽器。由於它們是基於網絡技術構建的，它們在單獨的執行環境中運行並與 Chrome 瀏覽器交互。
如何為我的擴展構建 UI？