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

Question

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.

Answer 1

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.