1. 加载本地脚本 common.js

用来存放公共方法,方便重用。
引用本地 JS 有两条事要做,顺序不分前后,但都要做。

  1. 正确引用本地文件// @require file://本地JS绝对路径 如:// @require file://d:/temp/common.js
  2. 设置油猴权限,允许访问文件网址。(这个没设置的话,引用了也没效果)

1: 设置油猴权限

扩展管理》高级管理》找到油猴,如下设置:
在这里插入图片描述

2: 引用本地js

重点:// @require file://d:/temp/common.js

// ==UserScript==
// @name         引用本地js示例
// @namespace    https://blog.csdn.net/jx520
// @version      0.1
// @author       jerryjin
// @match        *://*/*
// @require      file://D:/temp/common.js
// ==/UserScript==

(async function() {
    'use strict';
    // 需要执行的代码 ...
})();

D:/temp/common.js 中只有一句用于调试的日志输入。

console.log('大家好,我是笨笨,笨笨的笨,笨笨的笨,谢谢!');

注意:如果报错: @require: couldn't load @require from URL 'file://d:/temp/common.js': internal error 请检查路径是否正确。

2. 加载本地文件

除了上面的设置,在安全设置这里我开了允许访问所有本地文件。这样不需要每一个文件在UserScript 进行@require 了。
在这里插入图片描述

2.1 用 GM_getResourceText 加载资源文件

启动脚本时加载一次,后续本地文件发生变化了 GM_getResourceText 始终读取的是原来这份缓存,除非刷新页面让@resource重新加载一次。
注意:
1. // @grant GM_getResourceText
2. // @resource myTxt file:///D:/temp/csdn/log.json

// ==UserScript==
// @name         TEST调试专用
// @namespace    https://blog.csdn.net/jx520
// @version      0.1
// @author       jerryjin
// @match        *://*/*
// @grant        GM_getResourceText
// @resource myTxt file:///D:/temp/csdn/log.json
// ==/UserScript==
(async function() {
    'use strict';
    let txt = GM_getResourceText('myTxt');
    console.log(txt);
    let json = JSON.parse(txt);
    console.log(json);
})();

2.2 用 GM_xmlhttpRequest 动态读取数据

每次请求都是去读本地文件,所以都是拿到最新的数据。
注意:
// @grant GM_xmlhttpRequest

// ==UserScript==
// @name         TEST调试专用
// @namespace    https://blog.csdn.net/jx520
// @version      0.1
// @author       jerryjin
// @match        *://*/*
// @grant        GM_xmlhttpRequest
// ==/UserScript==

(async function() {
    'use strict';

    let url = "file://D:/temp/csdn/log.json";
	
    function get(url) {
        return new Promise(resolve => {
            GM_xmlhttpRequest({
                method: "post",
                responseType:'arraybuffer',
                url: url,
                headers: { "Content-Type": "text/json,charset=utf-8" },
                onload: data => resolve(new TextDecoder().decode(data.response)),
                onerror: error => resolve(error)
            });
        });
    }

    let txt = await get(url)
    console.log(txt);
    let json = JSON.parse(txt);
    console.log(json);

})();

直接加载文本存在中文乱码问题。所以这里响应类型是arraybuffer
new TextDecoder('utf-8').decode(data.response) 是将arraybuffer 转 ‘utf-8’ 字符串,解决中文乱码问题。
默认参数是 "utf-8" 可以省。

油猴相关指令说明

@resource 和 @require 是 Greasemonkey/Tampermonkey 用户脚本中常用的两个指令,它们的作用如下:

指令说明
@resource将外部资源文件(比如图片、CSS 文件、JS 文件等)嵌入到用户脚本中,使得用户脚本可以访问这些资源。语法格式为 @resource ,其中 是资源的名称(自定义), 是资源的 URL 地址。
@require在用户脚本运行时,动态加载外部 JavaScript 脚本文件,使得用户脚本可以使用这些脚本中定义的函数和变量。语法格式为 @require ,其中 是要加载的外部 JavaScript 脚本文件的 URL 地址。

@resource@require 的主要区别在于:

  1. @resource 用于将外部资源文件嵌入到用户脚本中,使用时需要指定资源的名称
  2. @require 用于加载外部 JavaScript 脚本文件。只需要指定外部 JavaScript 脚本文件的 URL 地址。

参考资料

笑虾:Tampermonkey油猴-简介
笑虾:Tampermonkey油猴 加载外部脚本 jQuery

MDN:TextDecoder 接口表示一个文本解码器。将字节流作为输入,并提供码位流作为输出。

Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐