Firefox Extension에서 jQuery를 사용하는 방법
firefox 확장 내에서 jQuery를 사용하고 싶습니다. 다음과 같이 xul 파일에 라이브러리를 가져 왔습니다.
<script type="application/x-javascript" src="chrome://myExtension/content/jquery.js"> </script>
그러나 $ () 함수는 xul 파일에서 인식되지 않으며 jQuery ()도 수행하지 않습니다.
나는 문제에 대해 검색했고 몇 가지 해결책을 찾았지만 아무도 나와 함께 일하지 않았다. http://gluei.com/blog/view/using-jquery-inside-your-firefox-extension http://forums.mozillazine.org/ viewtopic.php? f = 19 & t = 989465
또한 다음과 같이 jQuery 함수에 컨텍스트 매개 변수로 'content.document'개체 ( '문서'개체를 참조 함)를 전달하려고 시도했습니다.
$('img',content.document);
하지만 여전히 작동하지 않습니다. 이전에이 문제를 겪은 사람이 있습니까?
다음을 사용합니다 example.xul.
<?xml version="1.0"?>
<overlay id="example" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<head></head>
<script type="application/x-javascript" src="jquery.js"></script>
<script type="application/x-javascript" src="example.js"></script>
</overlay>
그리고 여기에 example.js
(function() {
jQuery.noConflict();
$ = function(selector,context) {
return new jQuery.fn.init(selector,context||example.doc);
};
$.fn = $.prototype = jQuery.fn;
example = new function(){};
example.log = function() {
Firebug.Console.logFormatted(arguments,null,"log");
};
example.run = function(doc,aEvent) {
// Check for website
if (!doc.location.href.match(/^http:\/\/(.*\.)?stackoverflow\.com(\/.*)?$/i))
return;
// Check if already loaded
if (doc.getElementById("plugin-example")) return;
// Setup
this.win = aEvent.target.defaultView.wrappedJSObject;
this.doc = doc;
// Hello World
this.main = main = $('<div id="plugin-example">').appendTo(doc.body).html('Example Loaded!');
main.css({
background:'#FFF',color:'#000',position:'absolute',top:0,left:0,padding:8
});
main.html(main.html() + ' - jQuery <b>' + $.fn.jquery + '</b>');
};
// Bind Plugin
var delay = function(aEvent) {
var doc = aEvent.originalTarget; setTimeout(function() {
example.run(doc,aEvent);
}, 1);
};
var load = function() {
gBrowser.addEventListener("DOMContentLoaded", delay, true);
};
window.addEventListener("pageshow", load, false);
})();
다음 솔루션은 contentScriptFile (Targetting 1.5 Addon-sdk)에서 jQuery를 사용할 수 있도록합니다.
main.js에서 :
exports.main = function() {
var pageMod = require("page-mod");
pageMod.PageMod({
include: "*",
contentScriptWhen: 'end',
contentScriptFile: [data.url("jquery-1.7.1-min.js") , data.url("notifier.js") , data.url("message.js")],
onAttach: function onAttach(worker) {
//show the message
worker.postMessage("Hello World");
}
});
};
귀하의 message.js에서 :
self.on("message", function(message){
if(message !== "undefined"){
Notifier.info(message);
}
});
주의해야 할 몇 가지 함정 :
- contentScriptFile 배열의 순서입니다. message.js가 먼저 배치되는 경우 : jQuery가 재구성되지 않습니다.
- data.url 에 http : // URL을 넣지 마십시오 (작동하지 않음)!
- 모든 자바 스크립트 파일은 데이터 폴더에 있어야합니다. (main.js 만 lib 폴더에 있어야 함)
mozillaZine 포럼에는이 단계를 단계별로 설명하는 훌륭한 기사가 있습니다. http://forums.mozillazine.org/viewtopic.php?f=19&t=2105087
나는 아직 그것을 시도하지 않았으므로 여기에 정보를 복제하는 것을 주저합니다.
나는 이것이 Eric이 말한 것이라고 생각하지만 URL에서 직접 Javascript를로드 할 수 있습니다.
javascript:var%20s=document.createElement('script');s.setAttribute('src','http://YOURJAVASCRIPTFILE.js');document.getElementsByTagName('body')[0].appendChild(s);void(s);
Im assuming you want your extension to load JQuery so you can manipulate the page elements easily? My company's labs has something that does this using Javascript directly here: http://parkerfox.co.uk/labs/pixelperfect
Turns out the current top-answer by @sunsean does not work as expected when it comes to handling multiple loads. The function should properly close over the document and avoid global state.
Also, you have to call jQuery.noConflict(true) to really avoid conflicts with other add-ons!
This is who I would write it (then again, I would avoid jquery (in add-ons) like the plague...). First the overlay XUL
<?xml version="1.0"?>
<overlay id="test-addon-overlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<script type="text/javascript" src="jquery.js"/>
<script type="text/javascript" src="overlay.js"/>
</overlay>
And then the overlay script:
// Use strict mode in particular to avoid implicitly var declarations
(function() {
"use strict";
// Main runner function for each content window.
// Similar to SDK page-mod, but without the security boundaries.
function run(window, document) {
// jquery setup. per https://stackoverflow.com/a/496970/484441
$ = function(selector,context) {
return new jq.fn.init(selector,context || document);
};
$.fn = $.prototype = jq.fn;
if (document.getElementById("my-example-addon-container")) {
return;
}
let main = $('<div id="my-example-addon-container">');
main.appendTo(document.body).text('Example Loaded!');
main.click(function() { //<--- added this function
main.text(document.location.href);
});
main.css({
background:'#FFF',color:'#000',position:'absolute',top:0,left:0,padding:8
});
};
const log = Components.utils.reportError.bind(Components.utils);
// Do not conflict with other add-ons using jquery.
const jq = jQuery.noConflict(true);
gBrowser.addEventListener("DOMContentLoaded", function load(evt) {
try {
// Call run with this == window ;)
let doc = evt.target.ownerDocument || evt.target;
if (!doc.location.href.startsWith("http")) {
// Do not even attempt to interact with non-http(s)? sites.
return;
}
run.call(doc.defaultView, doc.defaultView, doc);
}
catch (ex) {
log(ex);
}
}, true);
})();
Here is a complete add-on as a gist. Just drop in a copy of jquery and it should be good to go.
It may be bad practice, but have you considered including it inline?
Instead of
$('img',content.document);
you can try
$('img',window.content.document);
In my case it works.
ReferenceURL : https://stackoverflow.com/questions/491490/how-to-use-jquery-in-firefox-extension
'Program Tip' 카테고리의 다른 글
| 캐시 라인 크기에 언제 어떻게 정렬해야합니까? (0) | 2020.12.27 |
|---|---|
| Android에서 Docker 실행 (0) | 2020.12.27 |
| 문자열을 long으로 변환하는 방법 (0) | 2020.12.26 |
| 최소 DatePicker 날짜를 현재 날짜로 설정하는 방법 (0) | 2020.12.26 |
| 브라우저가 jQuery를 사용하는 Chrome인지 감지하는 방법은 무엇입니까? (0) | 2020.12.26 |