火狐插件油猴Greasemonkey系列二

用户脚本@require和@resource引入的脚本和资源在安装时下载一次，保存在用户脚本相同的位置。

bootstrap引入的css图片资源，是相对于css文件的，如果图片文件和css文件在相同的位置，则页面显示会有问题，只能修改css里面所有的图片资源不能包含路径，这个工作量很大，难度也很大。

如果将css文件和图片资源文件保存在服务器端，在用户脚本运行时动态加载到页面头文件，虽然每次都需要从服务器端下载CSS文件和资源文件，有些许网络资源消耗，但兼容性很好，是值得推荐的方法。

以下是加载bootstrap库的测试。

1、准备web项目，路径结构如图：

2、page.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>游猴插件测试页面</title>
</head>
<body>
<div id="container">
<button οnclick="alert('page button click event:' + $)">content button</button>
</div>
<div id="install"><a href="userscripts/test.user.js">用户脚本安装</a></div>
</body>
</html>

3、test.user.js

// ==UserScript==
// @name        test
// @namespace   http://yc.telecomjs.com/gm
// @description 油猴jQuery库测试
// @include     http://localhost:8080/gm/page.html
// @require        http://localhost:8080/gm/libs/jquery/jquery-1.12.1.min.js
// @require        http://localhost:8080/gm/libs/bootstrap-3.3.6/js/bootstrap.min.js
// @grant      unsafeWindow
// @version     2.1
// ==/UserScript==
console.log('user script jquery:' + $.fn.jquery);
$('head').append('<link href="http://localhost:8080/gm/libs/bootstrap-3.3.6/css/bootstrap.min.css" rel="stylesheet">');
var button_str = '<button id="script_btn" type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">' +
'script button' +
'</button>';
var modal_str =
'<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">' +
'<div class="modal-dialog" role="document">' +
'<div class="modal-content">' +
'<div class="modal-header">' +
'<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>' +
'<h4 class="modal-title" id="myModalLabel">Modal title</h4>' +
'</div>' +
'<div class="modal-body">' +
'测试' +
'</div>' +
'<div class="modal-footer">' +
'<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>' +
'<button type="button" class="btn btn-primary">Save changes</button>' +
'</div>' +
'</div>' +
'</div>' +
'</div>';
$('#container').append(button_str);
$('#container').append(modal_str);

4、总结

以上代码经过部署测试，样式、事件均正常展示和触发，所以在引入重ajax库(jquery-ui、easyUI、bootstrap)时，由于包含图片、字体等相对路径文件，直接在用户脚本文件中引入是不方便的，通过ajax脚本方式从服务器取库文件是比较好的实践。

大小: 33.6 KB

查看图片附件

火狐插件油猴Greasemonkey系列二相关推荐

火狐插件油猴Greasemonkey系列一
油猴Greasemonkey是火狐浏览器user script插件,类似于浏览器端的页面拦截器,对于补充修改增强遗留系统功能有不错的效果.缺点在于插件是安装在浏览器端,部署不是很方便,所以只能是个小众 ...
火狐浏览器油猴子GreaseMonkey使用教程
火狐浏览器油猴子GreaseMonkey使用教程首先下载火狐浏览器安装成功后用火狐浏览器打开链接,界面如下然后搜索GreaseMonkey. 搜索结果,图标是个小猴子,然后添加到火狐浏览器,成功 ...
最强的浏览器插件——油猴脚本
最强的浏览器插件--油猴脚本文章目录: 参考: 1.https://blog.csdn.net/Jailman/article/details/81557795 2.https://www.jian ...
Chrome插件——油猴脚本的安装与使用
前言相信很多人都在使用Chrome,也喜欢使用Chrome,Chrome之所以能成为最受欢迎的浏览器和各类实用的拓展是分不开的,在众多Chrome拓展当中最好用的插件油猴当之无愧. 油猴脚本,官称T ...
火狐谷歌浏览器油猴安装过程，扩展一个看付费视频脚本为例，学习通，云课堂等软件辅助学习也能做
这个地方我做视频教程,可能得等等了(https://www.bilibili.com/video/BV18D4y1U7b9/),先看看文字教程吧首先,我们需要下载火狐或者谷歌浏览器然后打开,我们需 ...
chrome最强大的浏览器插件油猴Tampermonkey插件离线安装包免费分享下载
油猴脚本管理器 Tampermonkey 离线CRX安装包同名文章地址:http://www.xmpojie.com/697.html 一个神奇的网站: http://www.xmpojie.com/ ...
解决无法在哔哩哔哩（b站）上使用HTML5视频播放器脚本插件/油猴等插件失效的问题
文章目录 1.问题描述 2.解决方法 3.推荐使用视频插件简介特性附:[快捷键](https://github.com/xxxily/h5player#%E5%BF%AB%E6%8D%B7%E9 ...
百度网盘倍速播放插件视频倍速播放（GreasyFork TemperMonkey油猴）
一.油猴下载了油猴Temper Monkey之后,可以前往GreasyFork网站,该网站提供一些倍速播放的插件油猴的下载方法可以参考之前的 [temper monkey- Chrome插件分享 ...
油猴插件(隐藏知乎标题,屏蔽百度搜索广告)
1.隐藏知乎标题先下载安装一个浏览器插件"油猴插件"(Tampermonkey): https://www.aliyundrive.com/s/4rTXeq7R8bx 提取码: ...

火狐插件油猴Greasemonkey系列二

火狐插件油猴Greasemonkey系列二相关推荐

最新文章

热门文章