谷歌插件之页面标记

一只牛博

于 2024-07-16 12:26:58 发布

阅读量501

点赞数 6

分类专栏：插件文章标签：插件

本文链接：https://blog.csdn.net/Mrxiao_bo/article/details/140452034

版权

插件专栏收录该内容

2 篇文章 0 订阅

订阅专栏

欢迎来到我的博客，代码的世界里，每一行都是一个故事

🎏：你只管努力，剩下的交给时间

🏠 ：小破站

谷歌插件之页面标记

前言

你是否曾经在浏览网页时，发现了一篇非常有用的文章或者复杂的数据图表，但是随后又发现自己需要在其中标注、勾画或添加注释？今天，我们将介绍一款神奇的谷歌插件，它不仅让你在网页上任意使用画笔进行标注，还能帮助你快速捕捉灵感、整理思路，甚至和同事、朋友分享你的发现。让我们一起揭开这个功能的魔幻面纱，看看它究竟能为我们带来怎样的便利！

项目结构

创建一个新的文件夹，如page_annotation，并在其中创建以下文件：

`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 方法，可以与内容脚本建立长连接，实现跨页面的数据传输和操作。