手把手教你写浏览器脚本和谷歌插件

1,655 阅读2分钟

简单脚本

写脚本的初衷是看见一篇关于"快速查看网页"的博客.

实现方式就是写一段JS代码,添加到书签,点击书签后就会执行这段JS代码.

受到这个启发,想想其实还有很多其它功能也可以通过这种方式实现

视频快进

在我们用浏览器观看视频的时候,有些网站的视频不支持快进播放.咳咳,这个不支持快进的网站我们可以通过自己写脚本来实现快进功能

1.添加以下css代码
// 1.5倍
javascript: (function (){document.querySelectorAll('video')[0].playbackRate = 1.5})();
// 2倍
javascript: (function (){document.querySelectorAll('video')[0].playbackRate = 2})();
// 1倍 用于恢复正常播放
javascript: (function (){document.querySelectorAll('video')[0].playbackRate = 1})();

2.借助Chrome 的书签功能
一.打开书签管理页
二.右上角三个点「添加新书签」
三.名称随意,粘贴代码到网址中

然后我们就可以在播放视频的网站上点击刚才创建的书签,来进行快进等操作。

谷歌插件

如果只是想实现简单的功能,那么通过上边说的脚本就可以实现.但是如果想实现更复杂代码量很大的功能,这时候就需要编写谷歌浏览器插件了. 这个实现也很简单.

按钮连点

简单的例子: 网页连点功能,比如电商秒杀需要连点 这里用百度的'百度一下'按钮连点做例子

1.新建主文件:manifest.json

{    
  "name": "连点",      
  "version": "0.2",  
  "manifest_version": 2,        
  "description": "连点",        
  "icons": { // 非必选 可以删掉                       
    "16": "./images/111.png",
    "128": "./images/111.png"	 
  },       
  "permissions": [  // 允许哪种url连接通过
    "tabs", "http://*/*","https://*/*"   
  ],  
  "content_scripts":[
    {
        "matches":["https://www.baidu.com/*"],
        "js":["autoclickflush.js"]
    }
  ]     
} 

2.新建文件autoclickflush.js


var timecount = 0;
function autoClick() {
  timecount++;
  document.querySelectorAll("input[value='百度一下']")[0].click();
  if (timecount === 10000) {
    clearInterval(interval);
  }
}

var interval = setInterval(autoClick, 1000);

3.浏览器加载插件,在你代码指定的网站,识别到指定的按钮,就会进行操作

image.png

更多

谷歌浏览器插件开发规范api已经更新到了V3,想学习更多插件开发技巧可以看这篇文章