时光偷走的，永远都是我们眼皮底下看不见的珍贵。

本插件功能：替换掉网页中的指定图片的src地址。

使用插件前：

使用插件后：

鲜花（闲话）：这个网站的不加水印的图片连接被保存在，图片的data-image属性中。那么就直接替换src的地址就ok了。

插件文件夹结构：

主要文件：manifest.json

{

    "name": "Hello Extensions",

    "description" : "Hello world Extension",

    "version": "1.0",

    "manifest_version": 2,

    "browser_action": {

        "default_popup": "hello.html",

        "default_icon": "hello_extensions.png"

    },

    "commands": {

        "_execute_browser_action": {

        "suggested_key": {

            "default": "Ctrl+Shift+F",

            "mac": "MacCtrl+Shift+F"

        },

        "description": "Opens hello.html"

        }

    },"content_scripts":

    [

        {

            "matches": ["http://www.stu114.com/*"],

            "js": ["js/replace.js"],

            "run_at": "document_end"

        }

    ]

  }

replace.js

function getClass(oParent,aClass){　　　　　　　　　　　　　//oParent为要获取的className的父级元素对象

    　　var aEle = document.getElementsByClassName('smort');　　   //定义一个变量通过通配符获取所有标签

    　　for(var i=0;i<aEle.length;i++){　　　　　　　　　　　  //遍历获取class名称的元素

            var item = aEle[i];

    　　　　 var dataimg=item.getAttribute('data-image');

            item.setAttribute('src',dataimg);

    　　}

    }

    getClass();

hello.html

<html>

    <body>

      <h1>Hello Extensions</h1>

    </body>

</html>

做好了之后，使用chrome加载插件：

虾扯：需要打开开发者模式

ok~结束

闲着没事，做个chrome浏览器插件，适合初学者的更多相关文章

  1. 使用 Chrome 浏览器插件 Web Scraper 10分钟轻松实现网页数据的爬取

    web scraper 下载:Web-Scraper_v0.2.0.10 使用 Chrome 浏览器插件 Web Scraper 可以轻松实现网页数据的爬取,不写代码,鼠标操作,点哪爬哪,还不用考虑爬 ...

  2. 强烈推荐 10 款珍藏的 Chrome 浏览器插件

    Firebug 的年代,我是火狐(Mozilla Firefox)浏览器的死忠:但后来不知道为什么,该插件停止了开发,导致我不得不寻求一个新的网页开发工具.那段时间,不少人开始推荐 Chrome 浏览 ...

  3. chrome浏览器插件启动本地应用程序

    chrome浏览器插件启动本地应用程序 2014-04-20 00:04:30|  分类: 浏览器插件|举报|字号 订阅     下载LOFTER我的照片书  |     chrome的插件开发这里就 ...

  4. Rest Client(Rest接口调试工具，有保存功配置功能) chrome浏览器插件

    Rest Client(Rest接口调试工具,有保存功配置功能) chrome浏览器插件 下载地址 插件的操作很简单,下面是一些简单的实例. 1.安装 在谷歌应用商城搜索postman,如下图1-1所 ...

  5. chrome浏览器插件window resizer调试webapp页面大小

    chrome浏览器插件window resizer可以调整当前浏览器分辨率大小 可以自定义大小,以适合于andorid和iphone设备

  6. 用Javascript编写Chrome浏览器插件

    原文:http://homepage.yesky.com/62/11206062.shtml 用Javascript编写Chrome浏览器插件 2010-04-12 07:30 来源:天极网软件频道 ...

  7. chrome浏览器插件开发经验（一）

    最近在进行chrome浏览器插件的开发,一些小的经验总结随笔. 1.首先,推荐360的chrome插件开发文档:http://open.chrome.360.cn/extension_dev/over ...

  8. 还在为百度网盘下载速度太慢烦恼?chrome浏览器插件帮你解决！

    百度网盘已然成为分享型网盘中一家独大的“大佬”了.时代就是这样不管你喜不喜欢,上网总会遇到些百度网盘共享的文件需要下载.然而,百度网盘对免费用户的限速已经到了“感人”的地步了,常常十多KB/秒的速度真 ...

  9. 15款Chrome浏览器插件让设计师告别拖延症

    秋高气爽,分享一大波有效帮助设计师提高工作效率的Chrome浏览器扩展程序! 高效是另一种王道 无论是在工作中,还是在生活中,有些词我们说来就满满正能量,而另外一些话提起就很沮丧,后者如拖延症,前者如 ...

随机推荐

  1. 【JZOJ4359】【GDKOI2016】魔卡少女

    题目描述 君君是中山大学的四年级学生.有一天在家不小心开启了放置在爸爸书房中的一本古书.于是,君君把放在书中最上面的一张牌拿出来观摩了一下,突然掀起一阵大风把书中的其她所有牌吹散到各地.这时一只看上去 ...

  2. Python3 写的远程批量修改文件内容的脚本

    一.说明: 1.利用Python的paramiko模块,调用远程的shell命令去修改相应文件. 2.有一个专用配置文件,列出服务器清单. 3.Python循环读取配置文件的服务器IP去连接它,并执行 ...

  3. Java练习 SDUT-3848_Shift Dot

    Shift Dot Time Limit: 1000 ms Memory Limit: 65536 KiB Problem Description 给出平面直角坐标系中的一点,并顺序给出n个向量,求该 ...

  4. Android实现圆角边框

    http://www.cnblogs.com/flyme/archive/2012/06/20/2556259.html android shape的使用 http://www.cnblogs.com ...

  5. Android 监听软键盘搜索键

    现在很多的Android应用都有了数据搜索功能,在以往的设计上,会使用搜索框+搜索按钮来实现搜索功能: 现在呢,越来越流行的是,去除搜索按钮,直接监听软键盘搜索键,当用户输入完搜索关键字后,直接点击软 ...

  6. oracle函数 sysdate

    [功能]:返回当前日期. [参数]:没有参数,没有括号 [返回]:日期 [示例]select sysdate  hz from dual; 返回:2008-11-5

  7. 「BZOJ2510」弱题

    「BZOJ2510」弱题 这题的dp式子应该挺好写的,我是不会告诉你我开始写错了的,设f[i][j]为操作前i次,取到j小球的期望个数(第一维这么大显然不可做),那么 f[i][j]=f[i-1][j ...

  8. laravel 验证码手机与提交手机的验证？

    假如我用自己的手机号码获得了验证码,然后在点击提交之前,更换了手机号一栏的input,用一个比如18888888888的手机号进行注册,用之前得到的验证码,是不是会出现注册成功的情况?是否应该考虑验证 ...

  9. vue2——指令渲染，{{}}渲染

    博客地址 :https://www.cnblogs.com/sandraryan/ 声明式的渲染,以{{}}的形式调用数据 <!DOCTYPE html> <html lang=&q ...

  10. day1_python运算符

    运算符 计算机可以进行的运算有很多种,可不只加减乘除这么简单,运算按种类可分为算数运算.比较运算.逻辑运算.赋值运算.成员运算.身份运算.位运算,今天我们暂只学习算数运算.比较运算.逻辑运算.赋值运算 ...