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

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

使用插件前：

使用插件后：

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

插件文件夹结构：

主要文件：manifest.json

  1. {
  2.     "name": "Hello Extensions",
  3.     "description" : "Hello world Extension",
  4.     "version": "1.0",
  5.     "manifest_version": 2,
  6.     "browser_action": {
  7.         "default_popup": "hello.html",
  8.         "default_icon": "hello_extensions.png"
  9.     },
  10.     "commands": {
  11.         "_execute_browser_action": {
  12.         "suggested_key": {
  13.             "default": "Ctrl+Shift+F",
  14.             "mac": "MacCtrl+Shift+F"
  15.         },
  16.         "description": "Opens hello.html"
  17.         }
  18.     },"content_scripts":
  19.     [
  20.         {
  21.             "matches": ["http://www.stu114.com/*"],
  22.             "js": ["js/replace.js"],
  23.             "run_at": "document_end"
  24.         }
  25.     ]
  26.   }

replace.js

  1. function getClass(oParent,aClass){　　　　　　　　　　　　　//oParent为要获取的className的父级元素对象
  2.  
  3.     　　var aEle = document.getElementsByClassName('smort');　　   //定义一个变量通过通配符获取所有标签
  4.  
  5.     　　for(var i=0;i<aEle.length;i++){　　　　　　　　　　　  //遍历获取class名称的元素
  6.             var item = aEle[i];
  7.     　　　　 var dataimg=item.getAttribute('data-image');
  8.             item.setAttribute('src',dataimg);
  9.     　　}
  10.  
  11.     }
  12.     getClass();

hello.html

  1. <html>
  2.     <body>
  3.       <h1>Hello Extensions</h1>
  4.     </body>
  5. </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. Lib1vent：10链接监听器接受TCP链接

    evconnlistener机制提供了监听并接受TCP链接的方法.除非特别注明,本章的所有函数和类型都在event2/listener.h中声明. 一:创建或释放evconnlistener stru ...

  2. H5+ 分享到微信、朋友圈代码示例

    h5+分享到微信.朋友圈代码示例 在使用分享功能的时候会莫名的分享失败,debug时发现是图片过大的问题. 图片过大时ios平台上返回错误码-8,安卓上返回错误码-3(我测试是这样) 因此如果第一次分 ...

  3. 20.libgdx,stage中默认相机的使用

    主要思路: 通过查资料得知,stage中的默认封装的相机为OrthographicCamera,要操纵该相机,直接把他转化为OrthographicCamera即可使用 但是这会导致一个问题,即原本固 ...

  4. 如何实现两个input框的同步更新

    class MVVM { constructor(options) { this.$options = options; this.$el = options.el; this.$data = opt ...

  5. python内置函数and匿名函数

    一.内置函数 什什么是内置函数? 就是python给你提供的. 拿来直接⽤用的函数, 比如print., input等等. 截⽌止 到python版本3.6.2 python⼀一共提供了了68个内置函 ...

  6. 类的重载case2

    /*功能:类的成员属性和成员方法*/ public class Person{    public static void main(String args[]){        TruePerson ...

  7. 『创造 Cloud Toolkit』贡献排行榜——如何参与定义一款 IDE 插件？

    自从我们团队在去年12月发布 Cloud Toolkit(一款让开发部署效率提速 8 倍的 IDE 插件)以来,已帮助数以万计的开发者们提高了云上的部署效率,期间,开发者们不仅积极地向 Cloud T ...

  8. oracle函数 last_day(d1)

    [功能]:返回日期d1所在月份最后一天的日期. [参数]:d1,日期型 [返回]:日期 [示例]select sysdate,last_day(sysdate)  hz from dual; 返回:2 ...

  9. SSH基本原理

    SSH原理与运用:远程登录 作者: 阮一峰 年12月21日 SSH是每一台Linux电脑的标准配置. 随着Linux设备从电脑逐渐扩展到手机.外设和家用电器,SSH的使用范围也越来越广.不仅程序员离不 ...

  10. @游记@ THUWC2019

    目录 @day -???@ @day -30~-1@ @day 0@ @day 1@ @day 2@ @day 3@ @day -???@ 我这个蒟蒻居然收到了 THUWC 的邀请? 那就去试试运气吧 ...