I'm to make a firefox extension which will inject some js code as well as whole jQuery lib.
I want it to happen (the injection) when user pushes the button placed somewhere in the browser. I have read docs form MDC and other tutorials about making the extensions and they seem complicated to me. Technologies such as XPCOM or XUL are completely useles form me (I have no time to learn them in fact). My question is, is it another way of solving my problem then following MDC? I need to find quicker way of doing my task.
I've already written the extension for Google Chrome, and it was a way simplier than doing it for Firefox.
I would take a look at Greasemonkey. It shares some similarity with Chrome plugins in function (Script gets injected on the page, local storage, etc). As for using JQuery with Greasemonkey, look at this question: How can I use jQuery in Greasemonkey?
You can use a bookmarklet to add jQuery to a page and/or inject any other code.
Related
I want to intercept and modify a url in firefox so that part of it turns into a "better" version of the website.
More specificity I want to turn this:
https://www.youtube.com/shorts/(video-id)
into this:
https://www.youtube.com/watch?v=(video-id)
I want a general solution so I can do this to more sites than just youtube.
I found my answer, not completely what I wanted but good enough:
https://git.bradleylaboon.com/lb.laboon/youtube-shorts-disabler
also as:
https://addons.mozilla.org/sv-SE/firefox/addon/youtube-shorts-disabler/
It is so simple I can do a new addon for every site if need be.
The only problem I have is that it does not work if I follow a link/left klick on a YouTube short within YouTube, apparently Firefox does not report that the URL has changed to the plugin. A simple page refresh (F5 in my case) fixes that.
I am making a firefox pluggin and I want to open a "topbar" on a few websites. Realy, it would be a few informations about the curent page a link back to my own website. What would be te best way to do that ?
My first idea was to use content script, but that seems to be a very bad practice. I also read about panels, here are my questions :
How can I add my pannel just under the adressbar ?
How can I only open in it on the website I need ?
thx.
Using content script is completely fine.
It is modern, simple, less-code, more compatible way
to add top-panel to some web pages.
Also, code of content script is not injected to the web page, it just uses the dom and context; page script has no access (if you do not provide it explicit) to content script.
The only possible disadvantage is that panel would not look like native part of the browser.
If I convienced you to use content script:
The module you really need in your plugin page-mod
Using Add-on Builder you make have your plugin in a day
I would like to create my firefox addon. I want to call a javascript that changes the src of the iframes.
I dont know how to build an addon that calls my function on BEFORE PAGE LOAD. Only I got is the main.js. I tried to insert alert('hello'); into it, but nothing happens. Is there any useful tutorial for this?
The best place to start is the Addon SDK documentation:
https://addons.mozilla.org/en-US/developers/docs/sdk/1.4/
In particular there is a getting started tutorial:
https://addons.mozilla.org/en-US/developers/docs/sdk/1.4/dev-guide/addon-development/getting-started.html
While it may not solve your particular problem with controlling iframe urls, it will give you a better idea how the SDK works.
Indeed one the most desirable things is get the DOM loaded. So generally we must wait until page is loaded (DOM).
That's why listener as the following are used so much:
window.addEventListener("load", function(){}, false);
appcontent.addEventListener("DOMContentLoaded", function docLoader(e){}, true);
So just call any function that you build. It will run before any page load.
To work in FF addon development helps a lot always make searches prefixing MDN (Mozilla Developer Network). Besides I recommend you read all this MDN: XUL School Tutorial. It start like this:
XUL School is a comprehensive add-on development tutorial, focusing on
Firefox extension development. It is recommended that you read through
all of it at least once. While Firefox changes rapidly, the content in
this tutorial should be up to date and valid.
So my problem is relatively simple, I've Googled all over to find a solution but I've yet to find one.
The problem is, I've developed a WYSIWYG plugin for Drupal's WYSIWYG module/framework (not sure if this is relevant). The purpose of the plugin is to allow embedding of video files inside the WYSIWYG content. Our client offers a video uploading/editing API which their customers use to embed files on their pages.
To put it simply, my plugin opens up a pop-up where the user selects one of their videos as fetched from their account at the clients site, the plugin then calls the API and is returned with HTML and JavaScript for embedding the video which is then inserted into the WYSIWYG content.
This works like a charm in Firefox, however I have a few problems with it in Chrome. After debugging back and forth I've noticed that the embedded JavaScript inside the WYSIWYG editor gets escaped (IE, quotes turned into " etc).
This does not happen with Firefox so it's most likely Chrome which is causing it, or perhaps even Webkit?
I've already checked the HTML and JavaScript that gets returned through the Ajax call and it is fine, it's when it gets embedded inside the WYSIWYG it gets escaped.
The WYSIWYG editor I've tested in is TinyMCE by the way.
Adding as an answer for #tobbr to help other SO users:
i solved this by adding the script to a db table instead and then
loading it using drupal_add_js with hook_nodeapi. works better and
solves another IE related problem
Is it possible through a plugin or setting or something to allow Firefox to recognize the live DOM source code?
Basically, firebug or other similar tools can recognize elements on the page which Firefox does not.
I understand with these extensions I have the ability to see such changes made by javascript, but Firefox does not seem to fully recognize them.
I'll try to clarify.
If I load a page and view source (ctrl-U), I see what the server sent to Firefox, and what Firefox ostensibly recognizes as the source code of the page. If in that source code, there is javascript which alters the DOM, and then I hit (ctrl-U) again, the code is not updated.
I am using a testing tool (iMacros firefox plugin) to automate functionality, but it does not recognize the updated DOM because Firefox does not. Firebug and similar tools can recognize these "live" updates. Does that help?
http://www.chapter31.com/2006/12/04/viewing-ajax-generated-source-code/
You can try using the web-developer extension with a view-generated-source option.
I'm still not sure I understand your question, but I think what you're getting at is the Web Developer extension for FireFox, specifically its "View Generated Source" feature.
That will let you see the altered DOM.
Firebug gives u this ability:
for instance check the HTML tab when running a jquery ticker and see the dynamic changes live in the DOM
Usually, when I have weird issues with either the console or the DOM inspector with firebug, I find restarting the browser and validating your code is the way forward.
That said, I'm not really following your question, the document that firebug shows is the same one in the firefox window...?
It looks like the problem is not that you want firefox to show the current DOM when you hit CTRL+U, but that you want some automated testing tool to be able to test your web pages.
Perhaps you should use a testing tool that is suited to the job of testing rich web applications, Selenium, for example, can do this.