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

相关推荐
SUNxuetian11 小时前
【Android Studio】升级AGP-8.6.1,Find Usage对Method失效的处理方法!
android·ide·gradle·android studio·安卓
AllData公司负责人14 小时前
实时开发IDE部署指南
大数据·ide·开源
TOSUN同星17 小时前
干货分享 | TSMaster DBC编辑器操作指南:功能详解+实战示例
数据库·oracle·编辑器·汽车·软件工程
LIN-JUN-WEI18 小时前
[ESP32]VSCODE+ESP-IDF环境搭建及blink例程尝试(win10 win11均配置成功)
c语言·开发语言·ide·vscode·单片机·学习·编辑器
MUTA️1 天前
pycharm中本地Docker添加解释器
ide·python·pycharm
Ronin3051 天前
【Linux系统】vim编辑器 | 编译器gcc/g++ | make/Makefile
linux·运维·服务器·ubuntu·编辑器·vim
织_网1 天前
Visual Studio Code 中统一配置文件在团队协作中的应用
ide·vscode·编辑器
界面开发小八哥1 天前
「Java EE开发指南」如何用MyEclipse创建一个WEB项目?(三)
java·ide·java-ee·myeclipse
花花鱼1 天前
android studio 设置让开发更加的方便,比如可以查看变量的类型,参数的名称等等
android·ide·android studio
雷羿 LexChien1 天前
从 Prompt 管理到人格稳定:探索 Cursor AI 编辑器如何赋能 Prompt 工程与人格风格设计(上)
人工智能·python·llm·编辑器·prompt