Tampermonkey油猴加载本地文件

2024-01-05 07:54| 来源: 网络整理| 查看: 265

Tampermonkey油猴加载本地文件 1. 加载本地脚本 common.js1: 设置油猴权限2: 引用本地js 2. 加载本地文件2.1 用 GM_getResourceText 加载资源文件2.2 用 GM_xmlhttpRequest 动态读取数据油猴相关指令说明参考资料

1. 加载本地脚本 common.js

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

正确引用本地文件// @require file://本地JS绝对路径如：// @require file://d:/temp/common.js设置油猴权限，允许访问文件网址。（这个没设置的话，引用了也没效果） 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 的主要区别在于：

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

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

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

【本文地址】

公司简介

联系我们

Tampermonkey油猴 加载本地文件

Tampermonkey油猴加载本地文件