360、chrome开发插件扩展如何跨域调用其他网站的信息并且显示在扩展、tab中的api

简介:

chrome插件提供了查找tab的api 

Js代码
  1. chrome.tabs.get(integer tabId, function callback)  


但是出于安全的考虑,tab的属性中没有document 

因此无法在扩展中直接获取某个页签页面中的页面元素 

但是tab有这样一个方法 

Js代码
  1. chrome.tabs.sendRequest(integer tabId, any request, function responseCallback)  


他可以在扩展中可以对某一个tab进行请求,发送请求信息; 
在对应的tab页面中通过 

Js代码 
  1. chrome.extension.onRequest.addListener(function(any request, MessageSender sender, function sendResponse) {...});  


对扩展中的请求进行监听,根据监听到的信息,决定要做的事情 

简单一点的,简明实例: 
一、在扩展中 添加 发送事件请求 的代码 

Js代码 
  1. chrome.tabs.sendRequest(tab_id, {  
  2.       hello: "ok"  
  3.     }, function(response) {  
  4.         // tab做出响应,发来的response  
  5. })  



二、在 tab中添加 事件监听的代码 

在manifest.json中添加 

Js代码 
  1. "content_scripts": [  
  2.   {  
  3.     "matches": ["*://*/*"],  
  4.     "js": ["jquery.min.js","test.js"]  
  5.   }  
  6. ],  
  7. "permissions": ["*://*/*","tabs"]  


其目的是在每个页签页面加载的时候同时载入这两个js,获取tabs的权限 

在test.js 中放入监听 扩展 请求事件的代码 

Js代码
  1. chrome.extension.onRequest.addListener(  
  2.   function(request, sender, sendResponse) {  
  3.     if (request.hello == "ok"){  // 在得到request请求是ok的时候 做下面的操作  
  4.       sendResponse({  
  5.         data: $("#hello"// 获取id是hello的元素发过去  
  6.       });  
  7.     }  
  8.   }  
  9.   );  



  10. 本文转自黄聪博客园博客,原文链接:http://www.cnblogs.com/huangcong/p/3534089.html,如需转载请自行联系原作者
相关文章
|
2月前
|
API PHP 开发者
大麦网 API 接口商品详情信息 API
为了让更多用户了解到大麦网的商品详情,并能够方便地获取相关信息,大麦网推出了商品详情 API 接口。本文将介绍大麦网商品详情 API 接口的作用、使用方法和注意事项,帮助广大开发者更加方便地接入大麦网的产品。
|
2月前
|
Web App开发 JavaScript 前端开发
使用vue快速开发一个带弹窗的Chrome插件
使用vue快速开发一个带弹窗的Chrome插件
67 0
使用vue快速开发一个带弹窗的Chrome插件
|
2月前
|
Web App开发 人工智能 自然语言处理
谷歌公布 2023 年最受欢迎Chrome扩展
谷歌公布 2023 年最受欢迎Chrome扩展
|
27天前
|
安全 API 开发者
构建高效可扩展的RESTful API服务
在数字化转型的浪潮中,构建一个高效、可扩展且易于维护的后端API服务是企业竞争力的关键。本文将深入探讨如何利用现代后端技术栈实现RESTful API服务的优化,包括代码结构设计、性能调优、安全性强化以及微服务架构的应用。我们将通过实践案例分析,揭示后端开发的最佳实践,帮助开发者提升系统的响应速度和处理能力,同时确保服务的高可用性和安全。
27 3
|
1月前
|
缓存 前端开发 API
构建高效可扩展的RESTful API:后端开发的最佳实践
【2月更文挑战第30天】 在现代Web应用和服务端架构中,RESTful API已成为连接前端与后端、实现服务间通信的重要接口。本文将探讨构建一个高效且可扩展的RESTful API的关键步骤和最佳实践,包括设计原则、性能优化、安全性考虑以及错误处理机制。通过这些实践,开发者可以确保API的健壮性、易用性和未来的可维护性。
|
1月前
|
XML JSON API
通过Flask框架创建灵活的、可扩展的Web Restful API服务
通过Flask框架创建灵活的、可扩展的Web Restful API服务
|
1月前
|
JavaScript 前端开发 Java
淘宝/天猫获取sku详细信息 API接口(如何抓取别人的sku图淘宝)
淘宝/天猫平台提供了获取商品SKU(Stock Keeping Unit,库存量单位)详细信息的API接口。SKU通常代表一种具有独特属性的商品变体,如颜色、尺寸等。为了获取淘宝/天猫商品的SKU详细信息,您可以遵循以下步骤:
|
1月前
|
存储 API 数据安全/隐私保护
1688阿里巴巴中国站获得公司档案信息 API接口(档案信息有什么用)
要获取1688阿里巴巴中国站的公司档案信息API接口,你需要遵循阿里巴巴开放平台的开发流程,并申请相应的API权限。以下是一些基本的步骤和指导:
|
1月前
|
JSON 缓存 API
淘宝天猫获取sku详细信息 API 调用文档 及请求代码
淘宝天猫获取SKU详细信息的API调用通常涉及到商品信息的API接口。在淘宝开放平台或天猫开放平台上,你可以找到相关的API文档和调用示例。下面是一个简化的步骤和示例代码来展示如何调用这些API:
|
1月前
|
API 开发工具 开发者
淘系API接口推荐:淘宝商品描述信息数据接口
淘宝商品描述信息数据接口是一个功能强大的API,它允许开发者获取商品的详细描述信息,包括标题、价格、图片和详细描述等。 要使用这个接口,需要遵循以下步骤: 注册开发者账号:您需要访问淘宝开放平台官方网站,注册成为开发者,并提供个人或企业的相关信息。 创建应用并选择权限:在淘宝开放平台的应用管理页面中创建新应用,并选择“获取商品详情”权限。提交应用创建申请后,等待淘宝审核。 获取API凭证:审核通过后,您将获得App Key和App Secret,这些凭证是调用API时的重要认证信息。请妥善保管App Secret,避免泄露,以保障API调用的安全性。
27 0

热门文章

最新文章