最近有在尝试开发简单的油猴脚本,用于帮助我实现一些简单的自动话操作。

edge运行 jnlp edge运行js脚本_edge运行 jnlp


直接在油猴提供的编辑器里面写代码其实体验已经很好了,但是它也有一些缺点,就是我在想要运行代码的时候总是要经历 ·保存·->·切换选项卡·->刷新的操作,在一些场景下我还希望能够保存我之前的变量。很是麻烦,此时便感觉到的油猴不够用了。最近无聊在随便点 Edge 浏览器的开发者工具的时候发现一篇新大陆:

edge运行 jnlp edge运行js脚本_node.js_02


文件系统和替代都很适合前端在开发时替换本地的静态开发资源,这里我重点讲一下”片段“ 这个选项卡的作用。它有点像 ”JavaScript 草稿纸“ , 之前用 Firefox 的时候发现有这么个东西的时候还高兴了好半天。当时就很纳闷 Chrome 上为什么没有,我还兴致冲冲的找了好半天。可怜我的五毛钱英语,人家是叫这个东西:

edge运行 jnlp edge运行js脚本_选项卡_03


其实这里就是一个JavaScript 代码草稿纸的东西,我们可以在新建 JavaScript 脚本,然后编写代码并且在当前页面上不断运行调试。

edge运行 jnlp edge运行js脚本_javascript_04


edge运行 jnlp edge运行js脚本_选项卡_05


很方便的有没有,下面断点调试,控制台什么的一应俱全。一言蔽之,在这里你可以“为所欲为”。

如何配合油猴进行油猴脚本开发呢?

  1. 新建一个油猴脚本,并且设置好要引入的资源
// @name         测试脚本
// @version      0.1
// @match        https://csdn.net/*
// @require      https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js
  1. 然后打开对应的你设置的页面,并确认你的油猴脚本正常运行。
  2. 打开控制台,切换到源代码选项卡。

    然后切换到片段子选项卡,新建片段,然后编写代码。在需要运行的时候使用快捷键 Ctrl+Enter

如果有代码不确认是什么样的结果的话下面还有控制台,怎么是不是很方便。

实测其实油猴引入的资源无法在片段中获取到,这里给出另外一个解决方案,是通过 <script>标签手动引一下:

var o = document.getElementsByTagName("body")[0];
o || (o = document.createElement("body"), document.documentElement.appendChild(o));
var a = document.createElement("script");
a.src = "https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js",
a.type = "text/javascript",
a.id = "injected_script",
o.appendChild(a)