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

本插件功能:替换掉网页中的指定图片的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. 机房收费系统之【只允许一个MDI窗体 错误:426】 标签: vb 2014-08-15 10:36 1149人阅读 评论(23)

    机房收费系统的主窗体是MDI窗体,为了在这个窗体上添加控件,所以我们在窗体上添加了picture控件,在MDI窗体中,子窗体实际上位于MDIClient里,即子窗体的父窗体就是MDIClient,而放 ...

  2. Vue指令:v-for的用法;v-bind绑定class的几种写法;tab标签切换

    一.v-for 的用法 循环指令,可以遍历 Number.String.Object.Array: 循环数字.字符串:有2个参数,分别是value和索引值: 循环对象:有3个参数,分别是 属性值.属性 ...

  3. mysql通过TEXT字段进行关联的优化方案

    mysql如果通过超长的字段进行on关联,会导致效率很低,7k关联1.4k,结果为30+W的数据量,执行时间高达50秒. 将这个字段进行md5,然后再通过md5后的值进行关联,执行效率会大大优化,同样 ...

  4. XAML 特效

    <Window x:Class="WpfApp5.MainWindow" xmlns="http://schemas.microsoft.com/winfx/200 ...

  5. Vue.js 第3章 axios&Vue过渡动画

    promise 它将我们从回调地狱中解脱出来 创建和使用 var fs = require('fs') // 创建promise // reslove表示执行成功后调用的回调函数 // reject表 ...

  6. C++高精度加减乘除模板

    其中高精度乘法通过了POJ2389,其他没有测过,不过应该是没有问题的. 其中高精度除法返回一对string,分别表示商和余数. 代码: #include <bits/stdc++.h> ...

  7. jqLite

    一.关于DOM导航的jqLite方法 children() 返回一组子元素.这个方法的jqLite实现不支持jQuery所提供的选择器特性 eq(index) 从一个元素集合中返回指定索引下的元素 f ...

  8. 洛谷P5019 铺设道路 题解 模拟/贪心基础题

    题目链接:https://www.luogu.org/problemnew/show/P5019 这道题目是一道模拟题,但是它有一点贪心的思想. 我们假设当前最大的深度是 \(d\) ,那么我们需要把 ...

  9. Educational Codeforces Round 5(A,B题)

    虽然是水题但还是贴下代码把 A #include<cstring> #include<cstdio> using namespace std; ; char x[qq],y[q ...

  10. Python工程编译成跨平台可执行文件(.pyc)

    原文:https://blog.csdn.net/zylove2010/article/details/79593655 在某些场景下,若不方便将python编写的源码工程直接给到其他人员,则可以将p ...