黄聪:360、chrome开发插件扩展如何跨域调用其他网站的信息并且显示在扩展、tab中的api
chrome插件提供了查找tab的api
- chrome.tabs.get(integer tabId, function callback)
但是出于安全的考虑,tab的属性中没有document
因此无法在扩展中直接获取某个页签页面中的页面元素
但是tab有这样一个方法
- chrome.tabs.sendRequest(integer tabId, any request, function responseCallback)
他可以在扩展中可以对某一个tab进行请求,发送请求信息;
在对应的tab页面中通过
- chrome.extension.onRequest.addListener(function(any request, MessageSender sender, function sendResponse) {...});
对扩展中的请求进行监听,根据监听到的信息,决定要做的事情
简单一点的,简明实例:
一、在扩展中 添加 发送事件请求 的代码
- chrome.tabs.sendRequest(tab_id, {
- hello: "ok"
- }, function(response) {
- // tab做出响应,发来的response
- })
二、在 tab中添加 事件监听的代码
在manifest.json中添加
- "content_scripts": [
- {
- "matches": ["*://*/*"],
- "js": ["jquery.min.js","test.js"]
- }
- ],
- "permissions": ["*://*/*","tabs"]
其目的是在每个页签页面加载的时候同时载入这两个js,获取tabs的权限
在test.js 中放入监听 扩展 请求事件的代码
- chrome.extension.onRequest.addListener(
- function(request, sender, sendResponse) {
- if (request.hello == "ok"){ // 在得到request请求是ok的时候 做下面的操作
- sendResponse({
- data: $("#hello") // 获取id是hello的元素发过去
- });
- }
- }
- );
黄聪:360、chrome开发插件扩展如何跨域调用其他网站的信息并且显示在扩展、tab中的api的更多相关文章
- 黄聪:Jquery+DataTables插件,如何在ajax调用服务器数据后,自动给tr添加id属性
http://legacy.datatables.net/usage/callbacks#fnRowCallback 主要通过 fnCreatedRow 事件来实现 var table = $('#t ...
- js跨域调用mvc ActionResult扩展
背景 最近2个项目中都用到了js跨域访问的知识,2个项目都需要主站与各个分站之间进行数据交互.状态同步等相关操作.浏览器本身是不允许进行跨域访问,在MVC中我们可以扩展一个方法来实现这个功能.在此大家 ...
- [记录]js跨域调用mvc ActionResult扩展
背景 最近2个项目中都用到了js跨域访问的知识,2个项目都需要主站与各个分站之间进行数据交互.状态同步等相关操作.浏览器本身是不允许进行跨域访问,在MVC中我们可以扩展一个方法来实现这个功能.在此大家 ...
- 开发环境Vue访问后端接口教程(前后端分离开发,端口不同下跨域访问)
原理:开发环境下的跨域:在node.js上实现请求转发,vue前端通过axios请求到node.js上,node.js将请求转发到后端,反之.响应也是,先到node.js上,然后转发vue-cil项目 ...
- 黄聪:chrome扩展开发《AJAX请求》
chrome在一次更新之后,出于安全考虑,完全的禁止了content_script从https向http发起ajax请求,即使正常情况下也会在console里给出提示.这对于WEB来讲是好事,但对于扩 ...
- 利用Google Chrome开发插件,在网页中植入js代码
Google Chrome是一个很强大的浏览器,提供了各种各样的插件,大大提升了使用了的效率,比如vimium.honx等. Google在提供这些插件的同时还允许用户开发自己的插件. 最近在写js的 ...
- 黄聪:VS2010开发如何在c#中使用Ctrl、Alt、Tab等全局组合快捷键
1.新建一个类 HotkeyHelper using System; using System.Runtime.InteropServices; using System.Windows.Forms ...
- vue项目开发时怎么解决跨域
vue项目中,前端与后台进行数据请求或者提交的时候,如果后台没有设置跨域,前端本地调试代码的时候就会报“No 'Access-Control-Allow-Origin' header is prese ...
- 前后端分离跨域 关于前后端分离开发环境下的跨域访问问题(angular proxy=>nginx )
前后端分离后遇到了跨域访问的问题: angular1中使用proxy很麻烦,最后还是失败结束:最后总结3种方法如下: 本人使用的第一种方法,只是开发环境下使用很方便! 1:禁掉谷歌的安全策略(Turn ...
随机推荐
- -03-PetaLinux通过eMMC方式启动【Xilinx-Petalinux学习】
前面说的我的硬件上有一颗eMMC的芯片,型号是MTFC4GACAJCN-4M IT,有4GB的容量. BOOT.bin的文件较小,只有不到3MB,但是image.ub的文件根据不同的需求,将来可能会越 ...
- 【P4语言学习】basic_routing.p4
headers.p4 /* Copyright 2013-present Barefoot Networks, Inc. Licensed under the Apache License, Vers ...
- k8s 学习笔记 etcd
1. Etcd Etcd是Kubernetes集群中的一个十分重要的组件,用于保存集群所有的网络配置和对象的状态信息.在后面具体的安装环境中,我们安装的etcd的版本是v3.1.5,整个kuberne ...
- 51Nod 1509 加长棒(隔板法)
http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1509 思路: 直接去解可行的方法有点麻烦,所以应该用总的方法去减去不可行 ...
- POJ 2771 Guardian of Decency
http://poj.org/problem?id=2771 题意: 一个老师想带几个同学出去,但是他怕他们会谈恋爱,所以带出去的同学两两之间必须满足如下条件之一: ①身高差大于40 ②同性 ③喜欢 ...
- Python的hasattr() getattr() setattr() 函数使用方法详解--转载
hasattr(object, name)判断一个对象里面是否有name属性或者name方法,返回BOOL值,有name特性返回True, 否则返回False.需要注意的是name要用括号括起来 1 ...
- Abstract Factory(抽象工厂)
意图: 提供一个创建一系列相关或相互依赖对象的接口,而无需指定它们具体的类. 适用性: 一个系统要独立于它的产品的创建.组合和表示时. 一个系统要由多个产品系列中的一个来配置时. 当你要强调一系列相关 ...
- redis的过期策略以及内存淘汰机制
redis采用的是定期删除+惰性删除策略. 为什么不用定时删除策略? 定时删除,用一个定时器来负责监视key,过期则自动删除.虽然内存及时释放,但是十分消耗CPU资源.在大并发请求下,CPU要将时间应 ...
- JVM史上最佳入门指南
提到Java虚拟机(JVM),可能大部分人的第一印象是“难”,但当让我们真正走入“JVM世界”的时候,会发现其实问题并不像我们想象中的那么复杂.唯一真正令我们恐惧的,其实是恐惧本身.而作为整个JVM系 ...
- JavaScript之搜索框
啧啧啧,又到月末了,时间过的真的好快啊︿( ̄︶ ̄)︿现在没课上,天天宅在寝室就这么三件事:吃饭睡觉打豆豆.真感无所事事,无聊至极!突然好怀念那些上课的日子啊!至少不像现在,生活状态全部都搅乱了:以前可 ...