​​​​ 5 分钟带你写个自己的 Chrome 扩展和油猴脚本 | 苏生不惑的博客

5 分钟带你写个自己的 Chrome 扩展和油猴脚本

发表于 | 次
| 字数统计: 1.4k 字 | 阅读时长 ≈ 5 分钟

苏生不惑第258 篇原创文章，将本公众号设为星标，第一时间看最新文章。

前几天分享过文章实用油猴脚本推荐，让你的谷歌浏览器更强大（二），有人问如何自己写个油猴脚本，今天就来分享如何写个自己的Chrome扩展和油猴脚本。

Chrome扩展编写

一个 Chrome 扩展其实就是一个配置文件 manifest.json 和一系列 html、css、js文件的集合，只要有一点点前端的基础，写一个简单的 扩展还是很简单的。

这里就带你5分钟写个简单的扩展，功能就是点击链接在新标签页打开，chrome_extension扩展目录结构如下：

1
2
3
4
5
6
7
λ tree
chrome_extension
├── icon.jpg
├── lib
│   └── jquery.min.js
├── manifest.json
└── url.js

一个icon图片文件，lib目录下一个jQuery文件（如果不依赖jQuery库可以不需要），一个配置文件manifest.json以及一个编写代码的文件url.js，就这4个文件行了。

先来看看manifest.json文件里的内容，主要在content_scripts加载的js文件：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
{
    "name":"新标签打开网页",
    "version":"2",
    "icons":{
        "16":"icon.jpg",
        "32":"icon.jpg",
        "48":"icon.jpg",
        "128":"icon.jpg"
    },
    "manifest_version":2,
    "description":"新标签打开网页 by苏生不惑",
    "content_scripts":[//执行脚本
        {
            "matches":[
                "https://*/*"//判断URL是否匹配
            ],
            "js":[//待执行的脚本
                "lib/jquery.min.js",
                "url.js"
            ]
        }
    ]
}

其实要写的代码就是url.js里的3行：

1
2
3
4
$(document).ready(function () {
	//document.querySelectorAll("a").forEach(function(item,index,arr){item.target='_blank';});
	$('a').each(function(index,item){$(this).attr('target','_blank');});
});

扩展代码写好了就可以安装到谷歌浏览器了，具体如何安装看之前文章上不了谷歌如何安装 Chrome 扩展？，打开chrome://extensions/，点击加载已解压的扩展程序，就是chrome_extension目录。

image.png
就这样安装好了，测试下没问题，原来写扩展就是这么简单，5分钟搞定，当然这只是个demo，下面来看看大名鼎鼎的油猴扩展怎么写的， 谷歌浏览器的扩展默认安装目录为 C:\Users\xxx\AppData\Local\Google\Chrome\User Data\Default\Extensions ，xxx为你的Windows用户名 ，先在扩展里找到油猴的id为 dhdgffkkebhmkfjojejmpbldmpobfkfo
image.png

找到油猴扩展的源代码目录 C:\Users\xxx\AppData\Local\Google\Chrome\User Data\Default\Extensions\dhdgffkkebhmkfjojejmpbldmpobfkfo\4.13_0 ，这个manifest.json文件写得就复杂多了。
image.png

顺便提下怎么备份Chrome扩展，这样方便迁移到新电脑使用，这个在之前文章也分享过了那些你可能不知道的谷歌浏览器实用技巧。
image.png
导出生成的crx文件就可以分享给他人使用了。
image.png
image.png
最后如果你想发布扩展到谷歌商店供他人安装 https://chrome.google.com/webstore/category/extensions ，可以在谷歌管理后台提交你的扩展https://chrome.google.com/webstore/developer/dashboard，不过需要5美元的费用。

油猴脚本编写

写油猴脚本就更简单了，先安装好油猴扩展，在公众号后台回复油猴手动安装，然后直接新建脚本。
image.png
脚本内容如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// ==UserScript==
// @name         新标签打开网页
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  新标签打开网页
// @author       苏生不惑
// @match        *://*/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';
    document.querySelectorAll("a").forEach(function(item,index,arr){item.target='_blank';});
})();

然后导出你写的脚本文件，这样方便给其他人安装使用，比如我之前分享的去除腾讯优酷爱奇艺视频logo的脚本。
image.png
同样的也可以在 https://greasyfork.org/zh-CN/script_versions/new 发布你的脚本https://greasyfork.org/zh-CN/scripts/427794 ，方便他人安装使用，比如分享过的油猴脚本实用油猴脚本推荐，让你的谷歌浏览器更强大
image.png

image.png

除了写Chrome扩展和油猴脚本，让浏览器运行脚本还有个更简单的方法就是书签。

书签

先添加一个网页到书签然后修改，复制这段代码到网址里：
javascript:"use strict";!(function(){document.querySelectorAll("a").forEach(function(item,index,arr){item.target='_blank';});})();
image.png
使用的时候点击网页上方的新标签打开网页就行了，比Chrome扩展和油猴麻烦点。
image.png

顺便分享几个书签代码，第一个是显示密码，默认输入密码的地方是星号*
javascript:"use strict";!function(){for(var tag=document.getElementsByTagName("input"),i=0;i<tag.length;i++)"password"===tag[i].getAttribute("type")&&tag[i].setAttribute("type","text")}();

第二个是解除网页限制，复制百度文库就方便了。
javascript:"use strict";!function(){var t=function(t){t.stopPropagation(),t.stopImmediatePropagation&&t.stopImmediatePropagation()};["copy","cut","contextmenu","selectstart","mousedown","mouseup","keydown","keypress","keyup"].forEach(function(e){document.documentElement.addEventListener(e,t,{capture:!0})}),alert("解除限制！")}();

第二个是自由编辑网页。
javascript:"use strict";!function(){"true"===document.body.getAttribute("contenteditable")?(document.body.setAttribute("contenteditable",false),alert("关闭自由编辑网页了！")):(document.body.setAttribute("contenteditable",true),alert("可以自由编辑网页了！"))}();

最近原创文章：

账号升级攻略：每天自动升级b站和网易云音乐，自动签到天翼云盘和百度贴吧

2021 年身份证过期了会有什么影响？

分享几个微信实用小技巧

玩转谷歌浏览器

玩转公众号

又一音乐神器APP，免费听全网音乐，同时更新解锁网易云音乐变灰歌曲方法

2021 年 一键修改微信运动步数

如果文章对你有帮助还请 点赞/在看/分享 三连支持下， 感谢各位！

公众号苏生不惑

扫描二维码关注或搜索微信susheng_buhuo