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,如需转载请自行联系原作者
相关文章
|
11月前
|
Web App开发 人工智能 IDE
从痛点到解决方案:为什么我开发了Chrome元素截图插件
传统的截图方式要么截取整个页面然后手动裁剪,要么使用浏览器自带的截图功能,但效果都不理想。特别是当内容包含SVG元素或复杂样式时,截图质量和速度、便捷性往往不尽如人意。
408 4
|
11月前
|
Web App开发 人工智能 前端开发
产品发布策略:如何让Chrome插件在竞争激烈的市场中脱颖而出
Chrome Web Store每天新增很多个插件。插件刚发布,用户只有我自己,如何在这样的红海市场中找到自己的位置,是我一直在思考的问题。
398 0
|
Web App开发 存储 开发者
Chrome 插件上架发布全流程指南
浏览器插件开发完以后,要发布到 Chrome Web Store上,也是需要颇费一番周折的,本文就从注册账号开始,一直到最后发布上架的全流程进行指导,希望帮助你提供一些经验,避免踩坑,耗时耗力。
1913 8
|
人工智能 关系型数据库 MySQL
数据魔力,一触即发 —— Dataphin数据服务API,百炼插件新星降临!
本文通过一个利用百炼大模型平台和Dataphin数据服务API构建一个客户360智能应用的案例,介绍如何使用Dataphin数据服务API在百炼平台创建一个自定义插件,用于智能应用的开发,提升企业智能化应用水平。
1251 4
数据魔力,一触即发 —— Dataphin数据服务API,百炼插件新星降临!
|
Web App开发 人工智能 自然语言处理
WebChat:开源的网页内容增强问答 AI 助手,基于 Chrome 扩展的最佳实践开发,支持自定义 API 和本地大模型
WebChat 是一个基于 Chrome 扩展开发的 AI 助手,能够帮助用户理解和分析当前网页的内容,支持自定义 API 和本地大模型。
1707 1
|
缓存 负载均衡 安全
后端开发的艺术:构建高效、可扩展的API
在现代软件开发中,后端开发扮演着至关重要的角色。它不仅负责处理数据存储、业务逻辑和安全性,还需要提供高效、可扩展的API供前端和其他服务使用。本文将深入探讨后端开发的关键概念和技术,帮助读者了解如何构建高效、可扩展的API,并提供一些实用的建议和最佳实践。
|
Web App开发 JSON JavaScript
vue学习:chrome 中 vuetools 开发插件 的下载、安装
这篇文章介绍了如何在Chrome浏览器中下载、安装并测试Vue.js开发插件——vue-devtools。
4850 0
vue学习:chrome 中 vuetools 开发插件 的下载、安装
|
监控 安全 API
Docker + .NET API:简化部署和扩展
Docker + .NET API:简化部署和扩展
307 1
|
Web App开发 数据采集 存储
WebDriver与Chrome DevTools Protocol:如何在浏览器自动化中提升效率
本文探讨了如何利用Chrome DevTools Protocol (CDP) 与 Selenium WebDriver 提升浏览器自动化效率,结合代理IP技术高效采集微博数据。通过CDP,开发者可直接操作浏览器底层功能,如网络拦截、性能分析等,增强控制精度。示例代码展示了如何设置代理IP、cookie及user-agent来模拟真实用户行为,提高数据抓取成功率与稳定性。适用于需要频繁抓取互联网数据的应用场景。
1892 3
WebDriver与Chrome DevTools Protocol:如何在浏览器自动化中提升效率