谷歌插件之页面标记

前言

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

项目结构

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

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，以确保不影响用户的浏览体验。

项目展示