谷歌插件之一键关闭同域名页面

举报
一只牛博 发表于 2024/10/22 11:49:59 2024/10/22
【摘要】 本文将详细介绍如何开发一个谷歌插件,帮助用户一键关闭所有相同域名的页面。通过此插件,用户可以提高浏览器的使用效率,并深入了解Chrome扩展的开发流程。本文将从插件的功能需求、代码实现、打包发布等多个方面进行详细讲解。

前言

在日常的网页浏览中,我们常常会打开多个相同域名的页面,特别是在进行某些重复性工作或者浏览新闻网站时,这种情况尤为常见。手动关闭这些页面既费时又费力。为了解决这个问题,我们可以开发一个简单的谷歌插件,实现一键关闭所有同域名的页面,极大地提升浏览效率。本文将带你一步一步完成这个插件的开发过程。

项目结构

创建一个新的文件夹,如close-same-domain-tabs,并在其中创建以下文件:

mainfest.json

下面是manifest.json文件中常见字段的详细讲解:

  1. manifest_version
"manifest_version": 3
  • 描述:指定清单文件的版本。目前,Chrome浏览器支持两个版本:2和3。推荐使用最新的版本3,因为它包含了安全性和性能的改进。
  1. name
"name": "Close Same Domain Tabs"
  • 描述:插件的名称,将显示在Chrome扩展管理页面和插件商店中。
  1. version
"version": "1.0"
  • 描述:插件的版本号,必须是三段式(major.minor.patch),每次更新插件时需要增加版本号。
  1. description
"description": "一键关闭所有同域名的页面"
  • 描述:插件的简短描述,向用户说明插件的用途。
  1. permissions
"permissions": ["tabs"]
  • 描述:插件运行时所需的权限。tabs权限允许插件访问和操作浏览器中的标签页。
  • 常见权限
    • "activeTab":当前活动标签的权限。
    • "storage":访问插件的本地存储。
    • "http://*/*""https://*/*":访问所有HTTP和HTTPS网址。
  1. background
"background": {
  "service_worker": "background.js"
}
  • 描述:定义插件的后台脚本。后台脚本在插件加载时运行,用于处理插件的核心逻辑。
  • 字段
    • service_worker:指定背景脚本文件(仅在Manifest V3中使用)。
    • scripts:指定背景脚本文件(用于Manifest V2)。
  1. action
"action": {
  "default_popup": "popup.html",
  "default_icon": {
    "16": "icon16.png",
    "48": "icon48.png",
    "128": "icon128.png"
  }
}
  • 描述:定义插件的图标和弹出页面。
  • 字段
    • default_popup:指定点击插件图标时显示的HTML文件。
    • default_icon:指定插件图标的不同尺寸。
  1. icons
"icons": {
  "16": "icon16.png",
  "48": "icon48.png",
  "128": "icon128.png"
}
  • 描述:定义插件的图标。
  • 字段
    • 1648128:分别表示16x16、48x48和128x128像素的图标文件路径。
  1. optional_permissions
"optional_permissions": ["tabs"]
  • 描述:定义可选权限,用户可以在运行时选择授予或不授予这些权限。
  1. content_scripts
"content_scripts": [
  {
    "matches": ["<all_urls>"],
    "js": ["content.js"]
  }
]
  • 描述:定义内容脚本,注入到指定页面中。
  • 字段
    • matches:指定内容脚本匹配的URL模式。
    • js:指定注入的JavaScript文件。
  1. options_page
"options_page": "options.html"
  • 描述:指定插件的选项页面,用户可以在扩展管理页面中访问。
  1. browser_action
"browser_action": {
  "default_popup": "popup.html",
  "default_icon": {
    "16": "icon16.png",
    "48": "icon48.png",
    "128": "icon128.png"
  }
}
  • 描述:用于定义浏览器操作(类似于action,但在Manifest V2中使用)。
  1. web_accessible_resources
"web_accessible_resources": [
  {
    "resources": ["popup.html"],
    "matches": ["<all_urls>"]
  }
]
  • 描述:定义插件中的哪些资源可以从网页中访问。
  1. content_security_policy
"content_security_policy": {
  "extension_pages": "script-src 'self'; object-src 'self'"
}
  • 描述:定义内容安全策略,确保插件的安全性。

通过了解这些字段及其用途,你可以更好地理解和配置manifest.json文件,从而创建功能丰富且安全的Chrome插件。

backgroud.js

在谷歌插件开发中,background.js 扮演着非常重要的角色,它主要用于处理插件的后台逻辑和事件监听。让我们详细地了解一下它在谷歌插件中的作用:

  1. 作为后台页面运行

谷歌插件中的 background.js 作为一个后台页面,始终在插件安装后运行,并且可以持续监听和处理事件,即使用户没有直接与插件的界面交互也可以执行任务。

  1. 扩展功能的初始化和处理
  • 初始化任务:通过 chrome.runtime.onInstalled.addListener 监听器,可以在插件安装时执行初始化任务,如设置默认值、注册默认设置等。

  • 事件处理:使用 chrome.action.onClicked.addListener 监听器,可以捕获用户点击插件图标的事件,并执行相应的操作。

  1. 管理和控制标签页
  • 查询标签页:通过 chrome.tabs.query 方法,可以获取当前窗口中的所有标签页,从而实现对标签页的管理和操作。

  • 关闭标签页:使用 chrome.tabs.remove 方法可以关闭指定的标签页,这在插件需要根据特定逻辑自动关闭标签页时特别有用。

  1. 监听和响应外部消息
  • 消息通信:可以通过 chrome.runtime.onMessage.addListener 监听器来接收来自其他插件页面或者内容脚本的消息,实现插件内部的通信和协调。

  • 与内容脚本的交互:通过 chrome.runtime.connectchrome.runtime.onConnect.addListener 方法,可以与内容脚本建立长连接,实现跨页面的数据传输和操作。

  1. 实现长时间运行的任务

由于 background.js 是作为一个后台页面运行的,它可以长时间保持活动状态,处理复杂的任务和逻辑,比如监控网络请求、数据持久化、周期性的任务等,这些任务通常是用户界面不可见的但对插件功能至关重要的部分。

  1. 优化资源使用

谷歌浏览器对每个插件运行的后台页面有资源使用限制,background.js 的设计需要考虑到优化资源使用,避免长时间占用过多的内存和CPU,以确保不影响用户的浏览体验。

项目实现

  • 打开chrome://extensions/

  • 点击“加载已解压的扩展程序”按钮,选择项目文件夹。

  • 插件加载后,在浏览器工具栏会出现插件的图标。

  • 点击图标,弹出窗口将出现,点击“关闭所有同域名页面”按钮,测试插件功能。

效果展示

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。