chrome扩展程序获取当前页面URL和HTML内容

先交代一下manifest.json中的配置

// 引入注入脚本"content_scripts": [  {    "js": ["content_script.js"],    // 在什么情况下使用该脚本    "matches": [      "http://*/*",      "https://*/*"    ],    // 什么情况下运行【文档加载开始】    "run_at": "document_start"  }],
{"permissions": [  "tabs"]}

1.获取当前页面的URL

可在popup.js中获取(chrome.tabs.getCurrent已经out了,返回值是undefined)

    chrome.tabs.getSelected(null, function (tab) {
        console.log(tab.url);
    });

2.获取当前页面的HTML内容

content-script.js 是注入标签页内的脚本

popup.js 是弹出框脚本

相互通信的方式 sendMessage(msg, callback)、onMeassage(callback)(sendRequest、onRequest已经out了,API不再支持)

popup.js:发送消息

chrome.tabs.getSelected(null, function (tab) {  // 先获取当前页面的tabID    chrome.tabs.sendMessage(tab.id, {greeting: "hello"}, function(response) {        console.log(response);  // 向content-script.js发送请求信息    });});

content-script.js:响应消息

   var html = document.body.innerHTML;
    chrome.extension.onMessage.addListener(
        function(request, sender, sendMessage) {if (request.greeting == "hello")
                sendMessage(html);
            else
                sendMessage("FUCK OFF"); // snub them.
        });
时间: 2024-10-25 05:29:22

chrome扩展程序获取当前页面URL和HTML内容的相关文章

【前端工具】Chrome 扩展程序的开发与发布 -- 手把手教你开发扩展程序

关于 chrome 扩展的文章,很久之前也写过一篇.清除页面广告?身为前端,自己做一款简易的chrome扩展吧. 本篇文章重在分享一些制作扩展的过程中比较重要的知识及难点. 什么是 chrome 扩展程序 扩展程序是一些能够修改或增强 Chrome 浏览器功能的小程序.对于前端工程师而言,其最大的便利就是我们可以应用我们熟悉的 HTML.CSS . Javascript 等技术来制作扩展程序. 如下图所示,这些图标就是各种开发者提供的 chrome 扩展程序: 区分扩展与插件 很多人会误称扩展程

【转】编写Chrome扩展程序

Chrome的扩展程序很多,也很容易入门,可以来简单实现一下 看看 官方文档 或者翻译的文档:百度.360,慢慢就能实现出一个扩展程序来 每个扩展程序应用一般会包含: 一个manifest清单文件 html文件 js文件 其他文件等 可以看到,其实结构如同一般的页面,有共通之处. 一.了解Chrome扩展程序 Chrome扩展程序商店地址为:https://chrome.google.com/webstore/category/extensions?hl=zh-CN 访问Chrome浏览器中已安

Chrome 扩展程序 最近历史 HistoryBar v1.1

说明 曾经用过一段时间傲游浏览器,渐渐的习惯了它的鼠标手势和一些细微的人性化的功能,比如地址栏左边的"最近访问的页面"按钮,可以方便的找到最近 20 条历史记录. 但后来由于某些原因又回到了 Chrome 的怀抱,于是就没有了这些不起眼但很好用的小功能.虽然有些扩展功能比这个强大太多,但是 Chrome 扩展装多了又会卡,尤其是功能特别多又有后台功能的,不仅卡,还有泄露隐私数据的风险.找了很久没发现有只做这种简单功能的,所以自己学习了一下 Chrome 扩展开发,花了几个小时写了这个小

Chrome 扩展程序 CrxMouse 优化版 v3.0.1

说明 CrxMouse 原版更新至 v2.7.8,跟进升级优化版至 v3.0.1. 修改说明: 1. 去除可能存在的后台数据上传隐患: 2. 解决鼠标右键拖动时的轨迹漂移问题: 3. 添加部分默认设置: 4. 修改整体配色. 解压后将 CrxMouse_Techzero_v3.0.1.crx 文件拖放至 Chrome 的 扩展程序 管理页面即可自动安装. 如果安装后被 Chrome 禁用,请参照防止 Chrome 屏蔽 非官方 扩展程序 教程使用. 下载 下载地址:http://pan.baid

安装Chrome扩展程序xpath

最近工作用到xpath,直接从浏览器复制下来路径时常会出错而且长度很长,于是我想到之前用过的一款chrome插件,可以直接编写xpath语句,并实时出现解析出的结果,检验xpath语句是否编写正确.效果如下: 下面讲一下怎么安装xpath.第一种方法就是scientific上网后点击chrome扩展程序然后在应用商店下载.第二种方法就是今天要所讲的先在网上下载xpath,然后在chrom扩展程序中安装. 首先需要下载xpath,资源网上寻找即可,下载之后把扩展名为crx的文件的扩展名更改为zip

js获取当前页面url网址等信息

使用js获取当前页面的url网址信息. 1.设置或获取整个 URL 为字符串: window.location.href 2.设置或获取与 URL 关联的端口号码: window.location.port 3.设置或获取 URL 的协议部分 window.location.protocol 4.(www.jbxue.com)设置或获取 href 属性中跟在问号后面的部分 window.location.search 5.获取变量的值(截取等号后面的部分) var url = window.lo

Axure谷歌浏览器Chrome扩展程序下载及安装方法

对于很多需要设计产品原型的朋友来说,Axure RP Pro可谓是非常方便.好用的一款软件,因为它不仅能绘制出详细的产品构思,也能生成浏览器格式的产品原型.但是如果想把原型拿给客户查看,千万记得给浏览器安装Axure扩展程序哦. Axure谷歌浏览器Chrome扩展程序使用说明:打开谷歌内核的浏览器,在浏览器中地址栏中输入chrome://extensions/  或者点击浏览器的右上角选择更多工具->扩展程序,将下载到本地的.crx文件拖入到扩展程序中,点击确定完成安装即可. 注意是拖入!!!

js准确获取当前页面url网址信息

这篇文章主要为大家介绍了js准确获取当前页面url网址信息的多种方法,包括正则法.split拆分法等,需要的朋友可以参考下 在WEB开发中,时常会用到javascript来获取当前页面的url网址信息,在这里是我的一些获取url信息的小总结. 下面我们举例一个URL,然后获得它的各个组成部分:http://i.cnblogs.com/EditPosts.aspx?opt=1 1.window.location.href(设置或获取整个 URL 为字符串) var test = window.lo

js/jquery获取当前页面URL地址并判断URL字符串中是否包含某个具体值

js/jquery获取当前页面URL地址并判断URL字符串中是否包含某个具体值本文介绍jquery/js获取当前页面url地址的方法,在jquery与js中获取当前页面url方法是一样的,因为jquery没有自己相关的函数,使用js 的windows方法来获取,相关方法如下: window.location.pathname //设置或获取对象指定的文件名或路径 window.location.href //设置或获取整个 URL 为字符串 window.location.port //设置或获