Extension API 360浏览器的插件文档 中文, 虽然内核差不多但是不一定与 Chrome api 一致, 可以作为参考 Chrome 官方案例库 案例 如何实现网页和Chrome插件之间的通信...消息传递 manifest.json 配置说明 manifest.json 用于描述 Chrome 插件的源数据,配置信息等,基本内容如下 { "name": "名称",...(function () { }, { url: [{ urlMatches: 'http://www.baidu.com'}] // 过滤 }); 9. chrome...(tabId, details, callback) 接口中详细介绍 通信案例,通过 content_script 与页面 共享 DOM,来实现页面与扩展间的通信 // page.js 页面中触发一个...} }, false); 12. externally_connectable 这项配置直接实现网站与插件间通信,但是需要在 manifest.json 中作出如下配置 { "externally_connectable
"https://*.csdn.net/*", "https://*.xxx.com/*" ], //动作API,原文:在 Manifest V2 中,有两种不同的 API 来实现操作...方法如下 首先,需要增加配置 externally_connectable:{matches:[“https://*.xxx.com/”]}指定允许哪些网站可以给当前插件发送消息,相当于白名单,只有在白名单中的站点发送的消息...,扩展才会监听 //onMessageExternal消息监听 chrome.runtime.onMessageExternal.addListener(function (request, sender...}); //发送消息,触发上面的onMessageExternal //第一个参数是插件Id,指定要发送给哪个插件 //第二个参数是想要传给插件的数据信息 //第三个是让插件那边调用的回调函数,触发回来...:"外部触发成功" }); 内部发送sendMessage不会触发到onMessageExternal, 外部发送sendMessage不会触发到onMessage
严格来讲,我们正在说的东西应该叫Chrome扩展(Chrome Extension) 什么叫Chrome插件 Chrome插件是一个用Web技术开发、用来增强浏览器功能的软件,它其实就是一个由HTML、...应用也可以通过其它方式提供界面,比如加入到上下文菜单,提供一个选项页面或者用一个 content script改变页面的显示等。...可以在"开发指南"中找到应用(扩展)特性的完整列表以及 实现的细节 界面列表 ? 除了这个之外,还发现两只: 右键菜 开发者工具 至于长什么样儿,看看自己的浏览器,动手找找,比如: 浏览器按钮 ?...插件中向页面注入脚本的一种形式(虽然名为script,其实还可以包括css的), 借助content-scripts我们可以实现通过配置的方式轻松向指定页面注入JS和CSS 最常见的比如:广告屏蔽、页面...比如第一次安装、插件更新、有content-script向它发送消息,等等 popup opup是点击browseraction或者pageaction图标时打开的一个小窗口网页,焦点离开网页就立即关闭
屏幕共享 MediaDevices.getDisplayMedia Chrome 72+、Firefox 66+版本已经实现了WebRTC规范中的MediaDevices.getDisplayMedia...72以下的版本,想要实现屏幕共享的功能需要借助Chrome插件去获取screen(显示器屏幕)、application windows(应用窗口)和browser tabs(浏览器标签页)。...Chrome插件:由manifest.json和script.js组成。 manifest.json 填入一些基本数据。 background中scripts传入需执行的js文件。...通过chrome.runtime.sendMessage发送消息到Chrome插件调起屏幕共享。获取到streamId后,通过mediaDevices.getUserMedia得到stream。...屏幕共享 Web 端屏幕共享,通过创建一个屏幕共享的流来实现的。Chrome屏幕共享需要下载插件,在创建的流的时候还需要传入插件的extensionId。
插件(Plug-in) 指的是通过调用 Webkit 内核 NPAPI 来扩展内核功能的一种组件,工作在内核层面,理论上可以用任何一种生成本地二进制程序的语言开发,比如 C/C++、Delphi 等。...中的微格式数据 我们可以这样理解它,在页面加载完毕之后,我们的扩展程序会向这个页面注入一个或者额多个脚本,这个脚本可以获得浏览器所访问的 web 页面的详细信息。...接下来,我们的扩展要灵活地完成各种功能,最重要的就是互相间的通信! 信息数据在内容脚本、弹窗页面以及事件页面之间传递是一个扩展程序最重要的部分。...这些方法分别允许您从内容脚本向扩展程序或者反过来发送可通过 JSON 序列化的消息,可选的 callback 参数允许您在需要的时候从另一边处理回应。...这里是ChokCoco的博客: http://www.cnblogs.com/coco1s/p/8004510.html 欢迎留言和转发!
,就必须使用网络请求,只有进行了网络请求才可以对响应结果中的数据进行提取,urllib模块是python自带的网络请求模块,无需安装,导入即可使用。...96.0.4664.45 Safari/537.36" } # 创建Request对象 res = urllib.request.Request(url=url, headers=headers) # 模拟浏览器向服务器发送网络请求...HTTP协议常用的请求方法 方法 描述 GET 请求指定的页面信息,并返回响应内容 POST 向指定资源提交数据进行处理请求(例如提交表单或者上传文件),数据被包含在请求体中。...创建Request对象 创建具有请求头信息的Request对象,然后使用urlopen()方法向“baidu”地址发送一个GET请求,利用字典添加请求头信息最常用的用法就是修改User-Agent来伪装浏览器...https://c-ssl.duitang.com/uploads/blog/202008/12/20200812094028_qzhsq.jpg' img_name = 'code2.png' # 向目标网址发送网络请求并赋给一个变量
所有的WWW文件都必须遵守这个标准。 HTTP是一个基于TCP/IP通信协议来传递数据(HTML 文件, 图片文件, 查询结果等)。...它于1990年提出,经过几年的使用与发展,得到不断地完善和扩展。...浏览器作为HTTP客户端通过URL向HTTP服务端即WEB服务器发送所有请求。Web服务器根据接收到的请求后,向客户端发送响应信息。 HTTP的特点 支持客户/服务器模式。...即SYN+ACK包,此时服务器进入SYN-RECV状态 客户端收到服务器的SYN+ACK包,向服务器发送确认报ACK(ack=k+1),此包发送完毕,客户端和服务器进入ESTABLISHED状态,完成三次握手...分割URL和传输数据,多个参数用&连接,如果数据是英文字母/数字,原样发送,如果是空格,转换为+,如果是中文/其他字符,则直接把字符串用BASE64加密,不安全, POST把提交的数据放置在是HTTP包的包体中
目录 如何调试数据? 在安装了Vue Devtools之后,在chrome浏览器开发模式下,打开vue面板,选择组件,然后就可以直接查看和修改data数据: ? 修改之后,视图即刻更新。...://extensions/ 勾选"开发者模式" 单击 "加载已解压的扩展程序", 并且选择刚才编译的项目其目录下的shells/chrome文件夹 关于 persistent 选项等 如果扩展程序不能正常工作...为什么 Vue Devtools 可以修改项目的运行时数据? 在前面我们曾经使用vue面板,直接修改了vue组件的运行时数据。这是怎么做到的? 这是vue与Vue Devtools扩展通过合作完成的。...vue框架本身在开发模式下,如果察觉到自己处于浏览器宿主环境下,并且宿主环境安装了deltools(即Vue Devtools),则向devtools发送一个init事件: ?...__VUE_DEVTOOLS_INSPECT__ fn && fn(this) } }) Vue Devtools通过向浏览器全局注入,让vue察觉到工具扩展的存在。
浏览器发送HTTP请求的过程: 当用户在浏览器的地址栏中输入一个URL并按回车键之后,浏览器会向HTTP服务器发送HTTP请求。HTTP请求主要分为“Get”和“Post”两种方法。...当我们在浏览器输入URL http://www.baidu.com 的时候,浏览器发送一个Request请求去获取 http://www.baidu.com 的html文件,服务器把Response文件对象发送回给浏览器...客户端发送一个HTTP请求到服务器的请求消息,包括以下格式: 请求行、请求头部、空行、请求数据 一个典型的HTTP请求 GET https://www.baidu.com/ HTTP/1.1 Host:...Cookie是在浏览器中寄存的小型数据体,它可以记载和服务器相关的用户信息,也可以用来实现会话功能,以后会详细讲。 11....GET请求一般用于我们向服务器获取数据,比如说,我们用百度搜索知乎:https://www.baidu.com/s?wd=知乎 发现GEThttps://www.baidu.com/s?
有没有好奇chrome[1]插件是用什么做的?...像类似掘金插件又是怎么实现的,当我安装稀土掘金插件后,我的导航页都被改掉了,因此你也可以做一个类似的插件,来导航你公司的一些产品,方便快捷的实现你的内部导航 在开始本文之前,主要是从零认识一个chrome...2以上 "name": "Maic_test_chrome", // 扩展名称 "description": "lesson demo", // 扩展描述 "version":...} background.js与content.js通信 background.js在插件页面加载,background.js调用onMessage.addListener接收content.js发送过来的数据...({ text: inputColorValue }); // 扩展脚本向content发出信息 chrome.tabs.query({ active: true, currentWindow
扩展demo", // 图标,一般偷懒全部用一个尺寸的也没问题 "icons": { "16": "img/icon.png", "48": "img/icon.png", "128"...插件中向页面注入脚本的一种形式(虽然名为script,其实还可以包括css的),借助content-scripts我们可以实现通过配置的方式轻松向指定页面注入JS和CSS(如果需要动态注入,可以参考下文...比如第一次安装、插件更新、有content-script向它发送消息,等等。...几点注意: 为了兼容,建议2种都写,如果都写了,Chrome40以后会默认读取新版的方式; 新版options中不能使用alert; 数据存储建议用chrome.storage,因为会随用户自动同步;...> 0) { console.log(views[0].location.href); } popup或者bg向content主动发送消息 background.js或者popup.js: function
一句话总结:Chrome扩展插件是用前端的技术栈,来定制浏览器的功能,改善用户体验。 可能大家还听过一个词:Chrome Plugin。...,出于安全考虑,tab的属性中没有document, 因此无法在扩展中直接获取某个标签页面中的dom元素,但是可以通过发送事件请求来实现: chrome.tabs.sendRequest(tab_id,...const { url ,tabId} = details // 向content_script.js发送下载图片链接 chrome.tabs.sendMessage(tabId...2)如果可以修改,怎么去实现跨域请求?3)怎么实现登录授权? 如果对Chrome扩展插件熟悉,会发现Chrome就是为这量身定制,可以完美解决这些问题。...4)利用Chrome插件支持跨站请求的特性,向多语言平台直接发送修改请求。
做数据产品时,我们会经常遇到用户隐私问题(如,禁止追踪)。...在最新的Chrome浏览器中该选项已被默认选中设置=>显示高级设置=>随浏览流量一起发送”不跟踪”请求开启该选项后,请求头中会增加DNT:1的字段。 ? ...:(1)多人公用同一台电脑;(2)每次使用,动态分配IP地址;(3)共享的防火墙地址,将真实地址隐藏;(4)HTTP代理; 用户登录 为了使Web站点的登录更加简便,HTTP中包含了一种内建机制,可以用WWW-Authenticate...胖URL 有些Web站点会向每一个用户生成特定版本的URL(通常是向真正的URL中添加一些客户端识别信息进行扩展), 我们称之为胖URL。...Set-cookie: user="ligang"; domain="xxx.com" 数据行业中,针对浏览器级别的浏览器DNT(Do Not Track,禁止追踪),使用第三方Cookie实现,是一种常规解决方案
做数据产品时,我们会经常遇到用户隐私问题(如,禁止追踪)。...在最新的Chrome浏览器中该选项已被默认选中设置=>显示高级设置=>随浏览流量一起发送”不跟踪”请求开启该选项后,请求头中会增加DNT:1的字段。 ...:(1)多人公用同一台电脑;(2)每次使用,动态分配IP地址;(3)共享的防火墙地址,将真实地址隐藏;(4)HTTP代理; 用户登录 为了使Web站点的登录更加简便,HTTP中包含了一种内建机制,可以用WWW-Authenticate...胖URL 有些Web站点会向每一个用户生成特定版本的URL(通常是向真正的URL中添加一些客户端识别信息进行扩展), 我们称之为胖URL。...Set-cookie: user="ligang"; domain="xxx.com" 数据行业中,针对浏览器级别的浏览器DNT(Do Not Track,禁止追踪),使用第三方Cookie实现,是一种常规解决方案
应该来说这是 Chrome 扩展开发,不过说 Chrome 插件更顺口,后文也会说成 Chrome 插件。...插件主要就 4 个部分组成,injected,content,popup,background,但这 4 个部分所对应的权限,应用都有可能各自不一,这时候就需要通过消息通信,将对应的数据发送到对应的文件...; injected 和 content 主要就是injected向content发送,injected无需监听。...Chrome 扩展搞完。...首先要使 Chrome 插件访问跨域资源,需要在 manifest.json 文件中声明要访问的域如下: { "permissions": ["http://www.google.com/", "http
插件可以让开发者向浏览器中添加新的特性或功能,或者对现有的功能进行增强或改变。...更多权限可以在 Chrome 扩展官方文档 中查询。...'url': 'http://www.example.com' }); 使用notifications API chrome.notifications API 允许插件发送桌面通知。...}); } }); // 向插件发送消息 chrome.runtime.sendMessage({ action: "getData" }, function(response) {...Chrome插件示例 - Chrome官方提供的插件示例代码,涵盖了各种功能和用例,可以作为参考和学习的资源。
如何实现一个谷歌浏览器插件 一、什么是Chrome插件? ★Chrome插件就是我们运行在Chrome浏览器 上的扩展程序,比如说vue-devtool。...准确的说,其实更应该叫做Chrome扩展,因为插件是更偏向于底层的技术。Chrome插件本质上来说,就是利用WEB开发技术,包括HTML、CSS和JS等开发出来的web页面,用来增强浏览器的功能。...实现,右键菜单可以出现在不同的上下文,比如普通页面、选中的文字、图片、链接,等等,如果有同一个插件里面定义了多个菜单,Chrome会自动组合放到以插件名字命名的二级菜单里。...发送消息 chrome.runtime.sendMessege( message, function(response) {…} ) message:表示向background发送的数据...,基本类型,对象的话可以JSON序列化 function: background接受到消息后返回的信息 (2)background向content-scripts发送消息 每个tab页面都有一个自己的content-scripts
通过 AJAX 可以在浏览器中向服务器发送异步请求,最大的优势:无刷新获取数据。 AJAX 不是新的编程语言,而是一种将现有的标准组合在一起使用的新方式。 XML简介 XML 可扩展标记语言。...比如说我有一个学生数据: name = "孙悟空" ; age = 18 ; gender = "男" ; 用 XML 表示: 孙悟空 18</age...User-Agent: chrome 83 空行 体 username=admin&password=admin 响应报文 行 HTTP/1.1 200 OK 头...它于1990年提出,经过几年的使用与发展,得到不断地完善和扩展。...浏览器作为HTTP客户端通过URL向HTTP服务端即WEB服务器发送所有请求。Web服务器根据接收到的请求后,向客户端发送响应信息。 原生js发送ajax请求 get请求 <!
插件(Plug-in) 指的是通过调用 Webkit 内核 NPAPI 来扩展内核功能的一种组件,工作在内核层面,理论上可以用任何一种生成本地二进制程序的语言开发,比如 C/C++、Delphi 等。...它可以实现的一些功能的例子及适用场景,大致如下: 在网页中找出未链接的 URL,并将它们转换为超链接 查找特定的信息或者 DOM 结构,增加字体大小,使文本更具有可读性 发现并处理 DOM 中的微格式数据...接下来,我们的扩展要灵活地完成各种功能,最重要的就是互相间的通信! 信息数据在内容脚本、弹窗页面以及事件页面之间传递是一个扩展程序最重要的部分。...各种类型的消息传递都是通过这个 chrome 对象进行,分为: 简单的一次性请求 长时间的连接 跨扩展程序消息传递 从网页发送消息 原生消息通信 当然,对于通常而言的普通扩展程序而言,简单的一次性请求就足够我们使用了...这些方法分别允许您从内容脚本向扩展程序或者反过来发送可通过 JSON 序列化的消息,可选的 callback 参数允许您在需要的时候从另一边处理回应。
最近在看一些浏览器相关的知识,然后就看到了chrome扩展开发文档,觉得很有意思,就按照文档做了一个最简单的demo实现页面上video的自动下载。...content_scripts就是本次开发的重点了,他是Chrome插件中向页面注入脚本的一种形式(虽然名为script,其实还可以包括css的),借助content_scripts我们可以实现通过配置的方式轻松向指定页面注入...iconUrl: 'icon.png', title: 'demo', message: '下载插件已启动' }); }); 当插件启动时,给桌面发送一个通知...const save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a'); save_link.href =...(这个是小意思了,很简单) 加载扩展: demo做完了就可以加载到chrome中,在chrome中找到扩展程序(chrome://extensions/),打开开发者模式,加载已解压的扩展程序,然后选择我们扩展的根目录即可
领取专属 10元无门槛券
手把手带您无忧上云