chrome扩展详细介绍_谷歌扩展是什么-CSDN博客

本文链接：https://blog.csdn.net/weixin_44185213/article/details/105451936

一、简单介绍

chrome扩展是一个用web技术开发，用来增强浏览器功能的软件，我们可以安装chrome扩展，来使浏览器更方便自己的使用。
它是由html，js，css，图片等组成的一个.crx后缀的压缩包。

二、目录结构

manifest.json：是必不可少的文件，manifest_version、name、version这三项必须配置。
popup：是我们点击扩展图标时显示的页面，失去焦点后，生命周期结束。
background：只要浏览器不关闭就一直存在的页面（但是是看不见的页面，值只能调试代码），可以在这里写一些一直要用的方法或存储数据，popup可以直接调用background里的方法。
devtools：可以在F12中新建标签。
Mypanel：F12中新建的标签页面。
infect：普通页面，如要使用，需要在manifest.json中配置
在这里插入图片描述

三、开发步骤

1.创建manifest.json文件

{
	// 清单文件的版本，这个必须写，而且必须是2
	"manifest_version": 2,
	// 插件的名称
	"name": "demo",
	// 插件的版本
	"version": "1.0.0",
	// 插件描述
	"description": "筛选网页",
	// 图标，一般偷懒全部用一个尺寸的也没问题
	"icons":
	{
		"16": "img/icon.png",
		"48": "img/icon.png",
		"128": "img/icon.png"
	},
	// 会一直常驻的后台JS或后台页面
	"background":
	{
		// 2种指定方式，如果指定JS，那么会自动生成一个背景页
		"page": "background.html"
		//"scripts": ["js/background.js","js/jquery-1.8.3.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"
		}
	],
	// 权限申请
	"permissions":
	[
		"contextMenus", // 右键菜单
		"tabs", // 标签
		"notifications", // 通知
		"webRequest", // web请求
		"webRequestBlocking", // 阻塞式web请求
		"storage", // 插件本地存储
		"http://*/*", // 可以通过executeScript或者insertCSS访问的网站
		"https://*/*" // 可以通过executeScript或者insertCSS访问的网站
	],
	// 普通页面能够直接访问的插件资源列表，如果不设置是无法直接访问的
	"web_accessible_resources": ["js/inject.js"],
	// 默认语言
	"default_locale": "zh_CN",
	// devtools页面入口，注意只能指向一个HTML文件，不能是JS文件
	"devtools_page": "devtools.html"
}

2.创建需要的页面（按自己需求来）
3.写方法，之前js的方法在这都可以用，还有一些chrome特有的

//关闭标签页
chrome.tabs.remove(tabIds);
//打开新标签页
chrome.tabs.create({url: ""});
//获取标签id
chrome.tabs.query({active: true, currentWindow: true}, function(tabs)
	{if(callback) callback(tabs.length ? tabs[0].id: null);});
//popup像conent-scrip发送消息
chrome.tabs.sendMessage(tabId, message, function(response)
	{if(callback) callback(response);});
//consent-scrip监听消息
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse)
{if(request.cmd == 'write') {
        window.postMessage({"date": request.value}, '*');
        sendResponse('我收到了你的消息！');
	} else if(request.cmd == 'read'){}
});