Google Chrome Extension Manipulate DOM of Open or Current tab - javascript

Ok, JavaScript/jQuery I got that, I can work with that to do what I want in general. However what I am trying to do currently is work with the DOM of the open/current tab, and I am wondering if that is possible or is all the work I do with an extension limited to the html I provide it with a "background.html" or equivalent.
For todays attempt at taking a strike at a google extension I want to take images on a page and store them in an array to create a slide show like effect from it via a bar I want to add to the bottom of the page appending it to the existing DOM of the open/current tab. I then want "hide" elements in the DOM til the bar is closed.
So my first question is, is something like this possible, can I manipulate the DOM in such a way and read from it.

Content Scripts are scripts which run in an environment between a page and the Chrome extension. These scripts are loaded on every page load, and have full access to the page's DOM. DOM methods, such as document.getElementById() behave as if they were a part of the page.
The global window objects (including frames and HTMLIFrameElement.contentWindow) are the only objects which are not directly readable by Content scripts.
Content scripts run on every page as defined in the manifest file. Specify a match pattern at the "content_scripts" section, to define on which pages the content script has to run. Also add this pattern to the "permissions" section, to unlock the ability to modify the page's DOM.
Note: Only a few of the chrome.* APIs, can be used by these scripts (such as chrome.extension.sendRequest to communicate with the background page).
In a background page, the DOM of a page is not directly accessible. You can inject scripts in an arbitrary tab using chrome.extension.executeScript, but you won't be able to get a direct reference to an element. For this purpose, Content scripts are required.

Related

Highlight elements on cross origin page

I need to accomplish something very similar to the "inspect element" functionality with Chrome developer tools (see attached screenshot).
The main thing I'm looking for is the ability to recognize and highlight an element on the given page. I can display an overlay, add a class to the element, etc. I know that using an iFrame and trying to access and manipulate the DOM w/in the iFrame won't work directly because its cross-domain. I also know about post messages if you have control over the site, but I may not have that all the time. The main issue I have is that I am only trying to temporarily highlight elements on a page as if I had clicked "inspect element" and displaying that. It doesn't need to persist or anything, just to highlight specific elements (h1 tags for example), when the user loads a website within my app. Even the ability to use the chrome developer tools where it lets you "edit as HTML" would work if there were a way to do so.
Is there any way, using an iFrame, a new tab, or any other means that I can use to highlight elements on a given website who's URL is provided? I've attached another image of the "goal".
It seems like you have three options to highlight the elements.
1. Browser Extension
2. Send events through postMessage to direct the iframe site to manipulate its DOM
3. Send events through postMessage to receive information about the positioning of the DOM and overlay elements on top of the iframe.
#1 seems to be a longer overhaul to do. #2 and 3 is only possible if you will always have access to the website in the iframe.
https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage
The window.postMessage() method safely enables cross-origin communication between Window objects; e.g., between a page and a pop-up that it spawned, or between a page and an iframe embedded within it.

Select of a section of a web page and output all js used there?

Is there an application that allows me to select a section of a web page, and then outputs all js used there? I've been told I can do this with Chrome Inspector, but haven't had any success so far.
Example:
On this page - http://preview.oklerthemes.com/porto/2.7.0/page-left-sidebar.html - there is a tabbed box in the sidebar. I want to easily grab all the JS/CSS needed for that box. I usually use Inspector to look at all the styles, and go and grab theme from each CSS file, but I don't know how to do this for the JS.
It's not quite clear from your question what you're asking.
Are you trying to see what JS causes writes or changes to a particular part of a web page? The easiest way would be to open the page with the element inspector, right-click a particular chunk of HTML and stick a breakpoint on modifications.
The next time a function causes any changes, the breakpoint will trigger and you'll be able to crawl up the call stack to see what the cause was.

execution order for twitter iframe and other javascript getting the contents of the former

I have content. They are all different (generated from widgets on Wordpress), and they all need to be pulled apart and concatenated in various ways. Basically on window.load, the javascript loops through each of the widgets, takes out the content, then puts them in clean containers in a specific order, then fades them in nicely. This works perfectly.
In comes Twitter. Twitter has a script that loads an iframe. The Twitter script is inside a widget. I'm doing the same thing, taking the contents of the widget and dumping it into a new container. This causes it such that I'm taking the Twitter script and putting it into a new container before the iframe has loaded. Somewhere along this journey, the iframe never loads. I don't want to manipulate the content inside the iframe by an means, I just want it to load in the container I choose.
My question is: is this process wrong? Or, can I get the iframe to load first, THEN grab the contents of the iframe and dump it in another container? It seems as if the iframe doesn't load until the page is loaded, but my javascript is interrupting the load process and stopping.
I'm not sure if I'm explaining this correctly, nor do I have example code that is in simplified form. Is this question answerable without these things? Thanks for the help in advance.
Edit: Taking out window.onload solved the problem. Meaning, window.load was probably interrupting the iframe from loading. However, window.load is necessary. Any other ideas?
So, the answer to my question :
Or, can I get the iframe to load first, THEN grab the contents of the iframe and dump it in another container?
No. Currently, there's no way to do this. See reference The Twitter script was firing right away, and the window.onload was being rightfully interrupting.
The Twitter embed script is in two parts: an element and the inline script. My workaround was to keep the script inside the javascript, and keep the element in the widget (so the client can switch off, have multiple twitter account embeds, etc). Then, after the DOM elements are finished shuffling around and into their respective containers, I insert the script into the widget for twitter.
The iframe load, and tada! No more half-loaded twitter iframe.

What are the benefits of not using an iframe to embed one site in another?

I was studying how Disqus and other embedded wigets are implemented, and I came to realize that they don't use an enclosing iframe where all their widget is run. What they do is to append elements dynamically to the embedding page through JavaScipt and then run almost every form or button in some iframe. What's the point of doing this? Couldn't they just wrap everything in an iframe and then change the parent window URL (to allow navigation) through some kind of cross-domain messaging system such as easyXDM? Can anybody point out some benefits that arise from having some elements not inside an iframe?
Code inside an iframe may not be able to set cookies as browser thinks it is an advertisement.
Iframe content cannot control the size of the outside iframe, so iframe needs to be created with javascript and javascript needs to be loaded externally so that external site has total over iframe size.

Communicate with iFrame code (Chrome Extension)

Happy new year :)
I have a Chrome extension which is a popup that contains an iframe, inside that iframe i load a whole web app. my question is
How can i communicate with the code inside that iframe form popup.html or from the background page? I would need to either read DOM elements inside that iframe or better be able to make js calls to different methods.
Thanks for all the help!
Use a content script that loads inside that frame. They can access the DOM of that page and make calls to the background page, though it's a bit harder to be able to communicate with the JavaScript on that page - but DOM elements should be fine if you control both the iframe and the extension.
See http://code.google.com/chrome/extensions/content_scripts.html

Categories

Resources