黄聪: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 ...
随机推荐
- HDU - 3068 最长回文(马拉车Manacher)题解
思路:马拉车裸题,我们用一个p[i]数组代表以i为中心的最大回文半径.这里用了一个小技巧,如果一个串是aaaa这样的,那我们插入不相干的字符使它成为#a#a#a#a#,这样无论这个串是奇数还是偶数都会 ...
- AIM Tech Round 5 (rated, Div. 1 + Div. 2)
A. Find Square 找到对角线的两个点的坐标,这道题就迎刃而解了. inline void work(int n) { int m; cin >> m; memset(str, ...
- hdu 1163 九余数定理
Eddy's digital Roots Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Oth ...
- Stub学习
RPC RPC(Remote Procedure Call)就是某台主机A(一般为client)像调用本地的过程一样去调用另一台主机B(一般为server)上的某个过程.RPC代码可能长成这个样子: ...
- Intel Omin-Path Architecture 搭建调优与测试
OPA在Centos上的搭建 1. 首先确认Omni-Path Host Fabric Interfaces (HFIs) # yum install –y pciutils # lspci -vv ...
- Android:你好,androidX!再见,android.support
1.AndroidX简介 点击查看Android文档中对androidx的简介 按照官方文档说明 androidx 是对 android.support.xxx 包的整理后产物.由于之前的suppor ...
- Python 中的那些坑总结——持续更新
1.三元表达式之坑 很显然,Python把第一行的(10 + 4)看成了三元表达式的前部分,这个坑是看了<Python cookbook>(P5)中学到的,书中的代码: 2.Python生 ...
- wpf 中关于Image中样式Style的一点总结
第一种写法: (1):定义样式 <Style x:Key="imgStyle" TargetType="Image"> : <!-- Tar ...
- FireFox和IE下使用Date来构造新Date对象的BUG
正常方式 我们都知道可以使用new Date()来创建一个Date对象. new Date();//Date {Mon Jun 15 2015 15:53:16 GMT+0800} 也可以用new D ...
- 201621123006 《Java程序设计》第6周学习总结
1. 本周学习总结 1.1 面向对象学习暂告一段落,请使用思维导图,以封装.继承.多态为核心概念画一张思维导图或相关笔记,对面向对象思想进行一个总结. 注1:关键词与内容不求多,但概念之间的联系要清晰 ...