如何通过vscode编辑油猴子脚本

偷懒技术 小碎银 3年前 (2020-11-04) 3632次浏览 0个评论

油猴子是个很伟大的浏览器扩展。

通过它,用户可以在页面中插入自己的js代码,这就能做非常多的事情了!

如果读者朋友之前未了解过油猴子,真的很建议搜索了解下!


本文简单介绍如何通过vscode或者其它的编辑器编辑油猴子脚本的方法.

这几天我打算写一个油猴子脚本,分析自己每天在谷歌上搜索的内容。

那么,首先要先在油猴子中新建一个脚本:

如何通过vscode编辑油猴子脚本

新建的脚本中会自动生成如下内容:

如何通过vscode编辑油猴子脚本

 

说实话,油猴子本身的编辑器确实不好用。而且每次修改代码,都需要先手动保存,然后切换页面,刷新页面,有点麻烦,打消人的积极性。

所以用本地更强大好用的编辑器,比如vscode、webstorm来编辑油猴子脚本,能很大的提高代码编写体验。

要想使用本地的编辑器,需要如下设置:

如何通过vscode编辑油猴子脚本

在浏览器的油猴子脚本上点击右键,选择『选项』,打开 允许访问文件网址:

如何通过vscode编辑油猴子脚本

接着打开你心爱的编辑器,我用的是vscode,新建一个js文件,然后复制文件的绝对路径:

如何通过vscode编辑油猴子脚本

 

然后修改油猴子的脚本,把文件的绝对路径写进去,

// @require file://+文件的绝对路径

如果你的电脑是Windows系统,这个路径按照这个方式写:

// @require      file://C:\path\to\userscript.user.js

如下图:

如何通过vscode编辑油猴子脚本

把脚本保存一下。

接着回到vscode中,在刚才新建的js文件中随便写点东西测试一下:

如何通过vscode编辑油猴子脚本

然后打开www.google.com,打开控制面板,在console中就能看到输出了!

如何通过vscode编辑油猴子脚本

 

这就表示可以在vscode中继续编写代码了。


小碎银 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:如何通过vscode编辑油猴子脚本
喜欢 (11)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址