I am working with chrome extension development and bubble box jquery plugin.
I need to get current browser html content using chrome extension so that I will add html content on It using bubble box jquery plugin.
Have you any idea how to get html content.
Thanks in advance
Well, you are using jquery so the easy way to get the entire page's html is $(document).html
This is pretty basic stuff. Are you stuck trying to figure out how to create your first working chrome extension?
Related
I have a project with a very standard layout so I suspect this is a common problem:
<body>
HEADER-CONTAINER DIV - includes superfish jQuery menu plugin but am open to other menu options if necessary.
CONTENT-CONTAINER DIV - depending on the page, contains several other jQuery plugins, HTML, javaScript, etc.
FOOTER-CONTAINER DIV
</body>
I'm looking for a elegant and well performing way to have a superfish menu click load the CONTENT-CONTAINER DIV with new content. The content contains both HTML and javaScript. I also want the solution to change the URL so if someone returns later to /my/page it will reload to the correct location (similar my understanding of Backbone.Router).
Any suggestions? If possible, please provide a link to a page loading into a div example and running any javaScript included in the load.
Superfish or not this is not really a problem. Whenever you add html to the page the browser will execute any javascript or load any javascript file this new html snippet will contain.
So when you click on your menu, you load (or generate) new html and replace your content div with this new content, the browser will execute the scripts.
You will have to rebind all events on that newly inserted content because jQuery will loose track of that.
I searched around and found the a decent example that shows how to take any #url and reload a div. Example found at http://thomasdavis.github.com/examples/restful-app/
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
I am using Firefox and i have a page which has an Tag.
The contents embedded within this tag cannot be seen from normal "View Page source" option. So i installed Firebug plugin and i can get see the contents using Firebug. My issue is, i cannot script any of these elements using FireWatir. Anybody has any ideas how to do this using Firewatir? Your help would be greatly appreciated.
You can only script the iframe's page if it comes from the same domain. If so, you can access the iframe's document by doing iframe.contentDocument. You can also access the iframe's window by doing iframe.contentWindow:
https://developer.mozilla.org/en/HTML/Element/iframe
Watir and FireWatir should not have problems with frames. Take a look at Frames page at Watir wiki for more information.
You did not say what is the problem. Some relevant HTML and your Watir code would help.
I would also suggest that you post this at Watir list too.
I am creating a Firefox extension that is somewhat similar to Firebug. There is a panel (or vbox) at the bottom of the browser that allows users to specify colors to certain Html elements. When they click the OK button, I would like these colors to get updated on the current web page.
I have my JavaScript working when I click the button (i am just throwing an alert), however when I change that JavaScript to change the css or styles of an element (by either using document.getElementById or jquery), nothing changes.
Is there something with Firefox extensions that I am missing? Any help is appreciated.
Let me know if you have any questions. Thanks
https://developer.mozilla.org/en/Extension_Frequently_Asked_Questions#Accessing_the_document_of_a_webpage_doesn%27t_work
You want content.document.getElementById() and similarly for every other construct you use.
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.