首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Chrome Extension

更高的层次来看,我们将使用它来向 Chrome 浏览器声明扩展程序将会做什么,以及为了完成这些任务所需要的权限 manifest.json属性非常多,全部属性列表附在文章最后,供大家参考。...获取扩展图标、标题、文字、弹出页等 commands 给扩展添加快捷键 contextMenus 添加选项到右键弹出菜单 cookies 控制cookies desktopCapture 捕获屏幕、个人窗口或标签内容...}); 扩展调试 chrome的菜单里打开扩展程序(打开开发者模式) ? 调试通普通页面一样 如何优雅的调试 右键Chrome工具栏的小图标会弹出一个窗口,选择审查弹出内容即可调试。...注意千万不要将您的私有密钥包含在扩展程序中! 创建包 进入以下URL,打开扩展程序管理页面:chrome://extensions 确保右上角的开发者模式复选框已选中....进入如下 URL,打开扩展程序管理页面: chrome://extensions 单击打包扩展程序按钮,出现一个对话框。 在扩展程序根目录字段中指定扩展程序所在文件夹,例如 C:\myext。

2.8K30

如何实现一个谷歌浏览器插件

如何实现一个谷歌浏览器插件 一、什么是Chrome插件? ★Chrome插件就是我们运行在Chrome浏览器 上的扩展程序,比如说vue-devtool。...准确的说,其实更应该叫做Chrome扩展,因为插件是更偏向于底层的技术。Chrome插件本质上来说,就是利用WEB开发技术,包括HTML、CSS和JS等开发出来的web页面,用来增强浏览器的功能。..."default_popup": "popup.html" // 在工具栏点击插件弹出的页面 }, // 当某些特定页面打开才显示的图标,例如vue-devtools...// 会一直常驻的后台JS或后台页面 "background": { // 2种指定方式,如果指定JS,那么会自动生成一个背景页 "page": "background.html...插件", // 图标悬停时的标题 "default_popup": "popup.html" // 在工具栏点击插件弹出的页面 }, tips:打开的任何页面都会运行插件程序

1.4K31
您找到你想要的搜索结果了吗?
是的
没有找到

【干货】Chrome插件(扩展)开发全攻略

右上角菜单->更多工具->扩展程序可以进入 插件管理页面,也可以直接在地址栏输入 chrome://extensions 访问。 ?...}, } 需要特别说明的是,虽然你可以通过chrome-extension://xxx/background.html直接打开后台页,但是你打开的后台页和真正一直在后台运行的那个页面不是同一个,换句话说...扩展可以替代如下页面: 历史记录:工具菜单上点击历史记录时访问的页面,或者地址栏直接输入 chrome://history 新标签页:当创建新标签的时候访问的页面,或者地址栏直接输入 chrome...每打开一个开发者工具窗口,都会创建devtools页面的实例,F12窗口关闭,页面也随着关闭,所以devtools页面的生命周期和devtools窗口是一致的。...测试时,通过给chrome建立一个不同的快捷方式chrome.exe --lang=en来切换语言,: ? 英文效果: ? 中文效果: ?

11.5K40

15分钟手摸手教你写个可以操控 Chrome 的插件

扩展程序页加载我们的文件目录 即可 2.png 然后我们启用插件 随手打开一个页面就发现我们的插件已经生效了 3.png 4.png 第二步 在本地创建 websocket 的服务 正如上面的通信流程所示.../background.js"> 我们可以使用两种方式来调试 这个常驻后台文件 1.直接在 chrome 拓展点击对应按钮即可弹出调试 8.png 9.png 2.直接在浏览器上输入对应的地址...就可以看见链接建立成功,然后 node 服务发送 msg 给 chrome 插件,我们就可以看到信息被成功接收了 (tips:之前的 node 服务别忘记启动) 10.png 第四步 开始使 chrome...chrome-extension://xxx/background.html 直接打开后台页 运行一个后台线程 但是真正在后台常驻的还有一个线程 所以相当是 2 个后台接收到了 socket 消息所以就发送...插件的朋友们也可以尝试下 参考资料 【干货】Chrome 插件(扩展)开发全攻略(https://www.cnblogs.com/liuxianan/p/chrome-plugin-develop.html

1.4K20

零实现的Chrome扩展

零实现的Chrome扩展 Chrome扩展是一种可以在Chrome浏览器中添加新功能和修改浏览器行为的软件程序,例如我们常用的TamperMonkey、Proxy SwitchyOmega、AdGuard...那么本文就以Chrome扩展为例,聊聊如何零实现一个Chrome扩展,本文涉及的相关的代码都在https://github.com/WindrunnerMax/webpack-simple-environment...action": { // 单击浏览器工具栏按钮时的行为 "default_popup": "popup.html", // 单击按钮时打开的默认弹出窗口...原本的斩钉截铁,变成现在的含糊和留有余地,看来强Google想要执行一个影响全世界65%互联网用户的Breaking Change,也不是那么容易的。...popup: 这个模块是扩展弹出层界面,可以通过点击扩展图标在浏览器中弹出,用于显示扩展的一些信息或操作界面。

42420

Infinity插件 让Chrome浏览器实现添加10+N个快捷方式(不限制)

Infinity插件 让Chrome浏览器实现添加10+N个快捷方式(不限制) ---- 文章目录 Infinity插件 让Chrome浏览器实现添加10+N个快捷方式(不限制) 前言 一、Infinity...下载安装 1.1 下载 1.2 解压zip 1.3 安装 1.4 为扩展程序添加快捷键 二、基本使用 2.1 编辑图标 2.2 弹出工具的功能 2.3 添加网站 总结 ---- 前言 Chrome新标签页是指在打开谷歌浏览器的时候...chrome浏览器(图中是最新版chrome),右上角设置->更多工具->扩展程序 点击右上角启动开发者模式 将解压出来的crx文件,直接拖入浏览器窗口中,会自动弹出是否添加该扩展程序...,点击添加就OK了 打开一个浏览器新窗口就看见添加扩展程序后的效果,点击保持现状 1.4 为扩展程序添加快捷键 再介绍一下如何为扩展程序添加快捷键,方便我们随时调出扩展程序的功能,点击左上角标红框处...点击进入快捷键设置窗口中 通过按键盘的方式为对应的扩展程序设置快捷键 二、基本使用 2.1 编辑图标 右键单击图标即可编辑或删除已有的图标 2.2 弹出工具的功能 在设置界面可以设置自己想要的布局格式

81220

网页截长图 截屏Google Chrom 插件 FireShot 分享 3000万人使用的网页截图插件

其易于使用的界面让您可以捕获页面的一部分、整个浏览器窗口,甚至是所有打开的选项卡的内容。该内置编辑器让您编辑和注释您的捕获,然后保存到本地计算机上或转移到其他地方,比如你的电子邮件或到云。...捕获后,您可以在编辑器窗口中对其进行编辑,该窗口带有大量工具可供选择。您可以使用绘图工具插入元素,箭头或页面的突出显示部分、使用形状和文本进行注释、删除敏感数据等。...2.在打开的谷歌浏览器的扩展管理器最左侧选择扩展程序或直接输入:chrome://extensions/       3.找到自己已经下载好的Chrome离线安装文件xxx.crx,然后将其资源管理器中拖动到...Chrome扩展管理界面中,这时候用户会发现在扩展管理器的中央部分中会多出一个”拖动以安装“的插件按钮。       ...浏览网页,按下FireShot扩展程序图标,在弹出菜单中选择:捕捉整个页面、捕捉可见部分或捕捉选定区域即可。 梦溪分享   2.保存截图到文件。

3.9K20

《Go to Tab》快速跳转到打开的网页

Chrome浏览器支持打开多个窗口, 每个窗口支持打开多个标签, 我有一个习惯,每次搜索新的内容,都会打开一个新窗口, 新窗口又会产生新标签,于是窗口和标签越来越多, 窗口和标签很多, 就很难快速定位到已经打开的某个标签页...Go to Tab让我们以最快的方式, 定位到已经打开的标签页 ?...Go to Tab通过扩展面板,直接关闭标签页, 或其它窗口 ? Go to Tab可以通过扩展面板,搜索标签页关键词, 标签页高亮后, 按回车即可弹出标签页 ?...扩展程序下载链接 https://chrome.google.com/webstore/detail/go-to-tab/hjfkaobgkmaeomgdhmhhipdbjdhhjkoi 小结: Go...to Tab对于工作期间大量打开页面, 又长时间不关机的程序员们, 是非常有帮助的

1.4K20

2021 年值得推荐的 14 款 Chrome 开发者插件

它是一个快捷方式,因此你不必检查每个元素。.../ Window Resizer 是一款可以调整浏览器窗口大小的 Chrome 窗口缩放插件,特别适合 Web 前端开发,用户安装了 Window Resizer后,可以使用插件提供的选项来选择浏览器窗口大小...没有确认对话框,没有弹出窗口或其他任何减慢你的清算过程的东西。只需单击一下。...突出显示问题后,你可以直接扩展程序创建票证,而无需离开站点或在应用程序之间切换。 这个工具是付费的,也有试用版,可以玩玩看。...每当你打开新标签页时,都会出现一个漂亮的调色板…… Octotree https://chrome.google.com/webstore/detail/octotree-github-code-tree

2.8K30

让Firefox支持ActiveX控件「建议收藏」

扩展文件通常是xpi文件格式(以.xpi结尾).有三种安装方法: 1,直接拖拽到Firefox浏览器的窗口里或扩展窗口里 2,点击 ‘菜单”–“工具”–”扩展”,把.xpi文件拖进弹出窗口里...,稍后就可以看到Firefox会询问你是否要安装这个插件,点击是,并重启Firefox浏览器 3,鼠标右键点xpi文件,选打开方式,在打开方式里选firefox,设置关联。...扩展文件通常是xpi文件格式(以.xpi结尾).有三种安装方法: 1,直接拖拽到Firefox浏览器的窗口里或扩展窗口里 2,点击 '菜单"--"工具"--''扩展'',把.xpi文件拖进弹出窗口里...,稍后就可以看到Firefox会询问你是否要安装这个插件,点击是,并重启Firefox浏览器 3,鼠标右键点xpi文件,选打开方式,在打开方式里选firefox,设置关联。...Chrome的多进程插件模型Chrome的插件模型,与早先的浏览器的最大不同,是它采用了多进程的方式,每一个插件,都有一个单独的进程来承载(Shift + Esc打开Chrome进程管理器,可以看到现在已经加载的插件进程

3.5K10

selenium最大化浏览器-Web UI自动化测试之Selenium工具篇

所以()和clear()一般成对操作,即:   扩展:错误案例   正确写法:   元素信息常用获取方法:   1、size   2、text   提示:size、text:为属性,调用时无括号,:xxx.size...:    # 获取弹出框对象(切换到弹出框) alert = driver.switch_to.alert # 调用方法进行处理(返回alert/confirm/prompt...窗口截图的方法:   扩展    方式一: # 导包 import time # 设置时间戳 now_time = time.strftime('%Y%m%...实例化鼠标对象,并关联浏览器对象 action = ActionChains(driver)   鼠标常用操作方法:   1)()   2)()   3)()   4)()   5)()   扩展...:另一种鼠标操作的写法:(在其他编程语言中称为链式编程)   5.6 键盘操作   思考:如何模拟键盘上一些按键或者组合键的输入,:Ctrl+C,Ctrl+V。

1.8K20

一款最好用的广告拦截插件

uBlock 支持自定义静态规则和自定义动态规则,它还可以 hosts 文件里读取和创建过滤规则。 uBlock 能够加载并执行上千条过滤规则。...Chrome浏览器地址栏直接输入:chrome://extensions/ 或者在菜单栏点击“更多工具 - 扩展程序”进入扩展程序打开开发者模式。...点击 uBlock Origin(uBO)的工具栏按钮时 uBO 会弹出显示以下界面: 点击电源按钮可以针对当前站点打开或者关闭 uBO。...随便打开一个网页,在该窗口中将【ublock origin】插件点击打开,可以查看到该窗口中显示出【此页面已拦截】的广告数量,以及【已连接的网络】数量和【安装后已拦截】的广告数量,说明我们该网页上的广告都被屏蔽了...手动屏蔽 uBlock 手动屏蔽广告也很简单,只需要对着广告区域右键,接着选择右键菜单中的「屏蔽元素」,然后在右下角弹出窗口中,点击创建规则即可。

37910

初始JavaScript

3.4 浏览器执行 JS 简介 浏览器分成两部分:渲染引擎和 JS 引擎 1.渲染引擎: 用来解析HTML与CSS,俗称内核,比如chrome浏览器的blink,老 版本的webkit 2.JS引擎:...但实际上后两者是 ECMAScript 语言的实现和扩展。...更多参看MDN: MDN手册 DOM——文档对象模型 文档对象模型(DocumentObject Model,简称DOM),是W3C组织推荐的处理可扩展标记语言的标准编程接口。...通过BOM可以操作浏览器窗口,比如弹出框、控制浏览器跳转、获取分辨率等。 3.6 JS 初体验 JS 有3种书写位置,分别为行内、内嵌和外部。..."button" value="点我试试" onclick="alert('Hello World')" /> 可以将单行或少量 JS 代码写在HTML标签的事件属性中(以 on 开头的属性),

1.1K41

用getDisplayMedia实现在Chrome中共享屏幕

Chrome桌面/窗口/标签共享选择器弹出,允许用户选择要共享的内容。...Chrome扩展程序为您带来变化 根据经验,appear.in screen sharing extension的工作方式如上所述,它的安装非常成功。...绝大多数用户都是通过内嵌安装进行安装的,因此可能会在2014年之前我们从未更新过Chrome浏览器商店中的扩展屏幕截图。 现在,Chrome网上商店正在删除内联安装,本博文中所述。...如果我正确地理解了声明,则会在另一个选项卡中打开Chrome WebStore。这会使得检测用户何时Web应用程序安装扩展程序相当困难。...使用这种建立的信任关系进行内联安装可以说比Chrome网上应用店安装更安全。我们还必须要求WebStore开发人员支持不止一次地拆除由数百名用户安装的我们的扩展程序的非法复制副本。

4.4K30
领券