vscode开发油猴插件环境配置指南

文章目录

一、环境配置

1.1油猴插件开始编写代码

  1. 在vscode 中写入如下代码'

    // ==UserScript==
    // @name cds_test
    // @namespace http://tampermonkey.net/
    // @version 0.1
    // @description try to take over the world!
    // @author You
    // @match https://bbs.tampermonkey.net.cn/thread-88-1-1.html
    // @icon https://www.google.com/s2/favicons?sz=64&domain=tampermonkey.net.cn
    // @grant none
    // @require file:///Users/chendongsheng/github/force_mokey/first_test/cds.js
    // ==/UserScript==

    (function() {
    'use strict';

    复制代码
     // Your code here...
     alert("cds first hello world")

    })();

其中的注释有几个需要注意的:

  • name 该属性描述油猴这个插件的名字
  • match 该属性描述在那些网址,该插件生效
  • require 该属性描述该脚本依赖本地的文件地址,一般用于本地开发
  1. 打开浏览器,新建一个油猴脚本,然后讲开头的注释粘贴进去
  2. 更新本地vscode内的文件代码,则会同步更新到该插件运行时。
  • 实际演示效果

    如果要让从本地拿代码运行,还需要配置一些权限,配置方法请参考下面章节

1.2油猴插件配置

1.2.1浏览器插件权限

  1. 打开油猴浏览器插件设置
  2. 打开访问本地文件权限

1.2.2插件自身权限

1.进入管理面板

  1. 进入安全,准许反问本地文件

2. 油猴脚本API学习

油猴插件自身的设置里面,是有AP I文档的,但是比较奇怪,叫做支持~

API分为2个部分,第一部分是在讲头文件的配置方法,第二部分是在讲油猴自身的API。

2.1 头文件

复制代码
@name   插件的名字
@version   插件的版本
@description 描述部分
@grant 类似C语言的include,python的import
@author 作者

@require https://code.jquery.com/jquery-2.1.3.min.js#sha256=23456...
@require 加载资源,支持md5和sha256验证

@include 加载资源

@match 在那些网址上启用该插件,支持正则匹配。
// @match *://*/*
// @match https://*/*
// @match http://*/foo*
// @match https://*.tampermonkey.net/foo*bar

@exclude 排除哪些网址

2.2 油猴API

  • 添加属性

    GM_addElement(tag_name, attributes), GM_addElement(parent_node, tag_name, attributes)

    GM_addElement('script', {
    textContent: 'window.foo = "bar";'
    });

    GM_addElement('script', {
    src: 'https://example.com/script.js',
    type: 'text/javascript'
    });

    GM_addElement(document.getElementsByTagName('div')[0], 'img', {
    src: 'https://example.com/image.png'
    });

    GM_addElement(shadowDOM, 'style', {
    textContent: 'div { color: black; };'
    });

  • 添加css

    GM_addStyle(css)

  • 下载

    GM_download(details), GM_download(url, name)
    ``

相关推荐
Java&Develop5 小时前
onloyoffice历史版本功能实现,版本恢复功能,编辑器功能实现 springboot+vue2
前端·spring boot·编辑器
聂 可 以7 小时前
IntelliJ IDEA修改实体类成员变量的名称(引入了该实体类的全部文件也会自动更新变量的名称)
java·ide·intellij-idea
MoonBit月兔8 小时前
双周报Vol.70: 运算符重载语义变化、String API 改动、IDE Markdown 格式支持优化...多项更新升级!
ide·算法·哈希算法
心之所向,自强不息12 小时前
关于Android Studio的Gradle各项配置
android·ide·gradle·android studio
二狗哈13 小时前
制作一款打飞机游戏23:编辑器ui
ui·编辑器·excel
Ven%17 小时前
VsCode如何使用默认程序打开word Excel pdf等文件
ide·vscode·pdf·编辑器
Silence4Allen17 小时前
VSCode 设置源代码根目录
ide·vscode·python·编辑器·pythonpath
张3蜂19 小时前
Jupyter Notebook 全面介绍:从原理到实战部署
ide·python·jupyter
深色風信子19 小时前
Eclipse 插件开发 2
java·ide·eclipse
mosepplin19 小时前
VSCODE 报错Fatal error: can‘t create CMakeFiles/hello_world.elf.dir/C_/Users/...
ide·vscode·编辑器