Tampermonkey 使用本地编辑器开发的流程

关于Tampermonkey 使用本地编辑器开发的一些准备工作

在Tampermonkey 提供的编辑器里面进行编码实在是太劳累了,于是找了找使用本地编辑器编写代码的方法,在这里做一下总结。

打开各项设置

在Tampermonkey 设置中,打开原生导入脚本

snipaste_20181222_203858.png

然后这个时候应该会显示一个warning,提示需要浏览器允许插件访问文件网址

这一步直接右键菜单栏的Tampermonkey,选择“管理扩展内容”,然后找到“允许访问文件网址”即可。

在第三项,还要求提供“浏览器配置文件路径”,这个也不难找。win+e打开Exploreralt+d进入地址栏,输入

%userProfile%/AppData/Local/

然后找到自己当前使用的浏览器的哪个文件夹,比如我当前使用的CentBrowser,Chrome应该是Chrome

然后找到浏览器文件夹下的 \User Data\Default\Extensions\

到这一步会出现一个有很多Hash过的文件夹名,这个不用着急,还是到浏览器,右键插件图标,点击Tampermonkey,会跳转到谷歌应用商店,这个时候地址栏最后的一串就是你要找的那个Hash了。

这个时候,如果你没有关闭地址栏完全路径展示的话,你可以点击一下地址栏空白处,最终应当填进去的路径应该是

C:\Users\<UserName>\AppData\Local\CentBrowser\User Data\Default\Extensions\dhdgffkkebhmkfjojejmpbldmpobfkfo

到这个时候,Tampermonkey访问本地文件已经没有其他缺陷了。

使用方式

随便在哪里新建一个.js文件,然后再新建一个脚本,在脚本Header中添加

// @require    file:// <-path-> 

<-path-> 应当是这个文件的绝对路径,例如 D:\a.js,然后保存该脚本

这个时候你使用本地编辑器编辑完毕 a.js 的时候,刷新网页,就可以看到Tampermonkey正常require本地文件了。

注意,在发布的时候,一定要把require本地文件的代码删掉,把本地的代码复制到脚本文件中

总结

这只是一个简单的小经验,其实还可以做更多的扩展,比如做一些 Webpack 之类的,让require自动监听指定的文件,甚至使用webpack 自动刷新网页,搜了一下,有类似的webpack插件,名字叫做webpack-tampermonkey,看介绍仅仅是将代码整合成.user.js

标签: tampermonkey, 本地编辑, 用户脚本开发

添加新评论