油猴脚本开发入门,扩展开发

2019-10-07 08:47 来源:未知

油猴脚本是三个浏览器扩充,如若你还没听闻过这就差相当少是太古时候的人了 ...
脚下的话,使用的人群最多的就是浏览器狂热者和大前端码农了呢,对于前者,都在疯狂的找脚本,后面一个则疯狂的输出 →_→

一、入门

在线观察录像要求VIP,在线浏览网站各个广告,在线听音乐版权限制…笔者想你也和本身同一有这么些忧愁,可是后天作者在网络无意浏览到一款很有力的工具,汉语名称油猴,所以明日来跟大家享用一下。

油猴帮忙广大主流的浏览器,Chrome、Firefox、Edge、Opera、Safari、UC等等,所以实现了剧本的贰遍编写,到处运转了吗,认为基于浏览器的运用才总算真正的跨平台了。

那是构建chrome扩张插件的入门指南,无需别的编程基础,看完那个后,大家就入手做要好的Chrome插件了。好呢,我们后天就开头,其实本人也是个新手。

关于如何设置Chrome插件,请看本人事先分享:何以在Chrome浏览器里面安装Chrome插件?

先是上官方网站 http://tampermonkey.net/ 下载只怕在 Chrome应用集团里搜求油猴下载扩张程序,然则那须求借助梯子,还好境内也许有Chrome插件的网址,百度时而也能找到。

图片 1

Greasemonkey(维基百科)

设置到位后,油猴会在浏览器的恢宏插件栏上发生贰个Logo:

准备工具

Greasemonkey,简称GM,中文俗称为“油猴”,是Firefox的一个增大组件。它让客商安装一些剧本使当先61%HTML为主的网页于客商端直接退换得更有益于易用。随着Greasemonkey脚本常驻于浏览器,每一趟随着指标网页张开而自动做修改,使得运营脚本的客商影象深切地享受其定位便利性。

油猴插件

做别的业务都要有个工具,制作chrome插件供给的工具比少之甚少。

Greasemonkey可替网页插足些新成效(比方在亚马逊书店嵌入商品比价功效)、改正网页错误、组合来自不一样网页的多寡、也许数繁比不上备载的别的职能。写的好的Greasemonkey脚本以至可让其出口与被涂改的页面集成得白璧无瑕,疑似原来网页里的一片段。

点击踏向管理面板之后,就可以步向油猴的主分界面:

  • 记事本,用来编排代码
  • Chrome浏览器,这几个无法少呢。Windows下,全数版本的Chrome都得以营造插件。Linux下必要下载Beta版本,Mac下载dev版本。

油猴插件原来在火狐上发布,名称为Greasemonkey。Chrome上的近乎插件正是Tampermonkey,它们选择的脚本是通用的。Tampermonkey适用于Chrome、Microsoft Edge、Safari、Opera Next和Firefox,IE不可能。

油猴

开始制作第一个插件

自己当下习认为常使用了Chrome浏览器,不止因为它相当慢牢固,越多的还应该有Chrome浏览器壮大的插件增加功效,所以也推荐大家使用Chrome的浏览器。油猴插件安装到位后,大家得以设置多姿多彩的脚本实现大家的个人要求。

最侧边的小图标使用来创立脚本的,设置项用于对油猴插件进行安装,平日没什么须求修改的,保持默许就可以。

  • 在Computer中开创三个目录来寄存插件代码。
  • 在目录里面成立文件manifest.json(注意后缀名是.json),用记事本张开,写入如下代码
    1. {
    2.   "name": "第一个Chrome插件",
    3.   "version": "1.0",
    4.   "description": "小编的第二个Chrome插件,还不易啊",
    5.   "browser_action": {
    6.     "default_icon": "icon.gif"
    7.   }
    8. }

你可以:

实用工具里,我们有众多办法导入导出脚本财富,你能够将你征集的脚本财富贮存在 Google Drive 大概 Dropbox 上,也能够导出压缩文件,那样改换了旅行器照样能够使用原本的台本插件。

  • 把下边两张图片保存到文件夹中,分别取名icon.gif和smile.gif
    图片一: 图片 2     图片二: 图片 3
  • 设置这一个插件:
    a.点击右上角扳手,选用扩展程序,展开扩充中央。
    b.点击右上角的“开辟职员形式”,使得前边的“+”形成“-”,张开相应的美食做法。假如一先导即是“-”,那么不用点击。
    c.点击“载入正在开采的恢宏程序按键”,导入刚才创设的文书夹。

1 无偿收听新浪云音乐的高格调录制

已设置的本子里展现的是您眼下安装的剧本,能够启用大概关闭脚本。

假使一切顺利,你的Chrome地址栏将会有个新Logo,你的率先个插件诞生了。

2 无广告浏览各大网址,去除百度搜索广告

内需注解的是,安装未知的台本使十分不安全的,这个本子能够监听网络诉求,开关等趁机操作,所以必得设置可信赖来源的剧本,假若熟悉JavaScript,能够审阅源代码,检查是还是不是代码中隐含敏感操作。

给第一个插件增加新功能

3 去除各样网址的验证码服务

合法的脚本源:https://openuserjs.org/ ,能够在此搜索增多脚本,有哪些推荐的本子也足以上逼乎搜索一番,这里就不赘述了。

您以后虽说做了第三个插件,但实际上她并从未落到实处任何意义,大家点击Logo,未有另外反响。上边大家就给他增添点效能。

4 下载各大录制网址的VIP录制

接下去的,就是在意平凡的人和大前端的人的一部分游戏的方法了,大前端绕路,点击浏览器右上角 X 图标。

  • 编写manifest.json那几个文件,用上边的代码替换现存的代码,其实大家只是加了一站式代码和八个逗号而已。

    1.    "name": "第一个Chrome插件", 
    2.    "version": "1.0", 
    3.    "description": "笔者的首先个Chrome插件,还行啊", 
    4.    "browser_action": { 
    5.       "default_icon": "icon.gif", 
    6.       "popup": "popup.html" 
    7.    }
    8. }
  • 下边大家成立一个文书文件popup.html,用记事本展开,将上面包车型大巴代码写进去

    1. <p>Hello,Chrome!</p>
    2. <p>我的名字叫ChromeChina!</p>
    3. <p><a href="" target="_blank">Chrome中文论坛迎接您</a>
    4. <p><img src="smile.gif" /></p>

还应该有众多居多精锐的作用,这里就不一一列举了。

率先我们得以尝试创造三个新的脚本:

  • 回到Chrome的增添中央,点击插件下的“重新载入 ”。

1.下载油猴插件

在插件市集一向搜索Greasemonkey或tampermonkey

1.1比如您可以访谈Chrome web store的话,你能够间接待上访谈那一个链接地址举行下载安装:

https://chrome.google.com/webstore/detail/tampermonkey/dhdgffkkebhmkfjojejmpbldmpobfkfo

本身截取了一张Chrome Web Store的截图,我们能够看见,最近油猴那款插件的客商已经到达了1000W+,并且终结到小说编写日也曾经有41825的顾客五星好评,可知它的受招待程度。

图片 4

1.2 要是你无法访问Chrome web store的话,你能够一向访谈油猴的官方网址依照浏览器举行下载(全平台补助):http://tampermonkey.net

图片 5

油猴

今昔点击插件Logo看看。大家的首先个插件算是制作成功了。

2.设置油猴插件(Chrome为例)

2.1拜望到油猴插件Chrome Web Store链接地址后,直接点击“增多至Chrome”:

图片 6

2.2浏览器出现弹窗,选用“添加扩张程序”:

图片 7

2.3认可“增加扩大程序”后,浏览器将对插件实行下载,下载安装达成以往会在浏览器中出现Logo提示并跳转至一个网页提醒安装成功,大家能够点击油猴插件的Logo:

图片 8

剧本全体结构便是如此了,name 是顶替你的本子名称,namespace 是命名空间,能够用你的网址名称,version 是您的台本当前版本,那样别人如若利用了你的脚本,仍是可以够及时更新。description 是对您的本子的叙述,举个例子:百度特级VIP破解 等等,author 是您的芳名,match 是您的台本在非凡到什么 url 时才触产生效。

打包插件

3.脚本增加

3.1探望该网站步入网址首页:https://greasyfork.org/zh-CN

图片 9

3.2大家能够选用进行查找,只怕直接进去到脚本列表查看脚本:

https://greasyfork.org/zh-CN/scripts

图片 10

3.3在本子列表个中,大家能够选用某些脚本查看脚本详细情形页面,步向到脚本详细情形页面后,点击“安装此脚本”就可以,再往下看都有哪些行使的课程:

图片 11

在开首接下去的实例的时候,你供给忧盛危明的文化有:

我们想把团结创设的插件给其余人用,那么就供给将插件打包。

4.脚本推荐

4.1 破解VIP会员摄像集合,破解优酷、Tencent、乐视、爱奇艺、望果、AB站、音悦台等VIP或会员录制

链接地址:http://dwz.cn/61lzIq

4.2 搜狐云音乐高音质帮忙

链接地址:http://dwz.cn/1Xeocu

4.3 购物党比价工具

链接地址:http://dwz.cn/61lA86

4.4百度广告(首尾推广及侧边广告)清理

链接地址:http://dwz.cn/4Mzqpb

HTML+Javascript+jQuery

  • 回去Chrome的插件扩张中央,点击“打包扩大程序”按键。
  • 选取刚刚创设的文书夹,点击显明生成后缀为crx和cpm文件各一个。

5.脚本下载站推荐

https://sleazyfork.org/zh-CN

https://greasyfork.org/zh-CN

图片 12

想要系统性的就学,能够去 MDN 看看: https://developer.mozilla.org/zh-CN/

把crx文件发送给本人的情人,告诉她们你也会创造chrome插件吧。

修改我们的剧本内容如下:

您能够修改里面包车型大巴文字图片,制作出极具天性的扩张来了。

油猴

借使在炮制进程中有任何难题,应接到http://dev.chromechina.com来商讨交换。本文参谋官方指南编写。

下一场保留,张开任何多个网址都会弹出 'hello world'

二、概述

油猴

那篇小说翻译自。

如此,你的第二个本子就已经支付产生了。

假定看完那篇小说,何况做过入门指南开中学的例子,你就足以真正初始支付属于本人的Chrome插件了。

接下去,大家能够进级一下,对百度的 logo 做点变化,每一遍打开百度都给她出示一头小狗图片。

基础知识

透过 Chrome 的核查成分功效,知道那一个 logo 是在三个 id 为 lg 的 div 下的,大家若是替换这一个 div 或然个中的 img 的 src 属性值就能够,这里阴毒的替换 div 的剧情就行。

一个Chrome增添是由HTML、CSS、JavaScript、图片等公事减弱而成。扩充实际上正是叁个web页面,你能够用别样浏览器提需求web页面包车型客车接口,从XMLHttpRequest 到JSON ,再到HTML当地缓存都能够利用。

油猴

Chrome扩充能做怎么着吗?大家必然使用过局地扩充,会发现有个别增加在Chrome地址栏侧面区域扩张一个Logo。还某些扩大能够和浏览器的局部因素(如书签、tab导助航标记签)交互。增添还足以和web页面交互,以至是从web服务器获取数据。更加详细的内容能够从Developer's Guide看到。

修改我们的脚本内容如下:

Chrome扩展的组成文件

油猴

各类扩大由下列文件组成:

剧本意思是寻找 div id 为 lg 的成分,假诺找到了,就将 html 内容重新调换为新的 img 标签,img 的图纸路径为我们自定义的图纸路线。

  • 一个manifest文件(主文件,json格式)
  • 起码一个HTML文件(核心得以未有HTML文件)
  • JavaScript文件 (可选,非必须)
  • 其余其余你供给的文本(比方图片)

封存后大家再度展开百度:

当你付出二个恢宏的时候,必要把这几个文件放在一个文书夹里,当你公布那么些扩展的时候,这么些文件夹下的兼具文件将会打包成二个非同一般后缀.crx的ZIP文件。

油猴

援用文件

发掘百度的 logo 已经被替换了,但是,是在百度 logo 加载成功后才替换的,那么有怎么着点子一开头让他就加载小狗图片呢,大家尝试利用 DOMContentLoaded 事件。

你可以放置任何公文到您的扩展里面,可是怎么调用这么些文件呢?日常的话,使用相对地址调用,类似HTML中调用文件。下边是个例子,在子文件夹images中有个图片myimage.png,大家得以如此调用它

window.addEventListener("DOMContentLoaded", function(){
    // 君の代码。
}, false);
  1. <img src="images/myimage.png">

结果是,事件不实行了,中期很四个人写的台本都以行使 DOMContentLoaded ,然近日后极其了,不晓得是否油猴升级了产生的,那本也总算个不安全的隐患呢。

复制代码

收起来讲说哪些调整大家写的脚本,很简短,前期小编为开支公司级应用的时候针对的都以IE6~8浏览器,可未有像 Chrome 这么庞大的调整工具,都以用的 debugger 设置断点,然后附加到 Visual Studio 中去调解,这里大家也能够用 debugger,然后展开 Chrome 调控台。

里面images/myimage.png表示那一个文件。

但是还大概有个难点正是本子有的时候候会试行多次,那些相比烦。只可以依赖 jQuery 的文档就绪函数来剖断了。

兴许你放在心上到当使用谷歌 Chrome debugger查看那些文件的时候给,各样文件的地点是底下这种格式

// ==UserScript==
// @name         第一个脚本
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @include      *
// @require      http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js
// @grant        unsafeWindow
// ==/UserScript==
jQuery.noConflict();
(function( $ ) {
    debugger;
    var a=12;
    var b=45;
    var c = a+b;
    var d = a-b;
})( jQuery );
  1. chrome-extension://<extensionID>/<pathToFile>

在地点的代码中,大家也步向了 debugger,再度保存,张开浏览器:

复制代码

油猴

其一地方中,<extensionID>是你制作的扩张的有一无二标示符,也便是扩张的居民身份证号码。<pathToFile>是文件相对扩充一流文件夹得地方。

接下去 F10 和 F11 实行调解了,在右边手 Local 窗口能看到进行变量值。

manifest文件

油猴

主文件取名manifest.json,用来汇报这一个增添,包含增添名字、版本、调用的公文、可用域等新闻。上面是个优秀的manifest文件,那个扩张能够调用google.com的内容。

OK,至此,关于怎么着初始开采油猴脚本就说罢了,期望咱们为油猴脚本能源多做贡献!

  1. {
  2.   "name": "My Extension",
  3.   "version": "2.1",
  4.   "description": "Gets information from Google.",
  5.   "icons": { "128": "icon_128.png" },
  6.   "background_page": "bg.html",
  7.   "permissions": ["", "],
  8.   "browser_action": {
  9.     "default_title": "",
  10.     "default_icon": "icon_19.png",
  11.     "popup": "popup.html"
  12.   }
  13. }

复制代码

TAG标签:
版权声明:本文由金沙澳门官网4166发布于世界史,转载请注明出处:油猴脚本开发入门,扩展开发