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)
    ``

相关推荐
电脑能手7 小时前
如何远程访问在WSL运行的Jupyter Notebook
ide·python·jupyter
迷路爸爸1808 小时前
让 VSCode 调试器像 PyCharm 一样显示 Tensor Shape、变量形状、变量长度、维度信息
ide·vscode·python·pycharm·debug·调试
晚风_END12 小时前
Linux|服务器|二进制部署nacos(不是集群,单实例)(2025了,不允许还有人不会部署nacos)
linux·运维·服务器·数据库·编辑器·个人开发
死也不注释15 小时前
【unity编辑器开发与拓展EditorGUILayoyt和GUILayoyt】
unity·编辑器·游戏引擎
电子小子洋酱15 小时前
VScode SSH远程连接Ubuntu(通过SSH密钥对的方式)
vscode·物联网·ubuntu·ssh
DogDaoDao17 小时前
Windows下VScode配置FFmpeg开发环境保姆级教程
windows·vscode·ffmpeg·音视频·gcc
Hy行者勇哥17 小时前
在 JetBrains 系列 IDE(如 IntelliJ IDEA、PyCharm 等)中如何新建一个 PlantUML 文件
ide·pycharm·intellij-idea
pk_xz12345617 小时前
在Intel Mac的PyCharm中设置‘add bin folder to the path‘的解决方案
ide·人工智能·科技·算法·macos·pycharm·机器人
aningxiaoxixi18 小时前
vscode 中的 mermaid
网络·ide·vscode
旷世奇才李先生19 小时前
Eclipse 安装使用教程
java·ide·eclipse