Google Chrome Extension Manipulate DOM of Open or Current tab
google-chrome, google-chrome-extension, javascript, jquery
Solution
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.
Problem
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.