`

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

分享到:
评论

相关推荐

    chrome标签页自动轮播

    在这个压缩包中,包含了创建一个Chrome扩展程序所需的基本文件: 1. **popup.html**:这是扩展程序弹出窗口的HTML文件,用户可以通过点击浏览器右上角的插件图标打开。这个窗口通常用于显示设置或者提供与扩展功能...

    chrome插件开发 - tab页面切换插件

    一个基本的Chrome插件通常包含以下几个部分:manifest.json(插件的配置文件)、background.js(后台脚本,处理非交互逻辑)、content_script.js(内容脚本,与网页交互)以及可能的HTML和CSS文件(用于创建用户界面...

    chrome newtab扩展程序

    总的来说,"chrome newtab扩展程序"涉及了Chrome扩展开发、前端编程、JavaScript事件处理、搜索引擎优化(SEO)等多个IT领域的知识。通过学习这些技能,开发者可以创造出更个性化、高效的浏览器体验,同时也能提升...

    IE_Tab_for_Chrome-10.5.10.1

    标签"IETab Chrome"进一步强调了这个扩展与IE和Chrome的关系,它是Chrome的一个扩展,专门用于处理与IE相关的需求。 在压缩包子文件中,"ietabhelper.exe"和"ietabhelper.msi"是两个重要的组件。"ietabhelper.exe...

    chrome-extension-newtab:Chrome 扩展程序来自定义我的新标签页

    "chrome-extension-newtab" 是一个专为 Chrome 浏览器设计的扩展,旨在优化新标签页的体验。通过使用这个扩展,用户可以将新打开的标签页设置为自己喜欢的样式或功能,替代默认的空白页面或 Google 搜索框。 首先,...

    chrome-tab-count:计算在Chrome中打开的标签页数量

    在Chrome扩展中,JavaScript用于处理用户交互、与Chrome浏览器API进行通信以及修改页面内容等任务。在"chrome-tab-count"这个项目中,JavaScript主要负责监听浏览器的事件,如标签页的打开和关闭,然后实时更新图标...

    chrome缓存清除扩展程序,通过js清除chrome缓存的api演示

    本文将详细介绍如何使用Chrome扩展程序以及JavaScript API来实现这一功能。 首先,我们要了解Chrome扩展程序(Extension)的概念。Chrome扩展是基于Web技术(HTML、CSS和JavaScript)构建的小型软件应用,它们可以...

    electron-chrome-tabs:电子标签扩展-与chrome标签相似

    在"electron-chrome-tabs"中,开发者可以通过JavaScript调用API,动态地创建和更新标签页,实现界面的实时交互。例如,可以使用JavaScript事件监听和处理机制,当用户点击新建标签按钮时,触发相应的函数来创建一个...

    chrome ie tab14.4.8.1

    标签 "chrome ie-tab" 明确了这个扩展与Chrome浏览器以及IE相关的特性有关。这有助于用户在搜索类似功能的扩展时能够快速识别。 在压缩包中,除了核心组件ietabhelper.exe之外,还有 "14.4.8.1_0" 这个文件。这可能...

    荏苒一个连接时光这端和那端的新标签页chrome扩展

    4. **Chrome API**:Chrome提供了丰富的API供扩展使用,荏苒可能利用这些API与浏览器进行交互,例如获取用户设置、存储数据(chrome.storage API)、更改新标签页内容(chrome.tabs API)等。 5. **事件监听**:荏...

    Chrome缺失的Tab管理器

    JavaScript,作为Web开发的核心语言,经常被用来创建动态交互的网页内容,包括浏览器扩展。Chrome的扩展主要基于HTML、CSS和JavaScript编写,开发者可以通过Chrome的API来增强浏览器的功能,比如管理标签页。 ...

    Chrome扩展实现在打开的选项卡之间快速切换

    在本案例中,"Chrome扩展实现在打开的选项卡之间快速切换"是一个旨在提高用户工作效率的工具,它允许用户在多个打开的浏览器选项卡间便捷地切换,而无需逐一点击或使用浏览器内置的切换快捷键。 首先,我们需要了解...

    Android-ChromeLikeTabSwitcher在Android实现类似于chrome标签浏览器

    `ChromeLikeTabSwitcher`就是这样一个自定义控件,它扩展了Android的标准UI组件,以满足特定的需求,比如模拟Chrome的标签页行为。 **3. 自定义View的实现** 要创建一个像`ChromeLikeTabSwitcher`这样的自定义控件...

    freetab:Chrome扩展程序通过将标签折叠成一个标签来管理标签

    3. `content_script.js` - 内容脚本,可以直接与网页交互,实现对标签页的折叠和展开功能。 4. `popup.html` 和 `popup.js` - 弹出窗口的HTML和JavaScript,用户可能通过点击扩展图标来访问这个弹出窗口,进行设置或...

    Chrome浏览器新标签页扩展BrowserDesktop

    开发者通过这个页面与用户交互,允许用户定制扩展的行为。 `new_tab.html` 文件则是新标签页的主体内容,当用户打开新的标签页时,浏览器加载的就是这个文件。它通常包含了扩展的核心功能,比如展示预设的壁纸、...

    tab-list:标签页列表是Chrome扩展程序,用于以可复制复制的格式列出所有打开的标签页的网址

    2. **JavaScript编程**:作为Chrome扩展的主要开发语言,JavaScript用于编写扩展的背景脚本、内容脚本和用户界面交互。例如,使用chrome.tabs API获取和操作浏览器的标签页信息。 3. **Chrome浏览器API**:Chrome...

    chrome实现窗口的源码

    综上所述,从这些文件中可以学习到Chrome如何实现标签页的UI交互、进程管理、内存优化以及扩展支持等多个方面的技术细节。通过阅读和理解这些源码,开发者可以深入理解浏览器的内部机制,并可能基于此开发自己的...

    chrome插件开发文档

    还有些扩展能够和浏览器的一些元素(如书签、tab 导航标签)交互。扩展还可以和 web 页面交互,甚至是从 web 服务器获取数据。 三、扩展组成 每个扩展由下列文件组成:一个 manifest 文件(主文件,json 格式)...

    New_Tab:Chrome 扩展程序

    总的来说,"New_Tab:Chrome 扩展程序" 是一个利用 JavaScript 实现的Chrome扩展,提供了自定义的新标签页体验,集成了时钟功能和小游戏。它的开发涉及了Chrome扩展的架构、JavaScript编程、以及Google API的集成,...

    chrome-good-tab:Chrome 扩展程序可使用 TODO 列表小部件和背景图像个性化新标签

    由于 Chrome 扩展程序是在浏览器环境中运行的,因此通常使用 JavaScript 与浏览器的 APIs 进行交互,实现各种功能。 **文件名称列表:chrome-good-tab-master** 这个文件名可能代表项目的主分支或者源代码仓库。...

Global site tag (gtag.js) - Google Analytics