歡迎來到我的博客，代碼的世界里，每一行都是一個故事

🎏：你只管努力，剩下的交給時間

🏠 ：小破站

前言

在日常的網頁瀏覽中，我們常常會打開多個相同域名的頁面，特別是在進行某些重復性工作或者瀏覽新聞網站時，這種情況尤為常見。手動關閉這些頁面既費時又費力。為了解決這個問題，我們可以開發一個簡單的谷歌插件，實現一鍵關閉所有同域名的頁面，極大地提升瀏覽效率。本文將帶你一步一步完成這個插件的開發過程。

項目結構

創建一個新的文件夾，如close-same-domain-tabs，并在其中創建以下文件：

mainfest.json

下面是manifest.json文件中常見字段的詳細講解：

1. manifest_version

"manifest_version": 3

• 描述：指定清單文件的版本。目前，Chrome瀏覽器支持兩個版本：2和3。推薦使用最新的版本3，因為它包含了安全性和性能的改進。

2. name

"name": "Close Same Domain Tabs"

• 描述：插件的名稱，將顯示在Chrome擴展管理頁面和插件商店中。

3. version

"version": "1.0"

• 描述：插件的版本號，必須是三段式（major.minor.patch），每次更新插件時需要增加版本號。

4. description

"description": "一鍵關閉所有同域名的頁面"

• 描述：插件的簡短描述，向用戶說明插件的用途。

5. permissions

"permissions": ["tabs"]

• 描述：插件運行時所需的權限。tabs權限允許插件訪問和操作瀏覽器中的標簽頁。
• 常見權限：
  • "activeTab"：當前活動標簽的權限。
  • "storage"：訪問插件的本地存儲。
  • "http://*/*"和"https://*/*"：訪問所有HTTP和HTTPS網址。

6. background

"background": {"service_worker": "background.js"
}

• 描述：定義插件的后臺腳本。后臺腳本在插件加載時運行，用于處理插件的核心邏輯。
• 字段：
  • service_worker：指定背景腳本文件（僅在Manifest V3中使用）。
  • scripts：指定背景腳本文件（用于Manifest V2）。

7. action

"action": {"default_popup": "popup.html","default_icon": {"16": "icon16.png","48": "icon48.png","128": "icon128.png"}
}

• 描述：定義插件的圖標和彈出頁面。
• 字段：
  • default_popup：指定點擊插件圖標時顯示的HTML文件。
  • default_icon：指定插件圖標的不同尺寸。

8. icons

"icons": {"16": "icon16.png","48": "icon48.png","128": "icon128.png"
}

• 描述：定義插件的圖標。
• 字段：
  • 16、48、128：分別表示16x16、48x48和128x128像素的圖標文件路徑。

9. optional_permissions

"optional_permissions": ["tabs"]

• 描述：定義可選權限，用戶可以在運行時選擇授予或不授予這些權限。

10. content_scripts

"content_scripts": [{"matches": ["<all_urls>"],"js": ["content.js"]}
]

• 描述：定義內容腳本，注入到指定頁面中。
• 字段：
  • matches：指定內容腳本匹配的URL模式。
  • js：指定注入的JavaScript文件。

11. options_page

"options_page": "options.html"

• 描述：指定插件的選項頁面，用戶可以在擴展管理頁面中訪問。

12. browser_action

"browser_action": {"default_popup": "popup.html","default_icon": {"16": "icon16.png","48": "icon48.png","128": "icon128.png"}
}

• 描述：用于定義瀏覽器操作（類似于action，但在Manifest V2中使用）。

13. web_accessible_resources

"web_accessible_resources": [{"resources": ["popup.html"],"matches": ["<all_urls>"]}
]

• 描述：定義插件中的哪些資源可以從網頁中訪問。

14. content_security_policy

"content_security_policy": {"extension_pages": "script-src 'self'; object-src 'self'"
}

• 描述：定義內容安全策略，確保插件的安全性。

通過了解這些字段及其用途，你可以更好地理解和配置manifest.json文件，從而創建功能豐富且安全的Chrome插件。

backgroud.js

在谷歌插件開發中，background.js 扮演著非常重要的角色，它主要用于處理插件的后臺邏輯和事件監聽。讓我們詳細地了解一下它在谷歌插件中的作用：

1. 作為后臺頁面運行

谷歌插件中的 background.js 作為一個后臺頁面，始終在插件安裝后運行，并且可以持續監聽和處理事件，即使用戶沒有直接與插件的界面交互也可以執行任務。

2. 擴展功能的初始化和處理

• 初始化任務：通過 chrome.runtime.onInstalled.addListener 監聽器，可以在插件安裝時執行初始化任務，如設置默認值、注冊默認設置等。

• 事件處理：使用 chrome.action.onClicked.addListener 監聽器，可以捕獲用戶點擊插件圖標的事件，并執行相應的操作。

3. 管理和控制標簽頁

• 查詢標簽頁：通過 chrome.tabs.query 方法，可以獲取當前窗口中的所有標簽頁，從而實現對標簽頁的管理和操作。

• 關閉標簽頁：使用 chrome.tabs.remove 方法可以關閉指定的標簽頁，這在插件需要根據特定邏輯自動關閉標簽頁時特別有用。

4. 監聽和響應外部消息

• 消息通信：可以通過 chrome.runtime.onMessage.addListener 監聽器來接收來自其他插件頁面或者內容腳本的消息，實現插件內部的通信和協調。

• 與內容腳本的交互：通過 chrome.runtime.connect 和 chrome.runtime.onConnect.addListener 方法，可以與內容腳本建立長連接，實現跨頁面的數據傳輸和操作。

5. 實現長時間運行的任務

由于 background.js 是作為一個后臺頁面運行的，它可以長時間保持活動狀態，處理復雜的任務和邏輯，比如監控網絡請求、數據持久化、周期性的任務等，這些任務通常是用戶界面不可見的但對插件功能至關重要的部分。

6. 優化資源使用

谷歌瀏覽器對每個插件運行的后臺頁面有資源使用限制，background.js 的設計需要考慮到優化資源使用，避免長時間占用過多的內存和CPU，以確保不影響用戶的瀏覽體驗。

項目實現

• 打開chrome://extensions/。

• 點擊“加載已解壓的擴展程序”按鈕，選擇項目文件夾。

• 插件加載后，在瀏覽器工具欄會出現插件的圖標。

• 點擊圖標，彈出窗口將出現，點擊“關閉所有同域名頁面”按鈕，測試插件功能。

效果展示

展望

如有需要可以關注下方公眾號回復google-close-domain獲取