火狐插件油猴Greasemonkey系列二

阅读更多

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

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

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

以下是加载bootstrap库的测试。

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

 

2、page.html

	

		content button
	
	
用户脚本安装

 

 

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('');

var button_str = '' +
  'script button' + 
	'';

var modal_str = 
'
' +
  '
' +
    '
' +
      '
' +
        '×' +
        '
Modal title
' +
      '
' +
      '
' +
        '测试' +
      '
' +
      '
' +
        'Close' +
        'Save changes' +
      '
' +
    '
' +
  '
' +
'
';

$('#container').append(button_str);
$('#container').append(modal_str);

 

4、总结

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

 

• 
• 大小: 33.6 KB

• 查看图片附件