Tampermonkey油猴 加载本地文件

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 接口表示一个文本解码器。将字节流作为输入，并提供码位流作为输出。