谷歌、火狐浏览器扩展开发

sakyoka

已于 2024-03-03 15:19:20 修改

阅读量1.4k

点赞数 1

文章标签： javascript edge浏览器

于 2022-08-13 14:59:27 首次发布

本文链接：https://blog.csdn.net/qq_16430873/article/details/126318482

版权

一、组成部分

开发浏览器扩展最重要的是manifest.json文件，需要在文件中定义一系列关系。

来看看manifest.json文件5大组成部分

1、标题名称、版本号等，其中manifest_version必须配2

2、browser_action

可以定义扩展图标和点击图标弹出页面

3、content_scripts

内容脚本，嵌入到浏览器页面。可以引入js、css文件，及加载时机。该内容定义js可以监听到后台发送的消息进行交互，同时也可以主动发送消息。

4、background

类似后台，发送消息（可以找消息驱动了解）。

5、permissions

权限定义

{
    "name": "浏览器扩展测试例子",   // 扩展的名称
    "manifest_version": 2,  
    "version": "1.0.0",   //扩展的版本
    "description": "浏览器扩展测试例子",   //扩展的描述
    //图标
    "browser_action": {   //制定扩展的图标放在Chrome的工具栏中
        "default_icon": "img/title.png" , // 图标文件的位置
        "default_title": "浏览器扩展测试例子",//当鼠标悬停于扩展图标上所显示的文字
        "default_popup": "title.html" // 用户单击扩展图标时所显示页面的文件位置
    }, 

    //内容
    "content_scripts": [  //需要直接注入页面的JS，content-scripts和原始页面共享DOM，但是不共享JS
        {
          "matches": ["<all_urls>"], //表示匹配所有地址。抓取特定网页的数据，只需要写该网站即可
          //多个JS按顺序注入
          "match_about_blank": true,
          "js": ["js/jquery/jquery-3.5.1.min.js",//jquery
                 "js/self/content-script.js" , //content_scripts的主要逻辑内容
                 "js/self/common.js"//业务逻辑
                ], 
          "css":[],
          "run_at":"document_start", // 代码注入的时间，可选值： "document_start", "document_end", or "document_idle"，最后一 个表示页面空闲时，默认document_idle
          "all_frames":false //定义的脚本是否会注入到嵌入式框架中
        }
    ],

   //后台
   "background":{
   	    //"page":"background.html"
		    "scripts": ["js/self/background.js"],
        "persistent":true
	},
    //权限
	"permissions":[
    "activeTab",
		"contextMenus", // 右键菜单
		"tabs", // 标签
    "<all_urls>",
		"webRequest", // web请求
		"webRequestBlocking",
		//"storage",// 插件本地存储
		"http://*/*", // 可以通过executeScript或者insertCSS访问的网站
		"https://*/*" // 可以通过executeScript或者insertCSS访问的网站
	]
}

二、测试步骤

1.首先在后台backgroud定义（右键菜单、消息监听）

1）测试创建右键菜单，创建菜单之后，在浏览器添加扩展后，打开新页面，鼠标右键可以明显看到你注册到的按钮

//type 类型，可选：["normal", "checkbox", "radio", "separator"]，默认 normal
//title 显示的文字，除非为“separator”类型否则此参数必需，如果类型为“selection”，可以使用%s显示选定的文本
//contexts 上下文环境，可选：["all", "page", "frame", "selection", "link", "editable", "image", "video", "audio"]，默认page
//
chrome.contextMenus.create({
	id:'smq',
	type: 'normal', 
	title: '测试右键按钮(ALT+W)', 
	contexts: ['all'],
	onclick: function(params){
		//点击事件
		sendMessage({rightSmq:true });
		//为了兼容其他浏览器不使用getSelected、sendRequest
		/*chrome.tabs.getSelected(null , function(tab){
            chrome.tabs.sendRequest(tab.id, {rightSmq: true});
		}); */  
	}
});

2）消息监听，这里消息，可以监听到content_scripts和browser_action发来的消息


chrome.runtime.onMessage.addListener(function(res, sender, sendResponse){

    console.log(res);

	//来自alt + s快捷的事件
	if (res.listenerAlt83){
		sendMessage("快捷键 alt + s触发的");
	}

	sendResponse();

	return true;
});

3）后台发送消息方式（由content_scripts定义消息监听）

//发送消息
function sendMessage(paramObject){
	chrome.tabs.query({active: true, currentWindow: true}, function(tabs){
		chrome.tabs.sendMessage((tabs.length ? tabs[0].id : null) , paramObject , function(response){

		});
	});
}

2.browser_action

1）title定义，简单的在页面上添加一个按钮，注意点：title页面不能写内嵌脚本，只能引用脚本。

title.js

$(function(){
	
	//获取后台对象， title可以获取到后台对象操作消息
	var backGroundObject = chrome.extension.getBackgroundPage();

	$("#testButton").click(function(){

		//这个消息最终在content-script 
		backGroundObject.sendMessage({test:"hhahahah"});
	});
	
});

过程：按钮点击发送消息（backGroundObject.sendMessage({test:"hhahahah"});，被content-script 中的chrome.runtime.onMessage.addListener监听到打印消息{test:"hhahahah"}。另外，这个过程你会发现在title中console.log、alter是无效的。

3.content-script

//接收background/popup传来的消息
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse){

	console.log(request);

    sendResponse();
	
	return true;
});

//监听页面键盘
$(document).keydown(function(e){
	var keycode = e.keyCode || e.which; 

	//监听alt + s
	if (e.altKey && keycode == 83){
		chrome.runtime.sendMessage({listenerAlt83:true}, function(response){});
	}
});

简单的监听接收后台发送的消息，同时在这个js可以添加事件监听，这里我注册了alt + s 监听，当你按照快捷时候，浏览器控制台输出“快捷键 alt + s触发的”，当然也可以通过浏览的注册监听。其实这个js就是被嵌套在页面的js,可以访问得到页面的dom结构（backgroud、browser_action是不可以操作dom的）。