🎏：你只管努力，剩下的交给时间
🏠 ：小破站
谷歌插件之一键关闭同域名页面
- 前言
- 项目结构
- `mainfest.json`
- `backgroud.js`
- 项目实现
- 效果展示
- 展望
前言
在日常的网页浏览中，我们常常会打开多个相同域名的页面，特别是在进行某些重复性工作或者浏览新闻网站时，这种情况尤为常见。手动关闭这些页面既费时又费力。为了解决这个问题，我们可以开发一个简单的谷歌插件，实现一键关闭所有同域名的页面，极大地提升浏览效率。本文将带你一步一步完成这个插件的开发过程。
项目结构
创建一个新的文件夹，如close-same-domain-tabs，并在其中创建以下文件：
mainfest.json
下面是
manifest.json文件中常见字段的详细讲解：
- manifest_version
"manifest_version": 3
- 描述：指定清单文件的版本。目前，Chrome浏览器支持两个版本：2和3。推荐使用最新的版本3，因为它包含了安全性和性能的改进。
- name
"name": "Close Same Domain Tabs"
- 描述：插件的名称，将显示在Chrome扩展管理页面和插件商店中。
- version
"version": "1.0"
- 描述：插件的版本号，必须是三段式（major.minor.patch），每次更新插件时需要增加版本号。
- description
"description": "一键关闭所有同域名的页面"
- 描述：插件的简短描述，向用户说明插件的用途。
- permissions
"permissions": ["tabs"]
- 描述：插件运行时所需的权限。
tabs权限允许插件访问和操作浏览器中的标签页。 - 常见权限：
"activeTab"：当前活动标签的权限。"storage"：访问插件的本地存储。"http://*/*"和"https://*/*"：访问所有HTTP和HTTPS网址。
- background
"background": {
"service_worker": "background.js"
}
- 描述：定义插件的后台脚本。后台脚本在插件加载时运行，用于处理插件的核心逻辑。
- 字段：
service_worker：指定背景脚本文件（仅在Manifest V3中使用）。scripts：指定背景脚本文件（用于Manifest V2）。
- action
"action": {
"default_popup": "popup.html",
"default_icon": {
"16": "icon16.png",
"48": "icon48.png",
"128": "icon128.png"
}
}
- 描述：定义插件的图标和弹出页面。
- 字段：
default_popup：指定点击插件图标时显示的HTML文件。default_icon：指定插件图标的不同尺寸。
- icons
"icons": {
"16": "icon16.png",
"48": "icon48.png",
"128": "icon128.png"
}
- 描述：定义插件的图标。
- 字段：
16、48、128：分别表示16x16、48x48和128x128像素的图标文件路径。
- optional_permissions
"optional_permissions": ["tabs"]
- 描述：定义可选权限，用户可以在运行时选择授予或不授予这些权限。
- content_scripts
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["content.js"]
}
]
- 描述：定义内容脚本，注入到指定页面中。
- 字段：
matches：指定内容脚本匹配的URL模式。js：指定注入的JavaScript文件。
- options_page
"options_page": "options.html"
- 描述：指定插件的选项页面，用户可以在扩展管理页面中访问。
- browser_action
"browser_action": {
"default_popup": "popup.html",
"default_icon": {
"16": "icon16.png",
"48": "icon48.png",
"128": "icon128.png"
}
}
- 描述：用于定义浏览器操作（类似于
action，但在Manifest V2中使用）。
- web_accessible_resources
"web_accessible_resources": [
{
"resources": ["popup.html"],
"matches": ["<all_urls>"]
}
]
- 描述：定义插件中的哪些资源可以从网页中访问。
- content_security_policy
"content_security_policy": {
"extension_pages": "script-src 'self'; object-src 'self'"
}
- 描述：定义内容安全策略，确保插件的安全性。
通过了解这些字段及其用途，你可以更好地理解和配置manifest.json文件，从而创建功能丰富且安全的Chrome插件。
backgroud.js
在谷歌插件开发中，background.js 扮演着非常重要的角色，它主要用于处理插件的后台逻辑和事件监听。让我们详细地了解一下它在谷歌插件中的作用：
- 作为后台页面运行
谷歌插件中的 background.js 作为一个后台页面，始终在插件安装后运行，并且可以持续监听和处理事件，即使用户没有直接与插件的界面交互也可以执行任务。
- 扩展功能的初始化和处理
-
初始化任务：通过
chrome.runtime.onInstalled.addListener监听器，可以在插件安装时执行初始化任务，如设置默认值、注册默认设置等。 -
事件处理：使用
chrome.action.onClicked.addListener监听器，可以捕获用户点击插件图标的事件，并执行相应的操作。
- 管理和控制标签页
-
查询标签页：通过
chrome.tabs.query方法，可以获取当前窗口中的所有标签页，从而实现对标签页的管理和操作。 -
关闭标签页：使用
chrome.tabs.remove方法可以关闭指定的标签页，这在插件需要根据特定逻辑自动关闭标签页时特别有用。
- 监听和响应外部消息
-
消息通信：可以通过
chrome.runtime.onMessage.addListener监听器来接收来自其他插件页面或者内容脚本的消息，实现插件内部的通信和协调。 -
与内容脚本的交互：通过
chrome.runtime.connect和chrome.runtime.onConnect.addListener方法，可以与内容脚本建立长连接，实现跨页面的数据传输和操作。
- 实现长时间运行的任务
由于 background.js 是作为一个后台页面运行的，它可以长时间保持活动状态，处理复杂的任务和逻辑，比如监控网络请求、数据持久化、周期性的任务等，这些任务通常是用户界面不可见的但对插件功能至关重要的部分。
- 优化资源使用
谷歌浏览器对每个插件运行的后台页面有资源使用限制，background.js 的设计需要考虑到优化资源使用，避免长时间占用过多的内存和CPU，以确保不影响用户的浏览体验。
项目实现
-
打开
chrome://extensions/。 -
点击“加载已解压的扩展程序”按钮，选择项目文件夹。
-
插件加载后，在浏览器工具栏会出现插件的图标。
-
点击图标，弹出窗口将出现，点击“关闭所有同域名页面”按钮，测试插件功能。
效果展示
展望
如有需要可以关注下方公众号回复google-close-domain获取
