谷歌插件开发学习指南

什么是谷歌插件

谷歌插件(Chrome Extension)是为谷歌浏览器(Chrome)开发的小程序,旨在增强浏览器的功能或用户体验。它们可以通过添加工具栏按钮、修改网页内容、集成其他服务等方式,实现各种功能,例如广告拦截、密码管理、社交媒体工具等。用户可以从 Chrome 网上应用店安装和管理这些插件,通常以简单易用的方式进行配置和使用。

谷歌插件官网API

https://developer.chrome.com/docs/extensions/reference/api?hl=zh-cn

基础构造

  • manifest.json:这是插件的配置文件,定义插件的基本信息、权限、入口等。 必须项
  • content-script:用于操作网页内容的脚本,可以直接与网页交互。在自己的作用域中运行,无法直接访问网页的变量和函数。
  • background:后台脚本,在浏览器后台运行,可监听和处理各种事件。
  • event-pages:类似于 background,但在空闲时会自动释放资源,节省内存。
  • popup:插件的弹出页面,通常在插件图标点击时显示,作为插件的用户界面。
  • injected js:直接注入到网页中的 JavaScript 脚本,在网页的上下文中运行,可以直接访问和操作网页的变量和函数。

五种js权限对比

JS种类可访问的APIDOM访问情况JS访问情况直接跨域
injected script和普通JS无任何差别,不能访问任何扩展API可以访问可以访问不可以
content script只能访问 extension、runtime等部分API可以访问不可以不可以
popup js可访问绝大部分API,除了devtools系列不可直接访问不可以可以
background js可访问绝大部分API,除了devtools系列不可直接访问不可以可以
devtools js只能访问 devtools、extension、runtime等部分API可以可以不可以

调试方式

JS类型调试方式图片说明
injected script直接普通的F12即可懒得截图
content-script打开Console,如图切换

popup-jspopup页面右键审查元素
background插件管理页点击背景页即可
devtools-js暂未找到有效方法-

互相通信概览

注:-表示不存在或者无意义,或者待验证。

injected-scriptcontent-scriptpopup-jsbackground-js
injected-script-window.postMessage--
content-scriptwindow.postMessage-chrome.runtime.sendMessage chrome.runtime.connectchrome.runtime.sendMessage chrome.runtime.connect
popup-js-chrome.tabs.sendMessage chrome.tabs.connect-chrome.extension. getBackgroundPage()
background-js-chrome.tabs.sendMessage chrome.tabs.connectchrome.extension.getViews-
devtools-jschrome.devtools. inspectedWindow.eval-chrome.runtime.sendMessagechrome.runtime.sendMessage

manifest.json 核心配置与解释

{
	// 清单文件的版本,这个必须写,2或者3  3是最新版本
	"manifest_version": 3,
	// 插件的名称
	"name": "demo",
	// 插件的版本
	"version": "1.0.0",
	// 插件描述
	"description": "简单的Chrome扩展demo",
	// 图标,一般偷懒全部用一个尺寸的也没问题
	"icons":
	{
		"16": "img/icon.png",
		"48": "img/icon.png",
		"128": "img/icon.png"
	},
	// 会一直常驻的后台JS或后台页面
	"background":
	{
		// 2种指定方式,如果指定JS,那么会自动生成一个背景页
		"page": "background.html"
		//"scripts": ["js/background.js"]
	},
	// 浏览器右上角图标设置,browser_action、page_action、app必须三选一
	"browser_action": 
	{
		"default_icon": "img/icon.png",
		// 图标悬停时的标题,可选
		"default_title": "这是一个示例Chrome插件",
		"default_popup": "popup.html"
	},
	// 当某些特定页面打开才显示的图标
	/*"page_action":
	{
		"default_icon": "img/icon.png",
		"default_title": "我是pageAction",
		"default_popup": "popup.html"
	},*/
	// 需要直接注入页面的JS
	"content_scripts": 
	[
		{
			//"matches": ["http://*/*", "https://*/*"],
			// "<all_urls>" 表示匹配所有地址
			"matches": ["<all_urls>"],
			// 多个JS按顺序注入
			"js": ["js/jquery-1.8.3.js", "js/content-script.js"],
			// JS的注入可以随便一点,但是CSS的注意就要千万小心了,因为一不小心就可能影响全局样式
			"css": ["css/custom.css"],
			// 代码注入的时间,可选值: "document_start", "document_end", or "document_idle",最后一个表示页面空闲时,默认document_idle
			"run_at": "document_start"
		},
		// 这里仅仅是为了演示content-script可以配置多个规则
		{
			"matches": ["*://*/*.png", "*://*/*.jpg", "*://*/*.gif", "*://*/*.bmp"],
			"js": ["js/show-image-content-size.js"]
		}
	],
	// 权限申请
	"permissions":
	[
		"contextMenus", // 右键菜单
		"tabs", // 标签
		"notifications", // 通知
		"webRequest", // web请求
		"webRequestBlocking",
		"storage", // 插件本地存储
		"http://*/*", // 可以通过executeScript或者insertCSS访问的网站
		"https://*/*" // 可以通过executeScript或者insertCSS访问的网站
	],
	// 普通页面能够直接访问的插件资源列表,如果不设置是无法直接访问的
	"web_accessible_resources": ["js/inject.js"],
	// 插件主页,这个很重要,不要浪费了这个免费广告位
	"homepage_url": "https://www.baidu.com",
	// 覆盖浏览器默认页面
	"chrome_url_overrides":
	{
		// 覆盖浏览器默认的新标签页
		"newtab": "newtab.html"
	},
	// Chrome40以前的插件配置页写法
	"options_page": "options.html",
	// Chrome40以后的插件配置页写法,如果2个都写,新版Chrome只认后面这一个
	"options_ui":
	{
		"page": "options.html",
		// 添加一些默认的样式,推荐使用
		"chrome_style": true
	},
	// 向地址栏注册一个关键字以提供搜索建议,只能设置一个关键字
	"omnibox": { "keyword" : "go" },
	// 默认语言
	"default_locale": "zh_CN",
	// devtools页面入口,注意只能指向一个HTML文件,不能是JS文件
	"devtools_page": "devtools.html"
}

简化的常用配置

1、name 扩展名称。

2、version 插件的版本。

3、manifest_version manifest配置文件版本。

4、description 对于插件功能的描述。

5、icons 插件的图标 可以为插件找一个好看的图标。

6、browser_action 可以定义插件的图标,点击插件时弹出的页面,以及插件的标题,建议始终保留一个,直接不设置这个属性图标会是灰色的,设置了后才会亮起来。

7、background 背景页,扩展进程的背景运行环境,可以拦截修改请求等等。

8、content_scripts 内容脚本,可以指定在什么时机向什么页面插入什么脚本或者css资源

9、permissions 权限申请项,比如存储权限storage,请求拦截权限webRequest, webRequestBlocking等等。
{
    "name" : "插件助手",
    "version" : "1.0",
    "description" : "允许跨域访问",
    "manifest_version" : 2,
    "icons": {
        "16": "images/ico-48.png",
        "48": "images/ico-48.png",
        "128": "images/ico-48.png"
    },
    "browser_action": {
        "default_title": "助手"
    },
    "permissions" : ["webRequestBlocking", "webRequest", "*://*/*"],
    "background" : {
        "scripts" : ["js/background.js"]
    }
}

content-script的说明

content-scripts和原始页面共享DOM,但是不共享JS,如要访问页面JS(例如某个JS变量),只能通过injected js来实现。content-scripts不能访问绝大部分chrome.xxx.api,除了下面这4种:

  • chrome.extension(getURL , inIncognitoContext , lastError , onRequest , sendRequest)
  • chrome.i18n
  • chrome.runtime(connect , getManifest , getURL , id , onConnect , onMessage , sendMessage)
  • chrome.storage

展现形式 -在manifest.json中配置对应的属性值

  • browserAction:在浏览器工具栏中添加一个图标,点击后可以弹出一个窗口。
  • pageAction:在特定页面显示图标,可以根据页面内容动态显示或隐藏。
  • contextMenu:在右键菜单中添加自定义选项。
  • override:替换浏览器内置的页面(例如新标签页)。
  • devtools:在开发者工具中添加自定义的工具或面板。
  • options:为插件提供设置页面,用户可以自定义插件行为。
  • omnibox:在浏览器地址栏输入特定关键字来触发插件功能。
  • notification:显示系统通知,提醒用户关注某些事件。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/905840.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

linux命令行的艺术

文章目录 前言基础日常使用文件及数据处理系统调试单行脚本冷门但有用仅限 OS X 系统仅限 Windows 系统在 Windows 下获取 Unix 工具实用 Windows 命令行工具Cygwin 技巧 更多资源免责声明 熟练使用命令行是一种常常被忽视&#xff0c;或被认为难以掌握的技能&#xff0c;但实际…

Puppeteer 与浏览器版本兼容性:自动化测试的最佳实践

Puppeteer 支持的浏览器版本映射&#xff1a;从 v20.0.0 到 v23.6.0 自 Puppeteer v20.0.0 起&#xff0c;这个强大的自动化库开始支持与 Chrome 浏览器的无头模式和有头模式共享相同代码路径&#xff0c;为自动化测试带来了更多便利。从 v23.0.0 开始&#xff0c;Puppeteer 进…

知识管理新选择!本地大模型助手“知我AI”全功能解析

抖知书老师推荐&#xff1a; 随着人工智能技术的飞速发展&#xff0c;本地大模型知识管理工具逐渐成为提高工作效率的利器。今天&#xff0c;我要向大家介绍一款名为**“知我AI”**的本地知识管理助手&#xff0c;它以其独特的功能和优势&#xff0c;正在成为众多专业人士的新…

Banana Pi BPI-R3路由器开发板运行 OrayOS物联网系统

近日&#xff0c;Banana PI开发板宣布与贝锐达成战略合作&#xff0c;贝锐OrayOS现已成功适配Banana PI的BPI-R3型号&#xff0c;并计划进一步扩展硬件支持&#xff0c;包括目前Banana PI热销的BPI-R4、BPI-R3 Mini等更多型号。这一合作为用户提供了更广泛的开发板选择&#xf…

No.24 笔记 | WEB安全 - 任意文件包含漏洞 part 6

在 Web 安全领域中&#xff0c;任意文件包含漏洞是一种较为常见且具有潜在危险性的漏洞类型。本文将详细介绍任意文件包含漏洞的概念、原理、分类、利用方法以及防护措施&#xff0c;帮助新手小白更好地理解和防范这一漏洞。&#x1f603; 一、概念 包含的定义 开发人员为了提…

森利威尔SL2516D 耐压60V内置5V功率MOS 支持PWM LED恒流驱动器芯片

一、基本特性 型号&#xff1a;SL2516D封装&#xff1a;ESOP8工作频率&#xff1a;140kHz驱动MOS管&#xff1a;内置 二、电气特性 输入电压范围&#xff1a;8V~100V&#xff08;注意&#xff0c;虽然问题中提到耐压60V&#xff0c;但根据官方信息&#xff0c;其实际耐压范围…

Vscode配置CC++编程环境的使用体验优化和补充说明

文章目录 快速编译运行&#x1f47a;code runner插件方案Code Runner Configuration 直接配置 相关指令和快捷键默认task配置和取消默认 配置文件补充介绍(可选 推荐阅读)&#x1f60a;使用vscode预置变量和环境变量环境变量的使用使用环境变量的好处环境变量可能引起的问题 检…

Linux中rpm包和yum仓库介绍及入门配置

rpm包概述 RPM Package Manager,RPM包管理器 由红帽公司提出&#xff0c;适用于Rocky Linux、Redhat、SUSE等系列操作系统 建立集中数据库&#xff0c;记录软件包安装/卸载等变化信息&#xff0c;分析软件包依赖关系 RPM包 文件名特征 软件名-版本信息.操作系统.硬件架/构.r…

L 波段射频信号采集回放系统

L 波段采集回放系统是一套便携式模拟数字采集系统&#xff0c;该系统主要由射频输入模块、中频接收回放模块、FPGA 信号处理单元、服务器系统和存储单元等组成。 L 波段采集回放系统的功能主要用于对 950MHz〜2150MHz 模拟量射频信号的采集、存储记录与回放&#xff1b;采集与…

百度如何打造AI原生研发新范式?

&#x1f449;点击即可下载《百度AI原生研发新范式实践》资料 2024年10月23-25日&#xff0c;2024 NJSD技术盛典暨第十届NJSD软件开发者大会、第八届IAS互联网架构大会在南京召开。本届大会邀请了工业界和学术界的专家&#xff0c;优秀的工程师和产品经理&#xff0c;以及其它行…

Unity3D 开发教程:从入门到精通

Unity3D 开发教程&#xff1a;从入门到精通 Unity3D 是一款强大的跨平台游戏引擎&#xff0c;广泛应用于游戏开发、虚拟现实、增强现实等领域。本文将详细介绍 Unity3D 的基本概念、开发流程以及一些高级技巧&#xff0c;帮助你从零基础到掌握 Unity3D 开发。 目录 Unity3D…

Vue3和Springboot前后端简单部署

一、Vue3Springboot 的前后端简单部署 (在win下面部署) 1、前端实现部署 思想: 前端打包项目后、放到nginx中进行部署 1、nginx 安装 和 解压 1、下载 nginx.zip win版本 解压就可以 2、解压后、启动程序 3、访问 nginx 欢迎页面 http://localhost/ 80 端口 可以省略 直接访…

中仕公考:2025四川省考今日报名!

2025年四川省考今日开始报名啦&#xff01;准备参加考试的广大考生们不要错过报名时间哦&#xff01; 报名时间&#xff1a; 2024年11月1日至7日上午8:00 资格审查&#xff1a; 2024年11月1日至8日上午8:00 确认缴费&#xff1a; 2024年11月9日上午8:00 准考证打印&#xff…

css 同时实现渐变色和文字阴影(Vue 3 + TypeScript)

UI效果 渐变效果 直接添加text-shadow属性&#xff0c;发现阴影覆盖在了字体之上 解决&#xff1a; 利用::after伪类&#xff0c;将字体的阴影加在伪类之上。 <template><div class"app"><h1 ref"h1Ref">{{ title }}</h1></d…

从美颜SDK到实时视频美颜平台:开发美颜系统的技术解析

今天&#xff0c;笔者将围绕美颜SDK的基本功能、实时视频美颜平台的架构设计&#xff0c;以及实现美颜系统的关键技术进行深入解析。 一、美颜SDK的基础功能 美颜SDK&#xff08;Software Development Kit&#xff09;是实现美颜效果的核心工具包&#xff0c;它通常包含一系列…

【Linux】用户权限管理:创建受限用户并配置特定目录访问权限

本文详细介绍了如何在 Linux 系统中创建一个名为 agent 的新用户&#xff0c;并限制其在特定目录下的权限。通过使用 useradd 命令创建用户&#xff0c;并使用 usermod 命令将新用户添加到现有用户组中&#xff0c;确保其具有适当的权限。接着&#xff0c;通过 chown 和 chmod …

获英伟达二次投资!AI制药公司Terray完成1.2亿美元融资,构建全球最大化学数据集

近日&#xff0c;AI 制药公司 Terray Therapeutics 宣布完成 1.2 亿美元 B 轮融资&#xff0c;本轮融资将用于推进其内部免疫学项目的临床试验&#xff0c;并进一步完善公司的生成式 AI 平台 tNova。 据悉&#xff0c;本次 Terray 的融资由英伟达风险投资部门 NVentures 和新投…

LeetCode 热题 100之二叉树

1.二叉树的中序遍历 思路分析1&#xff08;递归&#xff09;&#xff1a;通过一个辅助函数 inorderHelper&#xff0c;递归地访问左子树、根节点和右子树&#xff0c;实现中序遍历。 具体实现代码&#xff08;详解版&#xff09;&#xff1a; class Solution { public:void i…

LLC电路 - 变压器匝比改变时的连锁反应

1.谐振电路等效电阻Rac 等效电阻从负载一侧映射过来&#xff0c;假定负载电阻为R&#xff0c;功率计算公式为U_out^2/R&#xff0c;则理想变压器因为Uin N*Uout&#xff0c;所以等效电阻的阻值变化是平方关系&#xff1a;Rref K*R*N^2.具体的计算公式为&#xff1a; Vp为变压…

Podman+Minikube:MacBook 运行 Kubernetes 最佳实践

简介 在现代软件开发中&#xff0c;Kubernetes作为容器编排的事实标准&#xff0c;已成为云原生应用的核心组成部分。对于开发者来说&#xff0c;在本地环境中搭建和测试Kubernetes集群显得尤为重要。而在这方面&#xff0c;结合MacBook、Podman和Minikube的组合&#xff0c;提…