-
2021-10-24 21:44:25
文章目录
这里包括下文讨论到的chrome插件其实是官方所指的chrome extension,考虑到目前主流的叫法皆以chrome插件代称chrome插件能干什么
引用官网的话:
扩展程序是可以定制浏览体验的小型软件程序。它使用户可以根据个人需要或偏好来定制 Chrome 功能和行为。它们是基于 Web 技术(例如 HTML,JavaScript 和 CSS)构建的。 扩展由相互联系的各种组件组成,组件可以包括后台脚本,内容脚本,选项页,UI 元素和各种逻辑文件。
- 书签控制
- 下载控制
- 窗口控制
- 标签控制
- 网络请求控制,各类事件监听
- 自定义原生菜单
- 完善的通信机制
我们常见的包括很多网页比价工具、取色器、掘金默认标签页,甚至是redux开发调试工具,json浏览器工具等都是通过chrome插件实现的
感兴趣的可以去chrome官方应用商店看看:https://chrome.google.com/webstore/category/extensions
chrome插件的版本
注意chrome插件也是有官方版本的,不同版本之间对chrome浏览器的支持也不一样
考虑到兼容性这里的教程采用v2版本进行开发和展示
chrome插件的浏览器支持
首先,毋庸置疑的是chrome浏览器对chrome插件的支持肯定是最好的
其次,webkit内核的浏览器(国内360浏览器,搜狗浏览器等)一般来说也是可以运行的
最后,firefox浏览器目前也对chrome插件提供了一定的支持
也就是说,无论考虑浏览器支持还是网上资料以及开发难度上,chrome插件都是在人力有限情况下的首选方案~
chrome插件的功能组成
chrome插件是有好几个组件组成的,各个组件的用途以及后续开发调试方式也会有些许差异,这里各位先了解一下~
manifest.json
该文件是chrome插件的配置文件,目的是告诉加载插件的浏览器各个资源文件去哪里取,插件配置信息等等
这个是每个chrome插件必不可少的组成部分
popup
独立的弹出页面,就是浏览器右上角一排插件图标点击之后所弹出的页面就是popup
该页面由相对独立的html,css和js组成
这一部分的开发方式也是和传统前端项目最为接近
content script
这部分通常是一段JS脚本,目的通常是获取/修改目标页面的DOM,例如你想在目标网页添加一些组件UI都需要借助该脚本实现
注意该脚本和页面脚本的JS是隔离的,无法直接访问,你没有办法直接拿到目标页面的某些变量来使用(下文会介绍一些其他方法来进行通信)
但是CSS不是隔离的,所以相同命名的CSS会存在污染的情况,通常需要保证此脚本内部CSS命名的唯一性
background script
这一段是运行在浏览器后台的脚本,一般会将需要一直运行的代码放在这里
他的API权限很高,能访问很多chromeAPI,同时不受跨域限制
chrome插件的展现形式
最后针对chrome插件再介绍一下其存在的一些形态,通常都会在manifest.json文件中进行定义
browserAction(浏览器右上角)
"browser_action": { "default_icon": "img/icon.png", "default_title": "这是Chrome插件", "default_popup": "popup.html" }
这样配置之后会在浏览器右上角增加一个插件图标,这也是使用较多的展现形式
pageAction(浏览器右上角)
// manifest.json { "page_action": { "default_icon": "img/icon.png", "default_title": "我是pageAction", "default_popup": "popup.html" }, "permissions": ["declarativeContent"] } // background.js chrome.runtime.onInstalled.addListener(function(){ chrome.declarativeContent.onPageChanged.removeRules(undefined, function(){ chrome.declarativeContent.onPageChanged.addRules([ { conditions: [ // 只有打开百度才显示pageAction new chrome.declarativeContent.PageStateMatcher({pageUrl: {urlContains: 'baidu.com'}}) ], actions: [new chrome.declarativeContent.ShowPageAction()] } ]); }); });
整体上和browserAction一致,但是pageAction可以在background-script中定义符合条件的网页,只有在特定情况下来才会enable我们的插件
右键菜单
// manifest.json {"permissions": ["contextMenus"]} // background.js chrome.contextMenus.create({ type: 'normal', // 类型,可选:["normal", "checkbox", "radio", "separator"],默认 normal title: '菜单的名字', // 显示的文字,除非为“separator”类型否则此参数必需,如果类型为“selection”,可以使用%s显示选定的文本 contexts: ['page'], // 上下文环境,可选:["all", "page", "frame", "selection", "link", "editable", "image", "video", "audio"],默认page onclick: function(){}, // 单击时触发的方法 parentId: 1, // 右键菜单项的父菜单项ID。指定父菜单项将会使此菜单项成为父菜单项的子菜单 documentUrlPatterns: 'https://*.baidu.com/*' // 只在某些页面显示此右键菜单 }); // 删除某一个菜单项 chrome.contextMenus.remove(menuItemId); // 删除所有自定义右键菜单 chrome.contextMenus.removeAll(); // 更新某一个菜单项 chrome.contextMenus.update(menuItemId, updateProperties);
chrome插件也可以自定义右键菜单,当用户单机鼠标右键时机会弹出插件菜单进行功能的触发
override(覆盖特定页面)
"chrome_url_overrides": { "newtab": "newtab.html", "history": "history.html", "bookmarks": "bookmarks.html" }
用于将chrome默认提供的页面替换掉,例如新标签页,书签等等
掘金的标签页导航就是基于此能力
devtools(开发者工具)
{ // 只能指向一个HTML文件,不能是JS文件 "devtools_page": "devtools.html" } // devtools.html <!DOCTYPE html> <html> <head></head> <body> <script type="text/javascript" src="js/devtools.js"></script> </body> </html> // devtools.js // 创建自定义面板,同一个插件可以创建多个自定义面板 // 几个参数依次为:panel标题、图标(其实设置了也没地方显示)、要加载的页面、加载成功后的回调 chrome.devtools.panels.create('MyPanel', 'img/icon.png', 'mypanel.html', function(panel) { console.log('自定义面板创建成功!'); // 注意这个log一般看不到 }); // 创建自定义侧边栏 chrome.devtools.panels.elements.createSidebarPane("Images", function(sidebar) { // sidebar.setPage('../sidebar.html'); // 指定加载某个页面 sidebar.setExpression('document.querySelectorAll("img")', 'All Images'); // 通过表达式来指定 //sidebar.setObject({aaa: 111, bbb: 'Hello World!'}); // 直接设置显示某个对象 });
我们常用的react或者vue控制条调试工具就是这种类型的插件,允许你在控制台中自定义自己的侧边栏以及其中的内容
devtool页面可以访问一组专属API,可以以获取页面的审查窗口信息以及网络请求等信息
回顾总结
- 了解chrome插件是什么
- chrome插件的用途
- chrome插件的核心组成
- chrome插件的展现形式
更多相关内容 -
chrome插件XSwitch chrome插件XSwitch
2022-03-22 09:50:10chrome插件XSwitch chrome插件XSwitch -
Chrome插件-Talend API Tester
2022-04-26 15:37:42Chrome插件-Talend API Tester 适用于后端开发人员,开发自测后端接口API,功能类似Postman -
chrome插件开发 - tab页面切换插件
2021-12-10 16:43:49本插件是基于谷歌浏览器的,方便打开页面过多进行页面切换、多屏幕切换 -
Chrome插件开发.pdf
2021-09-30 16:29:52Chrome插件开发.pdf -
Chrome插件伴侣3.2
2020-02-14 11:16:50Chrome插件伴侣,3.2版本,是一款chrome插件安装工具,本工具可以帮助用户,使用无损,非破坏性插件的方式,离线安装Chrome插件。 -
chrome.devtools.network的Chrome插件
2020-01-26 08:54:46blog文所用源码打包下载地址,使用方式请参考:https://blog.csdn.net/zengraoli/article/details/104085859 -
Web Scraper 爬虫 网页抓取 Chrome插件
2018-09-03 17:27:55Web Scraper 爬虫 网页抓取 Chrome插件,可以在chrome中选择离线安装。 点击谷歌浏览器右上角的自定义及控制按钮,在下拉框中选择工具选项,然后点击扩展程序来启动Chrome浏览器的扩展管理器页面。 在打开的谷歌浏览... -
京东抢购抢茅台脚本 Chrome插件-demo.zip
2021-12-10 11:10:55京东抢购抢茅台脚本 Chrome插件 google浏览器插件 -
chrome插件
2016-11-11 17:09:55chrome插件 -
很好用的chrome 插件合集,不要错过--chrome插件合集.rar
2022-01-17 12:06:28很好用的chrome 插件合集,不要错过--chrome插件合集.rar -
chrome插件开发-页面对象注入及本地通信
2019-05-14 09:33:31chrome插件开发-页面对象注入及本地通信 代码包含了应用页面内的js对象注入,js对象与backgroud.js的通信以及backgroud.js与本地程序的通信 -
selenium webdriver+chrome插件.zip
2020-06-16 11:56:29selenium ide的chrome的插件,chrome和firfox的webdriver插件,具体使用和问题查看我博客文章 -
修改chrome插件白名单所需文件chrome.adm
2018-04-11 16:48:38可以修改chrome插件白名单, 使用被停用的插件 -
使用Chrome插件伴侣,无损安装Chrome离线插件
2018-11-17 21:16:54Chrome 插件伴侣 是一款可以让你不通过 Chrome 应用商店,直接安装 Chrome 扩展的 Windows应用。 Chrome 目前并不支持传统的拖拽方式安装扩展,是为了安全。而在 67 版本之前是可以随意安装的。 于是安装 Chrome... -
Axure-RP-Extension-for-Chrome插件包及教程.rar
2019-07-08 11:08:57谷歌浏览器的RP产品原型浏览插件, 内附Axure-RP-Extension-for-Chrome_v0.6.3插件压缩包, 以及插件安装的详细文档, 已有多位用户根据文档安装使用,安全可靠,方便简介 -
chrome插件-190612.7z
2021-01-31 16:48:57chrome插件-190612.7z -
chrome插件开发文档-详细pdf版.7z
2021-09-02 09:50:11想探索一下chrome 插件的同学多看看查阅一下,共享方便大家 -
Chrome插件伴侣.zip
2020-05-13 10:50:55本资源为Chrome插件伴侣,主要功能就是将CRX格式文件转化为谷歌浏览器可直接离线加载的文件。针对高版本Chrome浏览器无法在线加载扩展插件的问题,该工具可大大方便谷歌扩展插件的离线安装,欢迎大家下载! -
Chrome插件开发--后台监控网页并自动刷新,点击页面元素
2019-06-01 05:22:48插件下载 博文链接:https://newday.iteye.com/blog/2220654 -
chrome 插件 Allow access to file URLs
2018-07-30 15:40:48AxureRP-extension-for-Chrome-0.6.2 ...因为众所周知的原因,此插件不能正常下载,但是可以通过离线安装 使用说明: 1 设置---更多工具--扩展程序 2 打开开发者模式 3 加载已解压的扩展程序 希望能帮到你! -
Axure RP Extension for Chrome插件下载
2017-08-15 08:40:16Axure RP Extension for Chrome是原型设计工具Axure RP的Chrome浏览器插件。目前版本为0.6.2。 因为在线安装需要访问Google Chrome在线商店,有时候会访问不了。所以提供一个离线版本进行安装。 安装方法: 1、打开... -
Chrome插件伴侣
2018-09-06 19:09:59Chrome版本大于47之后,外部的插件拖拽,安装不了,此插件可以解决外部插件安装 -
如意淘 for Chrome插件
2014-11-29 21:01:26如意淘:同款比价,价格曲线,降价提醒,自动比较同款商品在淘宝、天猫、京东等的价格,显示最近3个月的价格曲线,将商品添加到“想买”即可开通降价提醒。如意淘,淘我如意的! -
chrome 插件 downFaster
2018-01-06 15:33:01找了好久的chrome插件-downFaster extension crx CRX 大家一起共享吧!! -
chrome插件Postman_v5.2.0.crx
2018-01-31 10:42:46chrome插件Postman_v5.2.0.crxchrome插件Postman_v5.2.0.crx -
chrome 插件开发入门
2021-07-13 14:20:551.什么是Chrome插件 在我们的日常开发过程中,我们会在浏览器上安装很多有利于我们开发或者说更方便于使用chrome浏览器的插件,那么到底什么是chrome插件呢? 其实Chrome插件就是一个用Web技术开发、用来增强...1.什么是Chrome插件
在我们的日常开发过程中,我们会在浏览器上安装很多有利于我们开发或者说更方便于使用chrome浏览器的插件,那么到底什么是chrome插件呢? 其实Chrome插件就是一个用Web技术开发、用来增强浏览器功能的扩展程序,所以也许‘chrome扩展’比‘chrome插件’更贴切于它的意义。
2. 开发初体验
1.本地创建一个文件及:test
2.在test文件夹中,创建manifest.json。任何插件都必须要有这个文件,用来描述插件的配置信息
{ "name": "test", "description" : "this is test", "version": "0.0.1", "manifest_version": 2, }
定义当前插件名,描述信息,以及版本号等
3.给插件加一个浏览器右上角的icon
这里可以自定义图标图片
{ "name": "Hello Extensions", "description" : "Hello world Extension", "version": "1.0", "manifest_version": 2, "browser_action": { "default_icon": "./icons/16.png", "default_title": "这是一个示例Chrome插件", "default_popup": "index.html" } }
并且还可以给它一个点击之后默认的弹出内容,如index.html中
然后我们就可以简单的来测试下我们刚刚写的小demo了
打开我们的chrome插件扩展,将我们写的test文件夹直接拖进来,然后你会发现在你的扩展器内多了一个名叫test的插件,如图:
这个时候,我们可以把该插件固定在我们浏览器的右上角,点击的时候会发现,弹框中的内容就是我们刚刚index中的写的内容哦,样式可以自行修改的。
3.核心配置的介绍
1.manifest.json
这是一个Chrome插件必不可少的文件,用来配置所有和插件相关的配置,必须放在根目录。
下面是一些常见的配置:
{ // 清单文件的版本,这个必须写,而且必须是2 "manifest_version": 2, // 插件的名称 "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" }
2. content-scripts
需要直接注入页面的文件,借助
content-scripts
我们可以实现通过配置的方式向指定的页面中注入JS和CSS{ // 需要直接注入页面的JS "content_scripts": [ { //"matches": ["http://*/*", "https://*/*"], "matches": ["<all_urls>"],// 表示匹配所有地址 // 多个JS按顺序注入 "js": ["js/xxx.js", "js/xx.js"], // CSS要注意顺序,因为一不小心就可能影响全局样式 "css": ["css/xx.css"], // 代码注入的时间,可选值: "document_start", "document_end", or "document_idle",最后一个表示页面空闲时,默认document_idle "run_at": "document_start" } ], }
3. background
是一个常驻的页面,它的生命周期是插件中所有类型页面中最长的,它随着浏览器的打开而打开,随着浏览器的关闭而关闭,所以通常把需要一直运行的、启动就运行的、全局的代码放在background里面。
配置中,
background
可以通过page
指定一张网页,也可以通过scripts
直接指定一个JS,Chrome会自动为这个JS生成一个默认的网页:{ // 会一直常驻的后台JS或后台页面 "background": { // 如果指定JS,那么会自动生成一个背景页 "page": "background.html" //"scripts": ["js/background.js"] }, }
4. chrome的展示形式
这里给大家介绍几种较为常见的展示形式
1.浏览器右上角
通过配置
browser_action
可以在浏览器的右上角增加一个图标,我们上面的小demo已经使用了,所以就不做详细说明了2. 右键菜单
通过开发Chrome插件可以自定义浏览器的右键菜单,主要是通过
chrome.contextMenus
API实现// manifest.json { "permissions": ["contextMenus", "tabs"], "background":{ "scripts": ["js/background.js"] } } // background.js chrome.contextMenus.create({ title: '使用度娘搜索:%s', // %s表示选中的文字 contexts: ['selection'], // 只有当选中文字时才会出现此右键菜单 onclick: function(params) { // 注意不能使用location.href,因为location是属于background的window对象 chrome.tabs.create({url: 'https://www.baidu.com/s?ie=utf-8&wd=' + encodeURI(params.selectionText)}); } });
3.devtools(开发者工具)我们应该在开发的过程中都用过这样的插件
我们自己的插件其实也是可以插入到这个位置的,具体做法如下
在manifest.json中:
{ // 只能指向一个HTML文件,不能是JS文件 "devtools_page": "devtools.html" }
新建文件devtools.html
<!DOCTYPE html> <html> <head></head> <body> <script type="text/javascript" src="js/devtools.js"></script> </body> </html>
新建devtools.js
//MyTest 插件名,index.html 插件展示的内容 chrome.devtools.panels.create('MyTest', 'icons/crm.png', 'index.html', function(panel) { console.log('自定义面板创建成功!'); });
5. 获取当前窗口ID
chrome.windows.getCurrent(function(currentWindow) { console.log('当前窗口ID:' + currentWindow.id); });
6.获取当前选项卡id
// 获取当前选项卡ID function getCurrentTabId(callback) { chrome.tabs.query({active: true, currentWindow: true}, function(tabs) { if(callback) callback(tabs.length ? tabs[0].id: null); }); }
7.本地存储
我们在开发中使用的本地存储一般都是sessionStorage或者localStorage等
,在chrome的插件开发中,比较建议使用chrome.storage,理由如下:
chrome.storage
是针对插件全局的,即使你在background
中保存的数据,在content-script
也能获取到chrome.storage.sync
可以跟随当前登录用户自动同步,这台电脑修改的设置会自动同步到其它电脑,很方便,如果没有登录或者未联网则先保存到本地,可以等登录了再同步至网络
// 读取数据,第一个参数是指定要读取的key以及设置默认值 chrome.storage.sync.get({color: 'red', age: 18}, function(items) { console.log(items.color, items.age); }); // 保存数据 chrome.storage.sync.set({color: 'blue'}, function() { console.log('保存成功!'); });
以上就是此次分享的全部内容了,本次是入门级别的分享,仅仅用于了解chrome的开发,以及熟悉一些配置项。想要深入开发,还是需要参照官方文档哦~
本文参考了: https://www.bookstack.cn/read/chrome-plugin-develop/spilt.2.spilt.7.8bdb1aac68bbdc44.md
参考的文档写的特别细致,里面有很多东西本文没有涉及到,比如通信,动态注入等等,感兴趣的话,可以自行查看哈
-
Zotero 4.0.21 Chrome插件
2015-01-03 19:13:51Zotero的Chrome插件下载越来越难,在这里存个档,方便找 -
axure for chrome插件
2017-10-18 14:59:20axure for chrome插件 亲自安装可用~~~~~为嘛要大于50个字