chrome扩展与标签tab的内容交互

简介:

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的元素发过去      });    }  }  );

本文转自问道博客51CTO博客,原文链接http://blog.51cto.com/450236/1852046如需转载请自行联系原作者


crackernet

相关文章
|
2月前
|
Web App开发 人工智能 自然语言处理
谷歌公布 2023 年最受欢迎Chrome扩展
谷歌公布 2023 年最受欢迎Chrome扩展
|
5月前
|
Web App开发
chrome扩展:manifest.json文件相关字段
chrome扩展:manifest.json文件相关字段
27 0
|
1月前
|
Web App开发 SQL 前端开发
性能工具之前端分析工Chrome Developer Tools性能标签
【2月更文挑战第22天】性能工具之前端分析工Chrome Developer Tools性能标签
36 1
性能工具之前端分析工Chrome Developer Tools性能标签
|
2月前
|
Web App开发 Windows
一个好用的设置所有网页成暗黑背景的 Chrome 扩展
一个好用的设置所有网页成暗黑背景的 Chrome 扩展
20 0
|
3月前
|
Web App开发 JSON 前端开发
6款开发必备的Chrome谷歌浏览器扩展(部分火狐、edge浏览器商店也可以用)
6款开发必备的Chrome谷歌浏览器扩展(部分火狐、edge浏览器商店也可以用)
39 0
|
6月前
|
Web App开发 开发框架 前端开发
SAP UI5 应用开发教程之四十一 - Chrome 扩展 UI5 Inspector 的离线安装和使用方法试读版
SAP UI5 应用开发教程之四十一 - Chrome 扩展 UI5 Inspector 的离线安装和使用方法试读版
42 0
|
6月前
|
Web App开发 XML 前端开发
SAP UI5 应用开发教程之三十六 - 使用 Chrome 开发者工具 Elements 标签动态修改 CSS 类试读版
SAP UI5 应用开发教程之三十六 - 使用 Chrome 开发者工具 Elements 标签动态修改 CSS 类试读版
40 0
|
7月前
|
Web App开发
推荐一个 Chrome 浏览历史记录管理的扩展 - History Trends Unlimited
推荐一个 Chrome 浏览历史记录管理的扩展 - History Trends Unlimited
153 0
|
9月前
|
Web App开发 JSON 监控
Chrome浏览器扩展开发之自动化操作页面
Chrome浏览器扩展开发之自动化操作页面
237 0
|
Web App开发 JavaScript 前端开发
在半小时内从无到有开发并调试一款Chrome扩展(Chrome插件/谷歌浏览器插件)
就在不久之前,我们目前这个毕业班的班长那日同学和我说,他正在公司开发Chrome扩展,看起来很高大上的技术,实际开发却非常简单,这引起了我非常浓厚的兴趣,正所谓技不压身,检验自身技术的手段之一就是拥抱新事物,这一次我们尝试在半小时内开发一款Chrome扩展,因为之前我们做了一个[微信小程序的在线面试题题库](https://v3u.cn/a_id_116)的项目,所以正好利用这个题库将面试题平移到Chrome扩展上面。
在半小时内从无到有开发并调试一款Chrome扩展(Chrome插件/谷歌浏览器插件)