js 打开指定的浏览器_如何实现一个谷歌浏览器插件
如何实现一个谷歌浏览器插件
一、什么是Chrome插件?
★
Chrome插件就是我们运行在Chrome浏览器 上的扩展程序,比如说vue-devtool。准确的说,其实更应该叫做Chrome扩展,因为插件是更偏向于底层的技术。Chrome插件本质上来说,就是利用WEB开发技术,包括HTML、CSS和JS等开发出来的web页面,用来增强浏览器的功能。它生成的文件结果为一个.crx后缀的压缩包,是Chrome Extension的缩写。
”
二、基本组成
manifest.json: 插件的配置文件
这是插件最重要也是最不可或缺的文件,它包含了插件的所有配置信息。
{ // 必须 "manifest_version": 2, // 清单文件的版本,这个必须写,而且必须是2 "name": "demo", // 插件的名称 "version": "1.0.0", // 插件的版本
// 推荐 "default_locale": "en", // 默认语言 "description": "插件的描述", "icons": { // 图标,一般偷懒全部用一个尺寸的也没问题 "16": "img/icon.png", // 扩展程序页面上的图标 "32": "img/icon.png", // Windows计算机通常需要此大小。 "48": "img/icon.png", // 显示在扩展程序管理页面上 "128": "img/icon.png" // 在安装和Chrome Webstore中显示 },
// 会一直常驻的后台JS或后台页面 "background": { // 2种指定方式,如果指定JS,那么会自动生成一个背景页 "page": "background.html" "scripts": ["js/background.js"] },
// 浏览器右上角图标设置 "browser_action": { "default_icon": "img/icon.png", "default_title": "这是一个示例Chrome插件", // 图标悬停时的标题 "default_popup": "popup.html" // 在工具栏点击插件弹出的页面 },
// 当某些特定页面打开才显示的图标,例如vue-devtools /*"page_action": { "default_icon": "img/icon.png", "default_title": "我是pageAction", "default_popup": "popup.html" },*/
// 需要直接注入页面的JS "content_scripts": [ { "matches": [""], // "" 表示匹配所有地址 // 多个JS按顺序注入 "js": ["js/content-script.js"], "css": ["css/custom.css"], "run_at": "document_start" // document_start: html解析完毕、CSS资源加载完成,JS执行前 // document_end: DOMContentLoaded事件触发后立即执行 // document_idle: 在load之前触发 }, ],
// 权限申请 "permissions": [ "contextMenus", // 右键菜单 "tabs", // 标签 "notifications", // 通知 "webRequest", // web请求 "storage", // 插件本地存储 ],}
content-scripts:插入页面的文件
"content_scripts": [ { "matches": [""], // "" 表示匹配所有地址 // 多个JS按顺序注入 "js": ["js/jquery-1.8.3.js", "js/content-script.js"], "css": ["css/custom.css"], "run_at": "document_start" }, ]
直接将脚本注入到页面中,但是也可以包含CSS文件,但是在注入CSS文件时,要小心,否则会覆盖网页原本的样式。content-scripts中的JS程序和原始页面共享DOM,但是和原始页面的JS不是在同一个环境下运行的,所以我们是无法访问到原始页面中定义的变量的因为是是注入到页面中的,所以在安全策略上不能访问大部分的API,除了下面的四种:
chrome.extension(getURL , inIncognitoContext , lastError , onRequest , sendRequest) chrome.i18nchrome.runtime(connect , getManifest , getURL , id , onConnect , onMessage , sendMessage)chrome.storage
background:常驻浏览器后台的页面
// 会一直常驻的后台JS或后台页面 "background": { // 2种指定方式,如果指定JS,那么会自动生成一个背景页 "page": "background.html" "scripts": ["js/background.js"] }
三、插件的展示形式
browserAction(浏览器右上角)
// 浏览器右上角图标设置 "browser_action": { "default_icon": "img/icon.png", "default_title": "这是一个示例Chrome插件", // 图标悬停时的标题 "default_popup": "popup.html" // 在工具栏点击插件弹出的页面 },
tips:打开的任何页面都会运行插件程序
pageAction
// 当某些特定页面打开才显示的图标,例如vue-devtools"page_action": { "default_icon": "img/icon.png", "default_title": "我是pageAction", "default_popup": "popup.html" }
可以控制是否运行此插件,例如只在打开百度时运行此插件,否则就置灰
// 在组件安装完成之后注册监听函数chrome.runtime.onInstalled.addListener(function() { // 在页面跳转时,移除旧的规则加入新的规则 chrome.declarativeContent.onPageChanged.removeRules(undefined, function() { // 如果url包含baidu则显示运行 chrome.declarativeContent.onPageChanged.addRules([ { // That fires when a page's URL contains a 'g' ... conditions: [ new chrome.declarativeContent.PageStateMatcher({ pageUrl: { urlContains: 'baidu' }, }) ], //在匹配成功后执行的操作 actions: [ new chrome.declarativeContent.ShowPageAction() ] } ]); });});
右键菜单
通过开发Chrome插件可以自定义浏览器的右键菜单,主要是通过chrome.contextMenusAPI实现,右键菜单可以出现在不同的上下文,比如普通页面、选中的文字、图片、链接,等等,如果有同一个插件里面定义了多个菜单,Chrome会自动组合放到以插件名字命名的二级菜单里。
chrome.contextMenus.create({ title: "测试右键菜单", onclick: function(){alert('您点击了右键菜单!');}});
四、消息通信
JS通信主要体现在下面的几个文件之间
- conten-scripts background
- popup background
- content-scripts popup
一、conten-scripts 和 background之间
(1)content-scripts向background发送消息
chrome.runtime.sendMessege( message, function(response) {…})
- message:表示向background发送的数据,基本类型,对象的话可以JSON序列化
- function: background接受到消息后返回的信息
(2)background向content-scripts发送消息
每个tab页面都有一个自己的content-scripts,而background只有一个,所以往content-scripts发送消息,需要知道是哪一个tab
/**获取当前选项卡id@param callback - 获取到id后要执行的回调函数*/function getCurrentTabId(callback) { // 查询所有在当前浏览器打开的活动的tab chrome.tabs.query({active: true, currentWindow: true}, function (tabs) { if (callback) { callback(tabs.length ? tabs[0].id: null); } });}
这里的callback就可以是我们发送信息的回调函数
chrome.tabs.sendMessage(tabId, message, function(response) {...});
contents-scripts接收
chrome.runtime.onMessege.addListener( function(request, sender, sendResponse) {…})
二、popup和background之间
可以直接获取background实例,然后直接里面定义的方法
var bg = chrome.extension.getBackgroundPage();bg.someMethod(); //someMethod()是background中的一个方法
三、popup与content script的通信
本质上与上面的方式相同。
js 打开指定的浏览器_如何实现一个谷歌浏览器插件相关推荐
- js请求结果拦截机器_写了个chrome插件:拦截ajax请求并修改返回结果!
(不瞒你们说,其实我是个rapper σ`∀´)σ (不 使用示例(视频) https://weibo.com/tv/v/HlVZD8cR9?fid=1034:4352275389595232 Ch ...
- 构建maven项目插件_如何构建一个Maven插件
构建maven项目插件 使用Okta的身份管理平台轻松部署您的应用程序 使用Okta的API在几分钟之内即可对任何应用程序中的用户进行身份验证,管理和保护. 今天尝试Okta. 由于其插件生态系统的普 ...
- node.js打开指定浏览器的四种方式
目录 二 .使用opn 三.使用child_process 四.使用自定义封装函数 一.使用open var open = require('open'); // 使用默认浏览器打开 //open(' ...
- java怎么打开指定的浏览器_Java之——打开浏览器访问指定页面
不多说,不废话,直接上代码,大家都懂得. package com.lyz.test; import java.awt.Desktop; import java.io.IOException; impo ...
- angular js 打开新的浏览器窗口
1.带参数打开新窗口 const newPath = location.origin + '/list' + '?name=' + name + '&sex=' + sex ; const w ...
- js打开本地文件_JS逆向|高频问题:为何Reres插件总是替换本地文件失败?
最近总被问到,使用Reres插件,总是替换失败,不知道原因在哪里,我已经回答过很多遍了,照着github 上面的教程来就不会错,不可能替换不成功.github地址如下: https://github. ...
- android 打开免打扰模式_「每日一个手机小技巧」手机飞行模式原来有着这么重要的作用...
提到"飞行模式"这个模式,在安卓手机和iPhone普及之前就它就已经存在于我们的手机之中,那么它究竟是一个怎样的模式呢?平时我们又是否有需要开启这个模式,或者说什么时候需要开启什么 ...
- idea 拉取gitee代码_手把手撸一个 IDEA 插件
点击上方"IT牧场",选择"设为星标" 技术干货每日送达! 作者:乱来梦游神 来源 :https://urlify.cn/Eja6zu 前段时间看到公众号一篇关 ...
- 如何用vbs编写一个游戏_如何编写一个 SkyWalking 插件
点击上方"开源社"关注我们 | 作者:vcjmhg| 编辑:李明康| 责编:袁睿斌 | 设计:叶修缘丶 1 概述 之前几篇文章,我们着重介绍了在对 SkyWalking 进行二次开 ...
- astar插件下载 就行_送给你们一个ps插件,5秒抠图神器,这个肯定是你找了很久的...
使用PS作图时,经常会涉及到抠图,简单点的图还好说,但对于抠发丝这类比较复杂一点的就比较麻烦了,想提高效率就需要借助插件了. 今天推荐的是-PS顶级抠图滤镜 Vertus Fluid Mask . V ...
最新文章
- 区块链论文:Byzcoin,通过集体签名让比特币具有强一致性且强化安全
- CTFshow php特性 web147
- JZOJ 5184. 【NOIP2017提高组模拟6.29】Gift
- 2012年iOS开发人员必看的精品资料(100个)
- ServletContextListener 解析用法
- 周末爬山之圈门-潭柘寺
- [转]mysql delete 使用别名 语法
- 西威变频器使用说明书_西威变频器说明书
- vue直播rtmp流
- Chrome浏览器被篡改主页的解决办法
- three.js加载3D模型,在网页上展示3D模型(.glb.gltf.fbx格式)
- 电源硬件设计----线性调压器与LDO
- git安装配置及第一次上传项目到github
- 职称计算机xp系统试题,2015年职称计算机WindowsXP测试题及答案
- Minecraft——Forge1.16.5模组开发(36.2.20)——(1)开发环境搭建
- java爬虫框架jsoup
- Android组件之Service 与常用系统服务用法详解
- 集群多机ROS通信中间件:swarm_ros_bridge
- mysql 修改主键约束_MySQL---约束及修改数据表
- 基于计算机视觉再仿真技术,基于计算机视觉技术的纬编针织物三维仿真研究